UWP Adaptive UI
-
Upload
james-quick -
Category
Technology
-
view
579 -
download
0
Transcript of UWP Adaptive UI
![Page 1: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/1.jpg)
Build Adaptive UI’s for Phones, Tablets, Desktops, Xbox, and MoreJames Quick@jamesqquick
![Page 2: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/2.jpg)
AgendaUWP Design PrinciplesWhat Devices Am I Designing For?Design Techniques for Adaptive UIHow to Build an Adaptive UIDemos/Hands On
![Page 3: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/3.jpg)
Phone Small Tablet
2-in-1s(Tablet or Laptop)
Desktops & All-in-OnesPhablet Large Tablet
Classic Laptop
Xbox IoTSurface Hub
Holographic
Windows 10
![Page 4: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/4.jpg)
UWP Design Principles
![Page 5: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/5.jpg)
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
![Page 6: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/6.jpg)
Four is the magic number
![Page 7: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/7.jpg)
Scaling algorithm
![Page 8: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/8.jpg)
![Page 9: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/9.jpg)
Effective pixel
Effective Pixel
Physical Pixel
![Page 10: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/10.jpg)
![Page 11: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/11.jpg)
Ignore scale, resolution, & dpi.Design in Effective Pixels
![Page 12: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/12.jpg)
What Device Am I Designing For?
![Page 13: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/13.jpg)
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”
![Page 14: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/14.jpg)
Snap points
phablet & tablet
desktopphone548 720 1024320ep
x
![Page 15: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/15.jpg)
Keep it SimplePhone
(Portrait)Tablet/Desktop
(Landscape)
![Page 16: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/16.jpg)
Demo: Calculator and Calendar
![Page 17: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/17.jpg)
As you design
1. Adapt to size change2. Adapt to input change 3. Use Effective Pixels
![Page 18: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/18.jpg)
Design Techniques for Adaptive UI
![Page 19: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/19.jpg)
Reposition1
Reveal4
Resize2
Replace5
Reflow3
Re-architect6
Use standard responsive/adaptive design techniques
![Page 20: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/20.jpg)
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
![Page 21: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/21.jpg)
Tailored designBuild unique experiences on different devices
Phone (portrait)Tablet (landscape) / Desktop
![Page 22: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/22.jpg)
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);
![Page 23: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/23.jpg)
How to build an Adaptive UI
![Page 24: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/24.jpg)
Visual states allow you to define different selectable layouts that can be applied to your UI
![Page 25: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/25.jpg)
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); };}
![Page 26: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/26.jpg)
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>
![Page 27: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/27.jpg)
Adaptive triggers are a zero-code solution
![Page 28: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/28.jpg)
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>
![Page 29: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/29.jpg)
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
![Page 30: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/30.jpg)
Demo: SplitView
![Page 31: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/31.jpg)
Demo: Adaptive Triggers
![Page 32: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/32.jpg)
Demo: Hide Content
![Page 33: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/33.jpg)
Demo: SplitView with Adaptive Triggers
![Page 34: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/34.jpg)
Demo: RelativePanel with Adaptive Triggers
![Page 35: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/35.jpg)
Developers have many toolsto build an adaptive UI
![Page 36: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/36.jpg)
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
![Page 37: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/37.jpg)
ResourcesSlides - http://www.slideshare.net/JamesQuick/uwp-adaptive-ui
![Page 38: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/38.jpg)
ReviewThe Microsoft design languageHow Windows makes design easierWhat am I designing?Adaptive UI Techniques Adaptive UI Tooling
![Page 39: UWP Adaptive UI](https://reader035.fdocuments.in/reader035/viewer/2022062522/588349601a28abbe6b8b67a1/html5/thumbnails/39.jpg)
© 2015 Microsoft Corporation. All rights reserved.