windows 10 adaptive interface mark schramm, microsoft mvp windows platform development @markbschramm
TRANSCRIPT
Windows 10Adaptive Interface
MARK SCHRAMM, MICROSOFT MVPwindows platform development @markbschrammhttp://blog.markbschramm.com
Adaptive Interface
•Devices
•Scaling
•Pixels
•Design
•Controls
Phone Small Tablet
2-in-1s(Tablet or Laptop)
Desktops & All-in-OnesPhablet Large Tablet
Classic Laptop
Xbox IoTSurface Hub
Holographic
Windows 10
Scaling Algorithm (Built in)
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 UIC# & XAML
Visual States
•Define XAML Views• 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 ControlsSplitview, 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 UWPADAPTIVE UI