Building Responsive Apps for Windows 10 Greg Lutz. GrapeCity

Transcription

1 Building Responsive Apps for Windows 10 Greg Lutz GrapeCity

2 Responsive Design == Adaptive UI The 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.

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

4 Universal Adaptive UI Universal 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.

5 Session Overview Our 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

6 Universal Adaptive UI continued Some 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.

7 Windows 8.1 Universal Apps Windows 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.

8 Windows 10 Universal Apps With 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.

9 Universal Windows App Now 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

10 Demo Universal Windows App Template

11 Adaptive UI Techniques for XAML 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).

12 Adaptive UI Basics The 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

13 Adaptive UI Basics continued There 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.

14 Grid vs StackPanel GRID Column and Row placement STACKPANEL Horizontal or Vertical stacking Grid.Column=0 Grid.Column=1 Grid.Column=2 Grid.Row=0 Grid.Row=1 Tip: Let children fill the space

15 Demo Adaptive UI with Grid & What Not to Do

16 Visual State Manager The 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.

17 Demo VisualStateManager With AdaptiveTrigger

18 Define different views The alternative to using VSM is to define different Views the old fashioned way.

19 ListView vs GridView LISTVIEW Vertical list Similar to ListBox GRIDVIEW Horizontal and Vertical list (Tiles) Tip: Use ListView for Phone, GridView for tablet/pc

20 Demo Contoso Cookbook

21 ScrollViewer vs ViewBox SCROLLVIEWER Adds scrolling to view content that doesn t fit available space *Most common approach VIEWBOX Stretches and scales child items to fit available space Same output for all devices not normally a good thing Abcdefghijklmnopqrst Abcdefghijklmno Abcdefghijklmnopqrst Abcdefghijklmnopqrst

22 Demo ViewBox vs ScrollViewer

23 New Adaptive Layout Controls RelativePanel is like a grid but requires less markup to create certain layouts. SplitView is useful to create master/detail page navigation or hamburger lists.

24 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>

25 SplitView View 1 View 2 View 3 View Content <SplitView> <SplitView.Pane> <!-- Navigation List --> </SplitView.Pane> <! Content --> </SplitView>

26 Demo Adaptive SplitView

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

28 App Bars App 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

29 Semantic Zoom SemanticZoom 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.

30 Demo Semantic Zoom (Contoso Cookbook)

31 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

32 What Can Be Shared Everything. Share Code Business Logic Converters XAML Pages User Controls App Bars Resources Styles Files

33 Adaptive UI - Strategy Define each UI part twice for tablet and phone. Do simplify the phone UI by- Showing less content Dividing out content Put 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

34 Summary This 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).

35 Resources & Contact Information dev.windows.com/develop Greg Lutz AlakaXaml.wordpress.com