1. 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.

2. 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

3. Fundamentals of Layout
demo
Fundamentals of Layout

4. Windows allows users to choose the device that is right for them and their productivity

5. 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

6. Fluid Layout in XAML Horizontal/Vertical Stretch modes
Star-sizing on width/height

7. Fixed Layout in XAML
<Grid x:Name="LayoutRoot" Background="Green">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
</Grid.ColumnDefinitions>
<Rectangle Fill="Red" Grid.Column="1" />
</Grid>

8. 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>

9. 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>

10. 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

12. Grid Template Normal

14. Grid Template Snapped

15. Grid Template Snapped

16. Grid Template Snapped
:( FAIL

17. 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

19. InitialRotation and Preferred Orientation…
<Application …>
<VisualElements DisplayName="Application18" Logo="Images\Logo.png" SmallLogo="Images\SmallLogo.png" Description="Application18" ForegroundText="light" BackgroundColor="#222222"
InitialRotationPreference="landscapeAndFlipped">

20. InitialRotation and Preferred Orientation
protected override void OnLaunched(LaunchActivatedEventArgs args) {
DisplayProperties.AutoRotationPreferences = DisplayOrientations.Landscape | DisplayOrientations.LandscapeFlipped;
Window.Current.Content = new MainPage();
Window.Current.Activate(); }

21. Layout versus Resize Resize Layout Orientation
Window events…you will still get them
Layout
View “state” changes: FullScreen, Filled, Snapped
Orientation
Portrait  Landscape changes

22. FullScreen

23. Snapped
Filled

24. VisualStateManager Use VisualStates for each layout
FullScreen (this is ‘normal’ and Landscape)
Filled
Snapped
Portrait
VisualStateManager.GoToState() helps easy switching

25. demo
-Layout and Orientation Events -Using VisualStateManager -Tailoring Snapped Views using Navigation -Sudoku Demonstration

26. 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>

27. 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(); }

28. 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

29. 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” 1366x dpi
10.6” 1920x1080
208 dpi
10.6” 2560x1440
277 dpi
100%
140%
180%

30. 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

31. Image Source Example
<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
<Image Source="Assets/product.png" Width="100" Height="100" />
</Grid>

32. 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

33. When you design for adaptability in all cases your users will be delighted

34. 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

35. dev.windows.com

36. thank you Feedback and questions http://forums.dev.windows.com
Session feedback

37. 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.