Build Adaptive UIs with Universal Windows AppsGreg LutzComponentOne, a division of GrapeCity

GOLD SPONSORS

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.

Universal Windows AppsUniversal Windows Apps are apps built for Windows PC/Tablet as well as Phone.

It combines the Windows Store project with Windows Phone project into a single solution with support for sharing nearly everything.

Universal Adaptive UIWith the Universal Windows App template we can now share UI easily across all devices.

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

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

Introduction

Hands-on with Universal Windows apps in Visual Studio

Brief history of Windows Phone SDK

Adaptive UI Techniques (XAML/C# only)

What to share, when to share, why share

Windows Phone SDK Version History

Not compatible

Windows Phone 7.x (Silverlight)

Windows Phone 8.0 (Silverlight)

Windows Phone 8.1 (Silverlight)

Windows Phone 8.1 (WinRT)

Windows 8.0 (WinRT)

Windows 8.1 (WinRT)

Universal Windows Apps (WinRT)

Maintain existing apps

Universal Windows App TemplateThe Universal Windows App template in Visual Studio 2013 (update 2) lets you easily share code, XAML and resources to build apps that target all Windows devices.

Universal Template has 3 Projects:

1. Windows App project

2. Windows Phone App project

3. Shared project

1

2

3

DemoUniversal Windows App Template

What Can Be SharedCode

Business Logic

Converters

XAML

Pages & App Bars

User Controls*

Resources

Styles

Files

Shared

• Code

• XAML

• Resources

Windows AppWindows Phone

App

Why Share? Why Adaptive UI?For the user, sharing delivers 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

Adaptive UI Techniques for XAMLUse Primitive Layout Controls

Determine the number of views you need for each UI part

Know when to separate views or use the Visual State Manager

Share things like Controls, Styles, App Bars, Menus

Primitive Layout Controls (XAML)Grid

StackPanel

ListView

GridView

ViewBox

ScrollViewer

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

ListView vs GridView

LISTVIEW

Vertical list

Similar to ListBox

GRIDVIEW

Horizontal and Vertical list (Tiles)

ListView can be customized to display as tiles, and GridView can display a flat list

ViewBox vs ScrollViewer

VIEWBOX

Stretches and scales child items to fit available space

Same output for all devices – not normally a good thing

SCROLLVIEWER

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

*Most common approach

Abcdefghijklmnopqrst AbcdefghijklmnoAbcdefghijklmnopqrst Abcdefghijklmnopqrst

DemoViewBox vs ScrollViewer

Different Size ConsiderationsWindows Tablet Windows Phone

Landscape Portrait Split “Snapped” Portrait Landscape

Resolutions:1024 x 768 -2560 x 1600*

Resolutions:768 x 1024 -1600 x 2560*

¾ or ½ of Width Min Width: 320 Resolutions:480 x 800 –1080 x 1920

Resolutions:800 x 4801920 x 1080

*No maximum resolution

Adaptive UI – StrategyDo define at least 2 basic views for your UI

1. Landscape Tablet Landscape Tablet View

Portrait Tablet View (adjust margins)

Split Tablet View (adjust margins and headers)

2. Portrait Phone Portrait Phone View

Landscape Phone View

“Snapped” Tablet View (<500 px wide)

Maybe - Portrait Tablet View

DemoContoso Cookbook

Adaptive UI - StrategyDo simplify the Phone and Split UI (depending on complexity)

-Show less content

-Divide content

-Put content in a ScrollViewer

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

Use simulators to test different device sizes

You need only 1 or 2 real devices to test on as a minimum

Define different viewsYou can provide unique views for each scenario

Or use adaptive techniques to modify a single view

…with Primitive layout controls

…with VisualStateManager

…with shared styles, controls, app bars etc.

DemoAdaptive UI with Grid

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

DemoVisualStateManager

Percentage-based SizingWidth = 90%

In HTML this is a common styling behavior

In XAML we must use Behaviors SDK extension

Add a reference to Behaviors SDK (XAML)

DemoPercentage-based Sizing

StylesShare Resources – no problem

Share graphics – no problem

Share colors and Brushes – no problem

Share font styles – no problem

We can share Styles that have different values on each

Sharing Styles is extremely useful because it allows us to more easily share UI

Custom StylesWe can define a single shareable style with customized differences on each device. Here’s how:

Define custom ResourceDictionary with same filename in both projects

Merge custom ResourceDictionary in Shared/App.xaml

Windows Phone Windows Tablet

DemoCustom Styles

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 projects)

Tips

-Top app bar is meant for app navigation

-Bottom app bar is meant for commands related to the current page or selected item

-Don’t put commands that are necessary to complete a workflow in the app bars

Adaptive App Bar TipsIf you have a small number of App Bar buttons they can be shared on all devices

Set the Page.BottomAppBar property to a CommandBar with shared commands

Only the first four buttons in the CommandBar will appear on the phone

Use the SecondaryCommands collections in the CommandBar and these will be translated to additional menu items on the phone

Windows tablet should have no more than 10 app bar buttons

You can even share menu flyouts

DemoUniversal App Bars

Device-specific CodeYou can write conditional code to handle differences between Windows Tablet and Windows Phone.

User pre-compiled #if/else directives:

#if Windows_Phone_App

// do something for Phone

#else

// do something for tablet

#endif

ControlsSome controls are exclusive to either platform and can’t be shared. Some have suitable alternatives

Hub Carousel

SearchBox AutoSuggestBox

??? Pivot

Some controls are the same but look different on each platform

ComboBoxes

Menus

DatePicker

Semantic ZoomSemanticZoom is a sharable control, but it behaves differently on a phone

In Windows Apps, it gives you a zoomed in and zoomed out view controller on pinch/stretch gestures

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

DemoSemantic Zoom (Contoso Cookbook)

SummaryAdaptive UI’s can be created fairly easily while sharing much of the same XAML

Techniques for sizing on all devices-Primitive Layout controls that fill the given space-Percentage-based sizing of controls

Techniques for different UI for different devices-Visual State Manager-Custom, shared styles

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