2-679: From the Small Screen to the Big Screen: Building Universal Windows App Experiences with XAML

Windows runs on millions of devices around the world from Raspberry Pi to 10-foot console experiences in Xbox and everything in between. Let us show you how the Windows native UI platform enables you to write common code that spans these screens allowing you to deliver adaptive and tailored experiences for any Windows device.

1.0x

2-679: From the Small Screen to the Big Screen: Building Universal Windows App Experiences with XAML

Created 2 years ago

Duration 0:52:54
lesson view count 2550
Windows runs on millions of devices around the world from Raspberry Pi to 10-foot console experiences in Xbox and everything in between. Let us show you how the Windows native UI platform enables you to write common code that spans these screens allowing you to deliver adaptive and tailored experiences for any Windows device.
Select the file type you wish to download
Slide Content
  1. Harini Kannan / Tim Heuer

    Slide 1 - Harini Kannan / Tim Heuer

    • Program Managers, XAML
    • From the small screen to the big screen:Building Universal Windows Apps with XAML
    • 2-679
  2. Harini Kannan / Tim Heuer

    Slide 2 - Harini Kannan / Tim Heuer

    • Program Managers, XAML
    • From the small screen to the big screen:Building Universal Windows Apps with XAML
    • 2-679
  3. Slide 4

    • Mobile
    • Holographic
    • Surface Hub
    • Xbox
    • IoT
    • Desktop
  4. UWP becomes the one platform for developers.  Learn one set of core APIs for all devices.

    Slide 5 - UWP becomes the one platform for developers. Learn one set of core APIs for all devices.

  5. Yay, so what does that mean for my UI?

    Slide 6 - Yay, so what does that mean for my UI?

  6. From a UI standpoint, we believe a large majority of these decisions/challenges can be answered by pivoting on window size and, if necessary, capabilities.

    Slide 7 - From a UI standpoint, we believe a large majority of these decisions/challenges can be answered by pivoting on window size and, if necessary, capabilities.

  7. From a UI standpoint, we believe a large majority of these decisions/challenges can be answered by pivoting on window size and, if necessary, capabilities.

    Slide 8 - From a UI standpoint, we believe a large majority of these decisions/challenges can be answered by pivoting on window size and, if necessary, capabilities.

  8. Windows 10 XAML ‘free’

    Slide 9 - Windows 10 XAML ‘free’

    • Responsive layout with new APIs
    • Flexibility and power through extensibility
    • Highly-tailored
    • < XAML />
  9. What do I get for free?

    Slide 10 - What do I get for free?

  10. Slide 11

    • MenuFlyout mf = new MenuFlyout();
    • mf.ShowAt(sender, e.GetPosition(sender));
  11. Window gets resized, Pivot headers move

    Slide 12 - Window gets resized, Pivot headers move

    • Mouse and Keyboard capable automatically
  12. Single scale factor system for all apps

    Slide 13 - Single scale factor system for all apps

    • Guarantees consistent visual size of text and graphics (abstracts panel density and viewing distance for you)
    • 100%, 200% and 400% are the most important sizes to support in assets
    • Scale factors work well with 4-px grid
    • See session 2-63 Display Scaling: Why it matters for more details
    • Scaling happens automatically
    • Scale Factors
    • 100
    • 125
    • 150
    • 200
    • 250
    • 300
    • 400
  13. Respond to windows size changes using markkup

    Slide 14 - Respond to windows size changes using markkup

    • Position UI around intuitively
    • Enabling some small->big screen common scenarios
    • Easier Responsive UI
    • XAML in Windows 10 provides new building blocks for quicker development of basic responsive scenarios
  14. Slide 15

    • Glenn Versweyveld (@depechie)
    • Deani Hansen (@deanihansen)
    • http://bit.ly/1P2jvAp
  15. DEMO: Core responsive XAML building blocks

    Slide 16 - DEMO: Core responsive XAML building blocks

  16. DEMO: Core responsive XAML building blocks

    Slide 17 - DEMO: Core responsive XAML building blocks

  17. DEMO: Core responsive XAML building blocks

    Slide 18 - DEMO: Core responsive XAML building blocks

  18. Visual State Triggers (code snippet)

    Slide 19 - Visual State Triggers (code snippet)

    • <VisualStateGroup x:Name="WindowSizeStates">
    • <VisualState x:Name="WideState">
    • <VisualState.StateTriggers>
    • <AdaptiveTrigger MinWindowWidth="720" />
    • </VisualState.StateTriggers>
    • <VisualState.Setters>
    • <Setter Target="MySplitView.IsPaneOpen" Value="True" />
    • <Setter Target="MySplitView.DisplayMode" Value="Inline" />
    • </VisualState.Setters>
    • </VisualState>
    • </VisualStateGroup>
  19. “media queries” for XAML

    Slide 20 - “media queries” for XAML

    • Respond to a condition and goes to that state
    • Declarative way of doing what you can today
    • Built-in AdaptiveTrigger for window size
    • Setters enable more readable/direct value changing
    • VisualState Triggers
  20. Visual State Setters (code snippet)

    Slide 21 - Visual State Setters (code snippet)

    • <VisualState x:Name="Pressed">
    • <Storyboard>
    • <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
    • Storyboard.TargetProperty="Background">
    • <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
    • </ObjectAnimationUsingKeyFrames>
    • <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
    • Storyboard.TargetProperty="BorderBrush">
    • <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
    • </ObjectAnimationUsingKeyFrames>
    • <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
    • Storyboard.TargetProperty="Foreground">
    • <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
    • </ObjectAnimationUsingKeyFrames>
    • </Storyboard>
    • </VisualState>
    • <VisualState x:Name="Pressed">
    • <VisualState.Setters>
    • <Setter Target="RootGrid.Background" Value="{ThemeResource …}" />
    • <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource …}" />
    • <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource …}" />
    • </VisualState.Setters>
    • </VisualState>
  21. Constraint-based panel

    Slide 22 - Constraint-based panel

    • Allows developers to express spatial relationships
    • Huge enabler for responsive UI scenarios
    • Leverage’s x:Name’d elements for RelativeTo* positioning
    • RelativePanel
  22. RelativePanel (code snippet)

    Slide 23 - RelativePanel (code snippet)

    • <RelativePanel x:Name="panel" Margin="4.75" Height="190">
    • <Image x:Name="MapImage" controls:GoogleImageDependencyObject.GoogleImageUrl="{Binding Map}" Stretch="None“ RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignTopWithPanel="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
    • <Rectangle x:Name="topRect" Fill="White" Opacity="0.85" Height="30“ RelativePanel.AlignBottomWithPanel="True“ RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" HorizontalAlignment="Stretch"/>
    • <Rectangle x:Name="bottomRect" Fill="White" Opacity="0.85" Height="45“ RelativePanel.AlignTopWithPanel="True“ RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" HorizontalAlignment="Stretch"/>
    • <Image Source="{Binding TypeImageUrl}" Height="18" Margin="4.75“ RelativePanel.AlignBottomWithPanel="True“ RelativePanel.AlignLeftWithPanel="True"/>
    • <Image Source="ms-appx:///Assets/ThumbsUp.png" Height="18" Margin="4.75" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignHorizontalCenterWithPanel="True"/>
    • <Image Source="ms-appx:///Assets/appbar.trophy.png" Height="18" Margin="4.75" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignRightWithPanel="True"/>
    • <Ellipse x:Name="profilePic" Style="{StaticResource ProfileEllipse}" Margin="4.75“ RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignTopWithPanel="True">
    • </Ellipse>
    • <TextBlock x:Name="ActivityName" Text="{Binding Name}" TextTrimming="CharacterEllipsis" Foreground="{StaticResource KlivaMainBrush}" Margin="0,0,4.75,0" FontFamily="{StaticResource OpenSansFontSemibold}“ RelativePanel.AlignTopWithPanel="True" RelativePanel.RightOf="profilePic"/>
    • <TextBlock x:Name="ActivityMetaData" Text="{Binding Athlete.FullName}" RequestedTheme="Light" Margin="0,-2.375,4.75,0“ FontFamily="{StaticResource OpenSansFontLight}“ RelativePanel.RightOf="profilePic" RelativePanel.Below="ActivityName"/>
    • <TextBlock x:Name="ActivityDateTime" Text="{Binding StartDate, Converter={StaticResource RelativeTimeConverter}}" FontFamily="{StaticResource OpenSansFontSemibold}" Foreground="DarkGray" Margin="4.75,-2.375,4.75,0" />
    • </RelativePanel>
  23. Above

    Slide 24 - Above

    • Below
    • LeftOf
    • RightOf
    • Align*With
    • Top, Bottom, Left, Right, HorizontalCenter, VerticalCenter
    • RelativePanel Spatial Properties
  24. Building block for transient content

    Slide 25 - Building block for transient content

    • Can be used for navigational patterns
    • Helps with responsive UI scenarios for showing related UI in single views
    • No direct guidance built-in – use it if it makes sense
    • Overlay, Inline and Compact modes
    • SplitView Control
  25. SplitView

    Slide 26 - SplitView

    • Pane
    • Content
  26. USE BUILT-IN XAML FEATURES

    Slide 27 - USE BUILT-IN XAML FEATURES

    • ONE SIMPLY DOES NOT
  27. API type-based checking

    Slide 28 - API type-based checking

    • Allow you to determine capabilities without OS version check
    • Analogous to web development capability checking
    • Feature Detection using ApiInformation
  28. using Windows.Foundation.Metadata.ApiInformation;

    Slide 29 - using Windows.Foundation.Metadata.ApiInformation;

    • using Windows.Phone.Devices.Notifications;
    • // give haptic feedback for an error
    • if (IsTypePresent("Windows.Phone.Devices.Notifications.VibrationDevice"))
    • {
    • VibrationDevice.GetDefault().Vibrate(TimeSpan.FromMilliseconds(550));
    • }
    • Note: The string for the type is always single-dotted notation, even for C++
    • Haptic feedback example
  29. …when my ViewModel changes

    Slide 30 - …when my ViewModel changes

    • …based on the data type
    • …based on physical screen size
    • Ok then…
    • But I want to have a VSM Trigger…
  30. DEMO: Extending VisualState Triggers

    Slide 31 - DEMO: Extending VisualState Triggers

  31. DEMO: Extending VisualState Triggers

    Slide 32 - DEMO: Extending VisualState Triggers

  32. DEMO: Extending VisualState Triggers

    Slide 33 - DEMO: Extending VisualState Triggers

  33. public class InputTypeTrigger : StateTriggerBase

    Slide 34 - public class InputTypeTrigger : StateTriggerBase

    • {
    • private FrameworkElement _targetElement;
    • private PointerDeviceType _lastPointerType, _triggerPointerType;
    • public FrameworkElement TargetElement
    • {
    • get { return _targetElement; }
    • set
    • {
    • _targetElement = value;
    • _targetElement.AddHandler(FrameworkElement.PointerPressedEvent, new PointerEventHandler(_targetElement_PointerPressed), true);
    • }
    • }
    • public PointerDeviceType PointerType
    • {
    • get { return _triggerPointerType; }
    • set { _triggerPointerType = value; }
    • }
    • private void _targetElement_PointerPressed(object sender, PointerRoutedEventArgs e)
    • {
    • _lastPointerType = e.Pointer.PointerDeviceType;
    • SetActive(_triggerPointerType == _lastPointerType);
    • }
    • }
    • Custom Trigger Definition (code snippet)
  34. xmlns:triggers="using:StravaMobile.UAP.Triggers"

    Slide 35 - xmlns:triggers="using:StravaMobile.UAP.Triggers"

    • <VisualStateGroup x:Name="InputTypeStates">
    • <VisualState>
    • <VisualState.StateTriggers>
    • <triggers:InputTypeTrigger TargetElement="{x:Bind ActivityList}" PointerType="Touch" />
    • <triggers:InputTypeTrigger TargetElement="{x:Bind ActivityList}" PointerType="Pen" />
    • </VisualState.StateTriggers>
    • <VisualState.Setters>
    • <Setter Target="GoToTopButton.Visibility" Value="Visible" />
    • </VisualState.Setters>
    • </VisualState>
    • </VisualStateGroup>
    • Custom Trigger Usage (code snippet)
  35. Simple base class to let the framework know when to make active

    Slide 36 - Simple base class to let the framework know when to make active

    • You define the logic
    • Can combine Triggers
    • Leverage other features within your Trigger like x:Defer
    • https://github.com/Microsoft/Windows-universal-samples/tree/master/xaml_statetriggers
    • Extensible Triggers
  36. Slide 37

    • Windows Insiders FTW!
    • http://github.com/dotMorten/WindowsStateTriggers
    • Morten Nielsen
    • Windows Developer MVP (@dotMorten)
  37. From a UI standpoint, we believe a large majority of these decisions/challenges can be answered by pivoting on window size and, if necessary, capabilities.

    Slide 38 - From a UI standpoint, we believe a large majority of these decisions/challenges can be answered by pivoting on window size and, if necessary, capabilities.

  38. Custom control development

    Slide 39 - Custom control development

    • Providing specific interactions for Continuum
    • Where ApiInformation isn’t sufficient
    • Device families like Xbox
    • and Surface Hub
    • Tailoring Your Experiences
  39. Custom control development

    Slide 40 - Custom control development

    • Providing specific interactions for Continuum
    • Where ApiInformation isn’t sufficient
    • Device families like Xbox
    • and Surface Hub
    • Tailoring Your Experiences
  40. Custom control development

    Slide 41 - Custom control development

    • Providing specific interactions for Continuum
    • Where ApiInformation isn’t sufficient
    • Device families like Xbox
    • and Surface Hub
    • Tailoring Your Experiences
  41. Decide what scenario drives the need

    Slide 42 - Decide what scenario drives the need

    • Create unique views for those scenarios
    • Load appropriate view on startup based on scenario
    • Tailoring your view
    • //Get the diagonal size of the integrated display
    • var dsc = new DisplaySizeHelper.DisplaySizeClass();
    • double _actualSizeInInches = dsc.GetDisplaySizeInInches();
    • //Guidance: If the diagonal size is <= 7" use the OneHanded optimized view
    • if ( _actualSizeInInches >0 && _actualSizeInInches <= ONEHANDEDSIZE)
    • {
    • rootFrame.Navigate(typeof(MainPage_OneHanded), e.Arguments);
    • }
    • else
    • {
    • rootFrame.Navigate(typeof(MainPage), e.Arguments);
    • }
  42. Slide 43

    • SplitView vs. Pivot
    • Commands at the top vs. bottom
  43. Create/migrate your app to UWP

    Slide 44 - Create/migrate your app to UWP

    • Leverage Visual Studio preview tools for UI previews
    • Think first about window size, use Triggers, RelativePanel to help adapt
    • Give us feedback using Windows Feedback tool and Developer forums
    • http://dev.windows.com
    • Call to action
  44. Related Sessions

    Slide 45 - Related Sessions

    • Session Title
    • Speakers
    • Session Code
    • What's New in XAML for Universal Windows Apps
    • Joe Stegman
    • 629
    • XAML Performance: Techniques for Maximizing Universal Windows App Experiences Built with XAML
    • Mark Alcazar
    • Kiran Kumar
    • 689
    • API Contracts (or How I Learned to Stop Checking OS Versions and Love Feature Detection)
    • Brent Rector
    • 733
    • Optimizing Windows Apps for Continuum
    • Liz Threlkeld
    • 703
    • Navigation and Windowing in Windows Apps
    • Roberth Karman
    • 779
    • Display Scaling: What it is and why it matters to you
    • Steve Wright
    • 263
    • New XAML Tools in Visual Studio 2015
    • Unni Ravindranathan
    • 697
    • Developing Universal Windows Apps in Visual Studio 2015
    • Navit Saxena
    • 650