Adaptive UI in UWP XAML Andy Wigley Senior Developer Evangelist, Microsoft

Agenda How Windows makes adaptive UI easier What am I designing? Techniques to adapt Adaptive Tooling Visual State Triggers Relative Panel

How Windows makes adaptive UI easier

Windows 10 2-in-1s (Tablet or Laptop) Classic Laptop Desktops & All-in-Ones Phone Phablet Small Tablet Large Tablet Windows 10 Surface Hub Xbox Holographic IoT

Adaptive controls

Input intelligence

Scaling algorithm

Physical versus effective pixel 4” Phone 480x854 5” Phone 720x1280 6” Phone 1080x1920 4” Phone 480x854 5” Phone 720x1280 6” Phone 1080x1920

Ignore scale, resolution, & dpi. Design in Effective Pixels

What am I designing?

Small and Large Laptops Small and Large Desktop Monitors Planning your design Phone Viewing Distance: 16.3” Tablets and 2 in 1 Viewing Distance: 20” Small and Large Laptops 24.5” Small and Large Desktop Monitors 28” TV 84” 5” 8” 13”

Snap points phone phablet & tablet desktop limited landscape support epx 320 548 720 1024 phone phablet & tablet desktop limited landscape support one frame at a time 4+ actions on the bottom tabs are centered limited landscape support one frame at a time 4+ actions on the bottom single column stops scaling tabs are centered full landscape support two frames actions at the top one “…” visible - TBD tabs are left aligned Show search field if search was represented as an icon on smaller devices full landscape support three frames compact nav pane actions at the top one “…” visible tabs left aligned

The weather app

Adaptive techniques

Proportional layout with Grid 2* 1* auto 7* Rows/columns – 3 types of sizing: star sizing proportional: 1*/3* = 25%/75% auto sizing sized to content content can also have Max/Min widths and heights as limits pixel sizing hard-coded size – avoid in most situations auto 4* 1*

Proportional layout with Grid 600 1067 Grid auto 1* 400 711

Visual States Define differing XAML layouts Simplify animation Unique layout for distinct states Simplify animation Automatically implement state transitions Build in Blend Design and preview states and transitions

Visual state setters Setting a simple, scalar value Great when you think of ENUM values like Visibility, Stretch, etc Does not invoke a storyboard Does not require ObjectAnimationUsingKeyFrames <VisualState.Setters> <Setter Target="MyText01.FontSize" Value="24" /> <Setter Target="MyImage.Stretch" Value="UniformToFill" /> <Setter Target="MyImage.Height" Value="150" /> </VisualState.Setters>

Setting visual state in code VisualStateManager.GoToState(element, state, transition) public MainPage() { this.InitializeComponent(); this.SizeChanged += (s, e) => var state = "VisualState000min"; if (e.NewSize.Width > 500) state = "VisualState500min"; else if (e.NewSize.Width > 800) state = "VisualState800min"; else if (e.NewSize.Width > 1000) state = "VisualState1000min"; VisualStateManager.GoToState(this, state, true); }; }

Adaptive triggers Code-free state transition Two built-in triggers MinWindowHeight (Taller than this) MinWindowWidth (Wider than this) <VisualState x:Name="VisualState500min"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="501" /> </VisualState.StateTriggers> </VisualState>

Demo Visual States and Adaptive Triggers 5/8/2018 Demo Visual States and Adaptive Triggers © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.

XAML's RelativePanel control A child or two act as a anchor elements They are relative to the panel Other children are relative to the anchors RelativePanel.Above = "ElementName" RelativePanel.RightOf = "ElementName" RelativePanel.Below = "ElementName" RelativePanel.LeftOf = "ElementName" RelativePanel simplifies adaptive UI A simple Visual State setter can rearrange the UI One element can move a family of related elements

Align with panel <RelativePanel> <Rectangle x:Name="RedRect" Height="100" Width="100" Fill="Red" RelativePanel.AlignHorizontalCenterWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True" /> <Rectangle x:Name="BlueRect" Height="100" Width="200" Fill="Blue" /> </RelativePanel>

Align with sibling (below, center) <RelativePanel> <Rectangle x:Name="BlueRect" Height="100" Width="100" Fill="Blue" /> <Rectangle x:Name="RedRect" Height="100" Width="100" Fill="Red" RelativePanel.Below="BlueRect" RelativePanel.AlignHorizontalCenterWith="BlueRect" /> </RelativePanel>

5/8/2018 Demo RelativePanel © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.

XAML Views XAML page that ‘inherits’ the code-behind of a parent page Used – rarely! – to provide per-device customisations

5/8/2018 Demo XAML views © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.

Developers have many tools to build an adaptive UI

Ne zaboravite ispuniti upitnike. Čekaju vas vrijedne nagrade!