1. Windows 10 Adaptive Interface
Mark Schramm, Microsoft MVP
windows platform development
@markbschramm
Examine the Microsoft design language, design principles for Windows 10, and how Windows makes design easier for developers with adaptive controls. See how to approach designing your own UWP apps.

2. Adaptive Interface
Devices
Scaling
Pixels
Design
Controls

3. 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
Windows 10 runs on a wide variety of devices, from phones with a 4.5” screen, through phablets, tablets, PCs, laptops, convertibles such as the Surface, on desktops and All-in-ones, to the Xbox in your living room and right up to giant 84” screens such as our team collaboration device, the Surface Hub. And it also takes in very tiny cheap computers such as the Raspberry Pi 2, and innovative hardware such as the Hololens.

4. Scaling Algorithm (Built in)
Developer doesn’t have to worry about it.

6. Effective Pixels Ignore scale, resolution & dpi.
Design in Effective Pixels
XAML is already in Effective Pixels

7. Planning Your Design

8. As You Design Adapt to size change Adapt to input change
Rely on the scaling algorithm
Remember that 4 is the magic number

9. Snap Points (Adapt to Size)

11. Use Standard responsive/adaptive design techniques

12. How to Build Adaptive UI
C# & XAML

13. Visual States Define XAML Views Simplify animation Build in Blend
Unique layout for distinctive states
Simplify animation
Automatically implement state transitions
Build in Blend
Design and preview states and transitions

14. Adaptive Triggers instead of Code
Code-free state transitions
Two build-in triggers
MinWindowHeight (Taller than this)
MinWIndowWidth (Wider than this)

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

16. XAML Controls
Splitview, RelativePanel,

17. SplitView

18. RelativePanel Control
A child or two act as an anchor element
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

19. Windows 10 UWP
Adaptive UI