Windows 10 Adaptive Interface Mark Schramm, Microsoft MVP windows platform development @markbschramm http://blog.markbschramm.com 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.

Adaptive Interface Devices Scaling Pixels Design Controls

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.

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

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

Planning Your Design

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

Snap Points (Adapt to Size)

Use Standard responsive/adaptive design techniques

How to Build Adaptive UI C# & XAML

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

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

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

XAML Controls Splitview, RelativePanel,

SplitView

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

Windows 10 UWP Adaptive UI