uwp adaptive ui
TRANSCRIPT
Build Adaptive UI’s for Phones, Tablets, Desktops, Xbox, and MoreJames Quick@jamesqquick
AgendaUWP Design PrinciplesWhat Devices Am I Designing For?Design Techniques for Adaptive UIHow to Build an Adaptive UIDemos/Hands On
Phone Small Tablet
2-in-1s(Tablet or Laptop)
Desktops & All-in-OnesPhablet Large Tablet
Classic Laptop
Xbox IoTSurface Hub
Holographic
Windows 10
UWP Design Principles
We want you to use your design, fonts, icons etc…
If you’re stuck, or need inspiration, we share our first party guidance that you can use
Four is the magic number
Scaling algorithm
Effective pixel
Effective Pixel
Physical Pixel
Ignore scale, resolution, & dpi.Design in Effective Pixels
What Device Am I Designing For?
Planning your design
PhoneViewing Distance:
16.3”
Tablets and 2 in 1Viewing Distance:
20”
Small and Large Laptops
Viewing Distance:24.5”
Small and Large Desktop Monitors
Viewing Distance:28”
TVViewing Distance:
84”
5”
8”
13”
Snap points
phablet & tablet
desktopphone548 720 1024320ep
x
Keep it SimplePhone
(Portrait)Tablet/Desktop
(Landscape)
Demo: Calculator and Calendar
As you design
1. Adapt to size change2. Adapt to input change 3. Use Effective Pixels
Design Techniques for Adaptive UI
Reposition1
Reveal4
Resize2
Replace5
Reflow3
Re-architect6
Use standard responsive/adaptive design techniques
Adaptive designBuild a page that adapts to different screen sizes and orientationsVisual States and Adaptive Triggers to change layoutRelativePanel to position blocks relative to each other
Phone (portrait)Tablet (landscape) / Desktop
Tailored designBuild unique experiences on different devices
Phone (portrait)Tablet (landscape) / Desktop
Building Tailored ViewsBuild unique experiences on different devices
One option: Build separate pages for individual familiesCan interrogate resource qualifiers (from MRT) to determine the family
Option 2: Use XAML views
var qualifiers = Windows.ApplicationModel.Resources.Core .ResourceContext.GetForCurrentView().QualifierValues;
if (qualifiers["DeviceFamily"] == "DeviceFamily-Xbox") // optimized for games console rootFrame.Navigate(typeof(MainPage_Xbox), e.Arguments);else rootFrame.Navigate(typeof(MainPage), e.Arguments);
How to build an Adaptive UI
Visual states allow you to define different selectable layouts that can be applied to your UI
How to set the visual state in codeVisualStateManager.Goto(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 triggersCode-free state transitionTwo built-in triggersMinWindowHeight (Taller than this)MinWindowWidth (Wider than this)
<VisualState x:Name="VisualState500min"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="501" /> </VisualState.StateTriggers></VisualState>
Adaptive triggers are a zero-code solution
Visual state settersSetting a simple, scalar valueGreat when you think of ENUM values like Visibility, Stretch, etc
Does not invoke a storyboardDoes 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>
XAML's RelativePanel controlA child or two act as a anchor elementsThey are relative to the panel
Other children are relative to the anchorsRelativePanel.Above = "ElementName"RelativePanel.RightOf = "ElementName"RelativePanel.Below = "ElementName"RelativePanel.LeftOf = "ElementName"
RelativePanel simplifies adaptive UIA simple Visual State setter can rearrange the UIOne element can move a family of related elements
Demo: SplitView
Demo: Adaptive Triggers
Demo: Hide Content
Demo: SplitView with Adaptive Triggers
Demo: RelativePanel with Adaptive Triggers
Developers have many toolsto build an adaptive UI
ResourcesUWP Adaptive UI Demos - http://bitly.com/uwpuidemosUWP Adaptive UI Mail Client - http://bit.ly/uwpuiemailUWP UI Design - https://msdn.microsoft.com/en-us/magazine/mt590974.aspxChannel 9 Video - https://channel9.msdn.com/Series/A-Developers-Guide-to-Windows-10/07UWP Design Basics - https://dev.windows.com/en-us/design/design-basics
ResourcesSlides - http://www.slideshare.net/JamesQuick/uwp-adaptive-ui
ReviewThe Microsoft design languageHow Windows makes design easierWhat am I designing?Adaptive UI Techniques Adaptive UI Tooling
© 2015 Microsoft Corporation. All rights reserved.