building adaptive windows 10 xaml appsdownload.microsoft.com/download/c/5/7/c57fb17e-620c-46ad-bc3e...
TRANSCRIPT
![Page 1: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/1.jpg)
![Page 2: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/2.jpg)
Building adaptive Windows
10 XAML apps from Raspberry Pi to Surface Hub Andy Wigley
Microsoft Developer Evangelist
t: andy_wigley b: http://andywigley.com
![Page 3: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/3.jpg)
Agenda
The Microsoft design language
How Windows makes design easier
What am I designing?
Techniques to adapt
Adaptive Tooling • Visual States Triggers
• Relative Panel
![Page 4: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/4.jpg)
http://windows.Microsoft.com
Phone Small Tablet 2-in-1s
(Tablet or Laptop) Desktops
& All-in-Ones Phablet Large Tablet Classic Laptop
Xbox IoT Surface Hub Holographic
Windows 10
![Page 5: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/5.jpg)
The Microsoft
Design Language
![Page 6: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/6.jpg)
Microsoft design language principles
Keep it Simple Isn’t it nice when things just work, when the next step is intuitive, and people are inspired?
Make it Personal We design for real people, not requiring people can fit into our design. Personal means human.
Think Universal Better technology for anyone is better technology for everyone. It’s an attitude.
Create Delight Attention of detail equals moments of delight. Sometimes delight is so perfect it is invisible.
Design as One Work together and do amazing things. Many teams, one ecosystem, happy customers.
![Page 7: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/7.jpg)
Typeography
![Page 8: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/8.jpg)
2px
Iconography
![Page 9: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/9.jpg)
For most text, use
15 epx Segoe UI Regular
![Page 10: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/10.jpg)
Four is the magic number
![Page 11: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/11.jpg)
How Windows
makes design easier
![Page 12: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/12.jpg)
Adaptive controls
![Page 13: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/13.jpg)
Input intelligence
![Page 14: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/14.jpg)
Scaling algorithm
![Page 15: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/15.jpg)
![Page 16: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/16.jpg)
4” Phone
480x854
5” Phone
720x1280
6” Phone
1080x1920
4” Phone
480x854
5” Phone
720x1280
6” Phone
1080x1920
![Page 17: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/17.jpg)
Effective pixel
Effective Pixel
Physical Pixel
![Page 18: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/18.jpg)
Ignore scale, resolution, & dpi.
Design in Effective Pixels
![Page 19: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/19.jpg)
What am I designing?
![Page 20: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/20.jpg)
Planning your design
Phone Viewing Distance: 16.3”
Tablets and 2 in 1 Viewing Distance:
20”
Small and Large Laptops Viewing Distance:
24.5”
Small and Large Desktop Monitors Viewing Distance:
28”
TV Viewing Distance:
84”
5”
8”
13”
![Page 21: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/21.jpg)
Snap points
phablet & tablet
desktop phone
• limited landscape support • one frame at a time • sys tray on the left • steering wheel on the right • 4+ actions on the bottom • tabs are centered
• limited landscape support • one frame at a time • sys tray on the left • steering wheel on the right • 4+ actions on the bottom • single column stops scaling • tabs are centered
• full landscape support • two frames • actions at the top • one “…” visible - TBD • tabs are left aligned • Show search field if search
was represented as an icon on smaller devices
• full landscape support • three frames • compact nav pane • actions at the top • one “…” visible • tabs left aligned
548 720 1024 320 epx
![Page 22: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/22.jpg)
Demo The Weather App
![Page 23: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/23.jpg)
Flow, not size
My UI My UI My UI
![Page 24: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/24.jpg)
Flow, not size
My UI My UI My UI
My UI My
UI My
UI
![Page 25: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/25.jpg)
Check variants
![Page 26: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/26.jpg)
As you design
1. Adapt to size change
2. Adapt to input change
3. Build with effective pixels
4. Count on the scaling algorithm
![Page 27: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/27.jpg)
Adaptive UI design
techniques
![Page 28: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/28.jpg)
![Page 29: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/29.jpg)
![Page 30: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/30.jpg)
![Page 31: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/31.jpg)
ReArchitect/tailored design
![Page 32: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/32.jpg)
Dedicated, targeted apps
Nothing is stopping you from creating a multi-headed solution
![Page 33: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/33.jpg)
Tools for building an
adaptive UI
![Page 34: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/34.jpg)
Visual States
Define XAML views
Unique layout for distinct states
Simplify animation
Automatically implement state transitions
Build in Blend
Design and preview states and transitions
![Page 35: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/35.jpg)
Demo Visual States
![Page 36: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/36.jpg)
Visual states let designers
define many different layouts of a
view
![Page 37: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/37.jpg)
VisualStateManager.Goto(element, state, transition)
Select a visual state in code
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 38: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/38.jpg)
Demo Adaptive triggers
![Page 39: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/39.jpg)
Adaptive triggers Code-free state transition
Two built-in triggers: MinWindowHeight (Taller than this)
MinWindowWidth (Wider than this)
<VisualState x:Name="VisualState500min"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="501" /> </VisualState.StateTriggers> </VisualState>
![Page 40: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/40.jpg)
Adaptive triggers allow selection of
visual states from XAML
![Page 41: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/41.jpg)
Custom triggers support
your special scenarios
![Page 42: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/42.jpg)
Custom adaptive triggers Build to handle special cases
public class DeviceFamilyTrigger : StateTriggerBase { private string _deviceFamily; public string DeviceFamily { get { return _deviceFamily; } set { var qualifiers = Windows.ApplicationModel.Resources.Core .ResourceContext.GetForCurrentView().QualifierValues; if (qualifiers.ContainsKey("DeviceFamily")) SetActive(qualifiers["DeviceFamily"] == (_deviceFamily = value)); else SetActive(false); } } }
![Page 43: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/43.jpg)
Windows Insiders FTW!
http://github.com/dotMorten/WindowsStateTriggers
Morten Nielsen
Windows Developer MVP (@dotMorten)
![Page 44: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/44.jpg)
Demo Custom adaptive triggers
![Page 45: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/45.jpg)
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
<VisualState.Setters> <Setter Target="MyText01.FontSize" Value="24" /> <Setter Target="MyImage.Stretch" Value="UniformToFill" /> <Setter Target="MyImage.Height" Value="150" /> </VisualState.Setters>
![Page 46: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/46.jpg)
Relative Panel is a XAML layout control. It arranges children by declaring relationships between them.
Introducing the Relative Panel
Windows XAML layout controls
Grid Stack Panel
Canvas Scroll
Viewer Border View Box
Wrap Grid
Relative Panel
![Page 47: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/47.jpg)
XAML's RelativePanel control A child or two act as a anchor elements
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 element
![Page 48: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/48.jpg)
Align with panel
<RelativePanel> <Rectangle x:Name="RedRect" Height="100" Width="100" Fill="Red" RelativePanel.AlignHorizontalCenterWithPanel="True" RelativePanel.AlignVerticalCenterWithPanel="True" /> <Rectangle x:Name="BlueRect" Height="100" Width="200" Fill="Blue" /> </RelativePanel>
![Page 49: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/49.jpg)
Align with sibling (below, center)
<RelativePanel> <Rectangle x:Name="BlueRect" Height="100" Width="100" Fill="Blue" /> <Rectangle x:Name="RedRect" Height="100" Width="100" Fill="Red"
RelativePanel.Below="BlueRect" RelativePanel.AlignHorizontalCenterWith="BlueRect" /> </RelativePanel>
![Page 50: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/50.jpg)
Developers have many tools
to build an adaptive UI
![Page 51: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/51.jpg)
Review
The Microsoft design language
How Windows makes design easier
What am I designing?
Techniques to adapt
Adaptive Tooling Visual States Triggers
Relative Panel
![Page 52: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/52.jpg)
Related sessions (28-5) Timeslot Session Speaker
12:15-
13:15
The Windows 10 App platform: an
introduction to the Universal Windows
Platform
Andy Wigley
12:45-
13:45
App lifecycle in Windows 10 Dave Smits
13:00-
14:00
Design for Universal Windows Apps Martin Tirion
14:15-
15:15
Building adaptive Windows 10 XAML apps:
from Raspberry Pi to Surface Hub
Andy Wigley
15:30-
16:30
Universal Windows Platform app to app
communication
Martin Tirion
15:30-
16:30
Universal Windows Apps: 21st Century WIMP
– Adding Ink, Speech and More
Mike Taulty
17:30-
18:30
Windows 10 Universal Windows Apps for
Enterprise
Matthijs Hoekstra
![Page 53: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/53.jpg)
Related sessions (29-5) Timeslot Session Speaker
08:15-
09:15
Universal Windows Apps: Background >=
Foreground
Mike Taulty
12:15-
13:15
The Windows 10 App platform: an
introduction to the Universal Windows
Platform
Andy Wigley
13:45-
14:45
What's new in XAML for Universal Windows
Apps
Martin Tirion
15:00-
16:00
Windows 10 for Makers: Raspberry Pi,
Arduino, AllJoyn & Microsoft Band
Rajen Kishna
16:15-
17:15
Maps and Location in Windows 10 Joost van Schaik
16:15-
17:15
Integrate with Windows 10 Dave Smits
![Page 54: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/54.jpg)
Your feedback is important!
Scan the QR Code and let us know via the TechDays App.
Laat ons weten wat u van de sessie vindt via de TechDays App!
Scan de QR Code.
Bent u al lid van de Microsoft Virtual Academy?! Op MVA kunt u altijd iets nieuws leren over de laatste technologie van Microsoft. Meld u vandaag aan op de MVA Stand. MVA biedt 7/24 gratis online training on-demand voor IT-Professionals en Ontwikkelaars.
![Page 55: Building adaptive Windows 10 XAML appsdownload.microsoft.com/download/C/5/7/C57FB17E-620C-46AD-BC3E … · Building adaptive Windows 10 XAML apps from Raspberry Pi to Surface Hub](https://reader031.vdocument.in/reader031/viewer/2022022519/5b150ca17f8b9a54488d92c7/html5/thumbnails/55.jpg)