Building Responsive Apps for Windows 10Greg LutzGrapeCity

Responsive Design == Adaptive UIThe goal of adaptive UI is to adapt its layout to the needs of the user.

In our case Adaptive UI will mean adaption to different sized devices.

In Web development, this is well known as responsive design.

Universal Windows AppsUniversal Windows Apps are built for PC, Mobile, Xbox, Devices +IoT, Surface Hub

Universal Adaptive UIUniversal Windows Apps provide the ability to use a single UI that can adapt from small to large screens without sacrificing user experience.

This means our UI needs to be adaptive in order to get the most out of writing once and sharing code.

Session OverviewOur goal is to build as close to a single UI as possible that is adaptive for all devices.

Focus:

Creating Universal Windows Apps for PC and Mobile

Quick look at the new Visual Studio 2015 app templates

Adaptive UI Techniques for targeting Windows 10 (PC and Mobile)Basic Layouts

New Controls

New Visual State Manager

What to share, when to share, why share

Universal Adaptive UI continuedSome aspects of your UI will automatically adapt:

Input

Scaling for resolution and DPI

Some aspects are made easy (or easier) to design adaptive UI:

New controls and layout panels

Better tooling in Visual Studio 2015/Blend

You can still create separate UIs for different device sizes the old fashioned way.

Windows 8.1 Universal AppsWindows 8.1 targeted an OS (Windows or Windows Phone)

The Windows 8/8.1 Universal Windows App template combined 2 projects along with a shared project.

Windows 10 Universal AppsWith Windows 10 you now target a device family.

The Universal device family is a global set of APIs supported on all platforms.

Your app can use APIs from any number of families.

Universal Windows AppNow a single project template in Visual Studio 2015 that builds a single app package that runs on all platforms*

The new tooling let you preview and debug your app on a variety of device sizes

Designer Preview

DemoUniversal Windows App Template

Adaptive UI Techniques for XAMLUse best practices with primitive layout controls to design our UI so it can be easily adapted to various resolutions.

Use the SizeChanged event and the Visual State Manager class to provide UI changes for different device sizes and orientations (portrait vs landscape vs phone).

Use conditional code against device family APIs to provide UI changes for different device types (PC vs phone).

Adaptive UI BasicsThe key to great adaptive layouts is proper use of primitive layout controls.

Grid

StackPanel

ListView

GridView

ViewBox

ScrollViewer

RelativePanel *New in UWP

SplitView *New in UWP

Adaptive UI Basics continuedThere are two key ways to handle device size changes:

SizeChanged event – handle changes in code-behind

VisualStateManager class – handle changes in XAML

These handle device sizes, but not device type.

Not only are we interested in supporting different device sizes, but we may also want to adapt to device orientation.

Grid vs StackPanel

GRID

Column and Row placement

STACKPANEL

Horizontal or Vertical stacking

Grid.Row=0

Grid.Row=1

Grid.Column=0 Grid.Column=2Grid.Column=1

Tip: Let children fill the space

DemoAdaptive UI with Grid& What Not to Do

Visual State ManagerThe Visual State Manager (VSM) allows you to easily manage UI states

The way it works:

You define your default UI in XAML

You define any number of states in the VSM that modifies the default UI to fit a certain UI scenario

A benefit is that it reduces the redundant UI markup for wanting multiple states for each view

New in Windows 10 Tools: Adaptive Triggers for size changes eliminates need for code in SizeChanged event to listen for size changes.

DemoVisualStateManager

With AdaptiveTrigger

Define different viewsThe alternative to using VSM is to define different

Views the old fashioned way.

ListView vs GridView

LISTVIEW

Vertical list

Similar to ListBox

GRIDVIEW

Horizontal and Vertical list (Tiles)

Tip: Use ListView for Phone, GridView for tablet/PC

DemoContoso Cookbook

ScrollViewer vs ViewBox

SCROLLVIEWER

Adds scrolling to view content that doesn’t fit available space

*Most common approach

Abcdefghijklmnopqrst Abcdefghijklmno

VIEWBOX

Stretches and scales child items to fit available space

Same output for all devices – not normally a good thing

Abcdefghijklmnopqrst Abcdefghijklmnopqrst

DemoViewBox vs ScrollViewer

New Adaptive Layout ControlsRelativePanel is like a grid but requires less markup to create certain layouts.

SplitView is useful to create master/detail page navigation or hamburger lists.

RelativePanel

<RelativePanel>

<Rectangle x:Name=“r1” Fill=“Red” />

<Rectangle x:Name=“r2” Fill=“Blue” RelativePanel.RightOf=“r1” />

<Rectangle x:Name=“r3” Fill=“Green” RelativePanel.Below=“r2” RelativePanel.AlignHorizontalCenterWith=“r2” />

</RelativePanel>

SplitView

<SplitView>

<SplitView.Pane><!-- Navigation List -->

</SplitView.Pane>

<!– Content -->

</SplitView>

View 1View 2View 3

View 1

View Content

DemoAdaptive SplitView

Platform-specific CodeYou can write conditional code to provide different functionality for different devices. This is done in code using the Windows.Foundation.Metadata.ApiInformation class.

App BarsApp Bars provide users with easy access to navigation and common commands.

App Bars are a feature of the Page (which can be shared in Universal apps).

Typically used with CommandBar control

On a phone, only four primary commands will be displayed

Tip: use conditional code to move extra items to secondary menu

Primary Commands

Semantic ZoomSemanticZoom behaves differently on a phone vs tablet/PC.

On PC/tablet, it gives you a zoomed in and zoomed out view controller on pinch/stretch gestures

On Phone, it behaves like the LongListSelector and tapping grouped headers will zoom in and out.

DemoSemantic Zoom (Contoso Cookbook)

Why Share? Why Adaptive UI?For the user, Universal Windows apps provide a universal experience across all versions of your apps

For the developer, sharing is cleaner and results in less code to maintain

Sharing code can be beautiful and enjoyable (like an art form), but it can also make code more complex, so it’s not an end-all solution.

If we are sharing UI across multiple devices of unpredictable sizes we need to be adaptive aware

What Can Be SharedEverything.

Share

• Code

• Business Logic

• Converters

• XAML

• Pages

• User Controls

• App Bars

• Resources

• Styles

• Files

Adaptive UI - StrategyDefine each UI part twice for tablet and phone.

Do simplify the phone UI by-Showing less contentDividing out contentPut content in a ScrollViewer

Maybe use the phone UI for portrait tablet, but keep in mind that users do not expect the UI to dramatically change when they rotate their device.

Don’t worry about resolutions - just follow good practice and your UI will naturally flow to fit

Use tooling/simulators to test different device sizes

SummaryThis session has taken a look at sharing everything, but of course remember that not everything has to be shared.

Technique Recap:

Use best practices with primitive layout controls to design our UI so it can be easily adapted to various resolutions.

Use the SizeChanged event and the Visual State Manager class to provide UI changes for different device sizes and orientations (portrait vs landscape vs phone).

Use conditional code against device family APIs to provide UI changes for different device types (PC vs phone).

Resources & Contact Informationdev.windows.com/develop

Greg Lutz

AlakaXaml.wordpress.com