2-629: What's New in XAML for Universal Windows Apps

The Universal Windows Platform provides developers with a real opportunity to create meaningful, familiar, and tailored apps that run across a wide set of device families. To help with that, XAML UI took a big step forward in Windows 10 with new controls and new features to simplify tailoring app experiences across devices. In addition, performance is improved with features that include new and improved diagnostics tools, better web content hosting, a new perspective 3D API, plus a few other goodies. This session will take a lap around these features.

1.0x

2-629: What's New in XAML for Universal Windows Apps

Created 2 years ago

Duration 0:55:17
lesson view count 2816
The Universal Windows Platform provides developers with a real opportunity to create meaningful, familiar, and tailored apps that run across a wide set of device families. To help with that, XAML UI took a big step forward in Windows 10 with new controls and new features to simplify tailoring app experiences across devices. In addition, performance is improved with features that include new and improved diagnostics tools, better web content hosting, a new perspective 3D API, plus a few other goodies. This session will take a lap around these features.
Select the file type you wish to download
Slide Content
  1. 2-629

    Slide 1 - 2-629

    • What's New in XAML for Universal Windows Apps
    • Joe Stegman
    • Group Program Manager
  2. 2-629

    Slide 2 - 2-629

    • What's New in XAML for Universal Windows Apps
    • Joe Stegman
    • Group Program Manager
  3. This Session: XAML UI

    Slide 3 - This Session: XAML UI

    • The “Native” UI Framework for Windows 10 Apps and Experiences
    • Supports C++ or C#/VB
    • <!-- XAML Outline -->
    • <Page>
    • <StackPanel Orientation="Horizontal">
    • <AppBarButton/>
    • <AutoSuggestBox/>
    • </StackPanel>
    • <Grid>
    • <ListView/>
    • <TextBlock Text="Spoken Language"/>
    • <ComboBox/>
    • <CheckBox/>
    • <Slider/>
    • <Button/>
    • </Grid>
    • </Page>
  4. Windows 10 Goal: Increase reach and opportunity

    Slide 4 - Windows 10 Goal: Increase reach and opportunity

    • UWP Goal: Reduce developer cost to deliver on the increased opportunity
    • UWP in Windows 10
  5. XAML in Windows 10: Beyond UW AppsNew/enhanced controls, performance, much more…

    Slide 5 - XAML in Windows 10: Beyond UW AppsNew/enhanced controls, performance, much more…

    • We are listening…
  6. Demo (s)

    Slide 6 - Demo (s)

  7. Getting to Universal Windows Controls

    Slide 7 - Getting to Universal Windows Controls

  8. “Universal” Controls in 8.1Some differences in look, feel and APIs

    Slide 8 - “Universal” Controls in 8.1Some differences in look, feel and APIs

    • Phone 8.1 (Blue)
    • Windows 8.1 Desktop
  9. Upgrading to Windows 10But, that also means some things had to change

    Slide 9 - Upgrading to Windows 10But, that also means some things had to change

    • IsPasswordRevealButtonEnabled in 8.1 (bool value)
  10. Newly Universal Controls

    Slide 10 - Newly Universal Controls

  11. Newly Universal Controls: PivotGreat for 1-handed on Mobile, Tabs on desktop

    Slide 11 - Newly Universal Controls: PivotGreat for 1-handed on Mobile, Tabs on desktop

  12. Newly Universal Controls: ContentDialogApp model, XAML child content

    Slide 12 - Newly Universal Controls: ContentDialogApp model, XAML child content

  13. Newly Universal Controls: AutoSuggestBoxAnd IME support, glyph

    Slide 13 - Newly Universal Controls: AutoSuggestBoxAnd IME support, glyph

  14. Newly Universal Controls: MapsPlus Offline, 3D, Street Side Panoramas

    Slide 14 - Newly Universal Controls: MapsPlus Offline, 3D, Street Side Panoramas

  15. Using XAML to Build UW AppsIt’s more than just universal controls

    Slide 15 - Using XAML to Build UW AppsIt’s more than just universal controls

  16. Common ControlsCommon Branding, Behavior, Scaling, Support Diverse Inputs

    Slide 16 - Common ControlsCommon Branding, Behavior, Scaling, Support Diverse Inputs

  17. Controls Reusable Across Devices/DisplaysViews may be reusable (but likely to need tailoring)

    Slide 17 - Controls Reusable Across Devices/DisplaysViews may be reusable (but likely to need tailoring)

  18. Tailoring App ExperiencesTypically via responsive pages or multiple views

    Slide 18 - Tailoring App ExperiencesTypically via responsive pages or multiple views

    • Windows 10 has new features to help with responsive designs
  19. Responsive/Adaptive Apps[Photos and SplitView]

    Slide 19 - Responsive/Adaptive Apps[Photos and SplitView]

  20. New XAML Features for Building Responsive UW Apps

    Slide 20 - New XAML Features for Building Responsive UW Apps

  21. <SplitView DisplayMode="Inline|Overlay|CompactInline|CompactOverlay">

    Slide 21 - <SplitView DisplayMode="Inline|Overlay|CompactInline|CompactOverlay">

    • <SplitView.Pane>
    • <!-- Navigation Content Here -->
    • </SplitView.Pane>
    • <!-- Main Content Here -->
    • </SplitView>
    • SplitViewAdaptive navigation pane
  22.   <VisualState.Setters>

    Slide 22 - <VisualState.Setters>

    • <Setter Target="splitView.DisplayMode" Value="Inline" />
    • </VisualState.Setters>
    • <VisualState.StateTriggers>
    • <AdaptiveTrigger MinWindowWidth="720" />
    • </VisualState.StateTriggers>
    • <VisualState.Setters>
    • <Setter Target="splitView.DisplayMode" Value="Overlay" />
    • </VisualState.Setters>
    • <VisualState.StateTriggers>
    • <AdaptiveTrigger MinWindowWidth= "0" />
    • </VisualState.StateTriggers>
    • Simplifying Responsive View DevelopmentTriggers and Setters (XAML equivalent of Media Queries)
    • If the Window width is >= 720 effective pixels, then show SplitView in Inline mode
  23. Responsive/Adaptive Apps[Settings]

    Slide 23 - Responsive/Adaptive Apps[Settings]

  24. RelativePanelEnables elements to layout relative to other elements

    Slide 24 - RelativePanelEnables elements to layout relative to other elements

    • <Grid>
    • <Grid.ColumnDefinitions>
    • <ColumnDefinition Width="Auto"/>
    • <ColumnDefinition Width="*"/>
    • </Grid.ColumnDefinitions>
    • <Image x:Name="img" …/>
    • <StackPanel Grid.Column="1" …>
    • <TextBlock x:Name="title" …/>
    • <TextBlock x:Name="authors" …/>
    • <TextBlock x:Name="summary" …/>
    • <Button Content="Download" …/>
    • </StackPanel>
    • </Grid>
    • “Traditional” nested panel layout can be challenging for more complex layouts
  25. RelativePanel

    Slide 25 - RelativePanel

    • <RelativePanel>
    • <Image x:Name="img" …/>
    • <TextBlock x:Name="title" RelativePanel.RightOf="img" RP.AlignTopWith="img" …/>
    • <TextBlock x:Name="authors" RP.RightOf="img" RP.Below="title" …/>
    • <TextBlock x:Name="summary" RP.RightOf="img" RP.Below="authors" …/>
    • <Button Content="Download" RP.RightOf="img" RP.AlignBottomWithPanel="True" …/>
    • </RelativePanel>
    • Use with Triggers and Setters for more advanced responsive designs
    • Note: RP above should be replaced with RelativePanel (shortened for readability)
  26. Demo

    Slide 26 - Demo

  27. XAML Performance in Windows 10

    Slide 27 - XAML Performance in Windows 10

  28. Validating XAML in Windows 10

    Slide 28 - Validating XAML in Windows 10

  29. <ListView>

    Slide 29 - <ListView>

    • <ListView.ItemTemplate>
    • <DataTemplate>
    • <StackPanel>
    • <SymbolIcon Symbol="{Binding Symbol}"/>
    • <TextBlock Text="{Binding Name}"/>
    • <Button Click="Button_ClickHandler"/>
    • </StackPanel>
    • </DataTemplate>
    • </ListView.ItemTemplate>
    • </ListView>
    • <ListView>
    • <ListView.ItemTemplate>
    • <DataTemplate x:DataType="local:FreeBookCategory">
    • <StackPanel>
    • <SymbolIcon Symbol="{x:Bind Symbol}"/>
    • <TextBlock Text="{x:Bind Name}"/>
    • <Button Click="{x:Bind Click}"/>
    • </StackPanel>
    • </DataTemplate>
    • </ListView.ItemTemplate>
    • </ListView>
    • Notable New Performance FeaturesCompiled Bindings AKA {x:Bind}: Like {Binding}, only they go to 11
    • Resolved at compile time and produce compiler errors.
  30. Other New UI Features

    Slide 30 - Other New UI Features

  31. Change Notification on all Control PropertiesTechnically, just the ones that are DependencyProperties

    Slide 31 - Change Notification on all Control PropertiesTechnically, just the ones that are DependencyProperties

    • <!-- Get notifications when Button Content property changes -->
    • <Button x:Name="target" Content="{x:Bind Name}"/>
    • // Register for changes on “target.Current” property
    • target.RegisterPropertyChangedCallback(ContentControl.ContentProperty, ContentChanged);
    • // Handler
    • void ContentChanged(DependencyObject sender, DependencyProperty prop)
    • {
    • // Content Changed
    • Object content = (sender.GetValue(prop));
    • }
  32. PerspectiveTransform3DComposable 3D Transforms (Effects: 3D Rotations, Parallax)

    Slide 32 - PerspectiveTransform3DComposable 3D Transforms (Effects: 3D Rotations, Parallax)

    • <Grid>
    • <Grid.Transform3D>
    • <!– Parent Camera -->
    • <PerspectiveTransform3D/>
    • </Grid.Transform3D>
    • <Border Background="#FF7F00">
    • <Border.Transform3D>
    • <CompositeTransform3D RotationX="-90 " …/>
    • </Border.Transform3D>
    • </Border>
    • <Border Background="#FF6700">
    • <Border.Transform3D>
    • <CompositeTransform3D RotationY="-90" …/>
    • </Border.Transform3D>
    • </Border>
    • </Grid>
  33. WindowingCustom chrome, branding, sizing

    Slide 33 - WindowingCustom chrome, branding, sizing

    • // Remove Standard Title Bar
    • CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
    • // Indicate Custom App UI to use as the TitleBar (for move, resize)
    • Window.Current.SetTitleBar(customTitleBar);
    • <!-- XAML -->
    • <StackPanel x:Name="customTitleBar" Height="32" …>
    • <FontIcon …/>
    • <TextBlock Text="Belize 2015" …/>
    • </StackPanel>
  34. Ink CanvasPalm rejection, smoothing, high fidelity

    Slide 34 - Ink CanvasPalm rejection, smoothing, high fidelity

    • <Grid>
    • <!-- It’s this simple -->
    • <InkCanvas/>
    • </Grid>
  35. Drag and DropExtended for “Windowed” Apps

    Slide 35 - Drag and DropExtended for “Windowed” Apps

    • <!-- XAML -->
    • <Grid AllowDrop="True" DragOver="Do_DragOver" Drop="Do_Drop" …>
    • </Grid>
    • My App
    • File Explorer
  36. Demo

    Slide 36 - Demo

  37. Spartan “Edge” in Windows 10

    Slide 37 - Spartan “Edge” in Windows 10

    • WinRT Access
    • And More…
    • See “Hosted Web” Apps session for details
    • XAML WebView Enhancements
  38. XAML Improvements in Visual Studio

    Slide 38 - XAML Improvements in Visual Studio

  39. Visual StudioNew design modes, performance instrumentation timeline tool and more…

    Slide 39 - Visual StudioNew design modes, performance instrumentation timeline tool and more…

  40. Visual StudioVisual Tree Inspector

    Slide 40 - Visual StudioVisual Tree Inspector

  41. Demo

    Slide 41 - Demo

  42. And More…

    Slide 42 - And More…

    • CommandBar Updates
    • Vector Fonts
    • Property Change Improvements
    • New Content Presenter APIs
    • IME Composition Events
    • Directional Navigation
    • ListView Enhancements
    • Framework Element Loading Event
    • Improved Animation Experiences
    • Improved XAML/DX Interopability
    • Software Bitmap Source
    • Silverlight memory improvements
    • Printing APIs on Mobile
    • Improved BiDi handling
    • Improved ScrollViewer APIs
    • Casting in media elements
  43. Try it out and provide feedback

    Slide 43 - Try it out and provide feedback

    • Windows Feedback -> Developer Platform -> UI Frameworks and Controls (XAML)
    • http://wpdev.uservoice.com
    • Most Closely Related Sessions
    • Wednesday 3:30-4:30 PM: Data Binding: Boost Your App’s Performance…
    • Wednesday 5:00-6:00 PM: Windows User Experience: Models, Patterns…
    • Thursday 2:00-3:00 PM: From the Small Screen to the Big Screen…
    • Thursday 5:00-6:00 PM: XAML Performance: Techniques for Maximizing…
    • Friday 10:30-11:30 AM: Moving to the Universal Windows Platform…
    • Call to Action
  44. Evaluate this session

    Slide 44 - Evaluate this session

    • Your feedback is valuable!