Tim Heuer Program Manager Microsoft Corporation 11/16/2018 1:02 PM APP-847T Reach all your customer's devices with one beautiful XAML user interface Tim Heuer Program Manager Microsoft Corporation © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
Agenda Understanding Adaptability XAML Patterns for Managing Layout Providing unique views in Snapped state You’ll leave with examples of how to Ensure users will have a consistent/reliable experience with your app Understand the techniques to accomplish adaptability easily
Fundamentals of Layout demo Fundamentals of Layout
Windows allows users to choose the device that is right for them and their productivity
Screen sizes Minimum app resolution is 1024x768 Baseline resolution is 1366x768 Apps should behave consistently across screen sizes Apps take advantage of added screen real-estate
Fluid Layout in XAML Horizontal/Vertical Stretch modes Star-sizing on width/height
Fixed Layout in XAML <Grid x:Name="LayoutRoot" Background="Green"> <Grid.ColumnDefinitions> <ColumnDefinition Width="250" /> </Grid.ColumnDefinitions> <Rectangle Fill="Red" Grid.Column="1" /> </Grid>
Fluid Layout in XAML (Star-sizing) <Grid x:Name="LayoutRoot" Background="Green"> <Grid.ColumnDefinitions> <ColumnDefinition Width="250" /> <ColumnDefinition Width="250*" /> </Grid.ColumnDefinitions> <Rectangle Fill="Red" Grid.Column="1" /> </Grid>
Fluid Layout in XAML (Stretch) <Grid x:Name="LayoutRoot" Background="Green"> <Grid.ColumnDefinitions> <ColumnDefinition Width="250" /> <ColumnDefinition Width="250*" /> </Grid.ColumnDefinitions> <Button Content="Hello World" Grid.Column="1" HorizontalAlignment="Stretch" /> </Grid>
Snapped Apps Snapped is always 320px wide User is in control of when an app is snapped and all apps are snap-able Apps retain context in continuous experiences Apps can be tailored to the snap view For tailored views use navigation framework and pass state Scrolling patterns change in Snapped
Grid Template Normal
Grid Template Snapped
Grid Template Snapped
Grid Template Snapped :( FAIL
Orientation Windows supports portrait for devices that can be rotated Apps behave consistently in orientation changes Apps can be tailored to in specific orientations Apps can prefer (and/or lock) an orientation No snapped apps in Portrait
InitialRotation and Preferred Orientation … <Application …> <VisualElements DisplayName="Application18" Logo="Images\Logo.png" SmallLogo="Images\SmallLogo.png" Description="Application18" ForegroundText="light" BackgroundColor="#222222" InitialRotationPreference="landscapeAndFlipped">
InitialRotation and Preferred Orientation protected override void OnLaunched(LaunchActivatedEventArgs args) { DisplayProperties.AutoRotationPreferences = DisplayOrientations.Landscape | DisplayOrientations.LandscapeFlipped; Window.Current.Content = new MainPage(); Window.Current.Activate(); }
Layout versus Resize Resize Layout Orientation Window events…you will still get them Layout View “state” changes: FullScreen, Filled, Snapped Orientation Portrait Landscape changes
FullScreen
Snapped Filled
VisualStateManager Use VisualStates for each layout FullScreen (this is ‘normal’ and Landscape) Filled Snapped Portrait VisualStateManager.GoToState() helps easy switching
demo -Layout and Orientation Events -Using VisualStateManager -Tailoring Snapped Views using Navigation -Sudoku Demonstration
VisualStateManager with Layout States <Grid x:Name="LayoutRoot"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="OrientationStates"> <VisualState x:Name="FullScreen" /> <VisualState x:Name="Filled" /> <VisualState x:Name="Snapped" /> <VisualState x:Name="Portrait" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid>
Orientation Helpers public static string GetViewState() { var orientation = DisplayProperties.CurrentOrientation; // portrait if (orientation == DisplayOrientations.Portrait || orientation == DisplayOrientations.PortraitFlipped) return "Portrait"; // else return what it is for landscape return ApplicationLayout.Value.ToString(); }
Pixel Density Problem: as pixel density increases, things get too small to touch With scaling, touch targets are maintained and things get crisper on screen 10.6” 1366x768 10.6” 1920x1080
Pixel Density Windows scales to pixel density to maintain touchability Layouts, text and images are crisper on higher pixel densities Three scale percentages 10.6” 1366x768 148 dpi 10.6” 1920x1080 208 dpi 10.6” 2560x1440 277 dpi 100% 140% 180%
Pixel Density in XAML Avoiding bitmap when vector is available For bitmap provide different images for each scale Structure your application at the source Listen for PPI notifications
Image Source Example <Grid x:Name="LayoutRoot" Background="#FF0C0C0C"> <Image Source="Assets/product.png" Width="100" Height="100" /> </Grid>
Recap Set up app infrastructure for adaptability from the start Listen for specific layout/orientation changes over resize Use Navigation framework and VisualStateManager for transitions Favor vector over bitmap when possible for free scaling
When you design for adaptability in all cases your users will be delighted
Related sessions [APP-207T] Reach your customers’ devices with one beautiful HTML5 user interface [APP-494T] Stand out with styling and animation in your XAML app [PLAT-781T] Using location & sensors in your app [APP-737T] Metro style apps using XAML: what you need to know [APP-741T] Metro style apps using XAML: Make your app shine [HOL] Using Windows 8 templates for building Metro style Apps
dev.windows.com
thank you Feedback and questions http://forums.dev.windows.com Session feedback http://bldw.in/SessionFeedback
11/16/2018 1:02 PM © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.