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

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

6. How Windows makes adaptive UI easier

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

8. Adaptive controls

9. Input intelligence

10. Scaling algorithm

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

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

13. What am I designing?

14. 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”

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

16. The weather app

17. Adaptive techniques

18. Proportional layout with Grid2* 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*

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

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

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

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

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

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

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

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

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

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

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

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

31. Developers have many tools to build an adaptive UI

32. Ne zaboravite ispuniti upitnike.
Čekaju vas vrijedne nagrade!