building responsive apps for windows 10 - wordpress.comresponsive design == adaptive ui the goal of...
TRANSCRIPT
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