Microsoft Ignite 2015 4/16/2017 4:10 PM © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

What’s New in XAML UWP: How building apps with XAML just got easier BRK1306 What’s New in XAML UWP: How building apps with XAML just got easier Harini Kannan Program Manager, XAML Joe Stegman

4/16/2017 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> © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

UWP in Windows 10 Windows 10 Goal: Increase reach and opportunity Build 2015 4/16/2017 4:10 PM UWP in Windows 10 Windows 10 Goal: Increase reach and opportunity UWP Goal: Reduce developer cost to deliver on the increased opportunity © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Build 2015 4/16/2017 4:10 PM XAML in Windows 10: Beyond UW Apps New/enhanced controls, performance, much more… We are listening… © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4/16/2017 4:10 PM Demo (s) © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Build 2015 4/16/2017 4:10 PM © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Getting to Universal Windows Controls 4/16/2017 4:10 PM Getting to Universal Windows Controls © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

“Universal” Controls in 8.1 Some differences in look, feel and APIs Build 2015 4/16/2017 4:10 PM “Universal” Controls in 8.1 Some differences in look, feel and APIs Windows 8.1 Desktop Phone 8.1 (Blue) © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Upgrading to Windows 10 But, that also means some things had to change Build 2015 4/16/2017 4:10 PM Upgrading to Windows 10 But, that also means some things had to change IsPasswordRevealButtonEnabled in 8.1 (bool value) © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Newly Universal Controls 4/16/2017 4:10 PM Newly Universal Controls © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Build 2015 4/16/2017 4:10 PM Newly Universal Controls: Pivot Great for 1-handed on Mobile, Tabs on desktop © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Newly Universal Controls: ContentDialog App model, XAML child content Build 2015 4/16/2017 4:10 PM Newly Universal Controls: ContentDialog App model, XAML child content © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Newly Universal Controls: AutoSuggestBox And IME support, glyph Build 2015 4/16/2017 4:10 PM Newly Universal Controls: AutoSuggestBox And IME support, glyph © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Newly Universal Controls: Maps Plus Offline, 3D, Street Side Panoramas Build 2015 4/16/2017 4:10 PM Newly Universal Controls: Maps Plus Offline, 3D, Street Side Panoramas © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Using XAML to Build UW Apps It’s more than just universal controls 4/16/2017 4:10 PM Using XAML to Build UW Apps It’s more than just universal controls © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Build 2015 4/16/2017 4:10 PM Common Controls Common Branding, Behavior, Scaling, Support Diverse Inputs © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Controls Reusable Across Devices/Displays Views may be reusable (but likely to need tailoring)

Build 2015 4/16/2017 4:10 PM Tailoring App Experiences Typically via responsive pages or multiple views Windows 10 has new features to help with responsive designs © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

New XAML Features for Building Responsive UW Apps 4/16/2017 4:10 PM New XAML Features for Building Responsive UW Apps © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

SplitView Adaptive Navigation Pane 4/16/2017 4:10 PM <SplitView DisplayMode="Inline|Overlay|CompactInline|CompactOverlay"> <SplitView.Pane> <!-- Navigation Content Here --> </SplitView.Pane> <!-- Main Content Here --> </SplitView> © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

SplitView: DisplayMode Inline Overlay CompactInline Note: SplitView.IsPaneOpen="True"

Simplifying Responsive View Development Triggers and Setters (XAML equivalent of Media Queries) <VisualState.Setters> <Setter Target="splitView.DisplayMode" Value="Inline" /> </VisualState.Setters> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="720" /> </VisualState.StateTriggers> <Setter Target="splitView.DisplayMode" Value="Overlay" /> <AdaptiveTrigger MinWindowWidth= "0" /> If the Window width is >= 720 effective pixels, then show SplitView in Inline mode © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

RelativePanel Enables elements to layout relative to other elements 4/16/2017 4:10 PM <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 © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4/16/2017 4:10 PM 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> Note: RP above should be replaced with RelativePanel (shortened for readability) Use with Triggers and Setters for more advanced responsive designs © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4/16/2017 4:10 PM Demo © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

XAML Performance in Windows 10 4/16/2017 4:10 PM XAML Performance in Windows 10 © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Validating XAML in Windows 10 Build 2015 4/16/2017 4:10 PM Validating XAML in Windows 10 © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Notable New Performance Features Compiled Bindings AKA {x:Bind}: Like {Binding}, only they go to 11 4/16/2017 4:10 PM <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> <ListView> <ListView.ItemTemplate> <DataTemplate> <StackPanel> <SymbolIcon Symbol="{Binding Symbol}"/> <TextBlock Text="{Binding Name}"/> <Button Click="{Binding Click}"/> </StackPanel> </DataTemplate> </ListView.ItemTemplate> </ListView> Resolved at compile time and produce compiler errors. © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Other New UI Features 4/16/2017 4:10 PM © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

PerspectiveTransform3D Composable 3D Transforms (Effects: 3D Rotations, Parallax) 4/16/2017 4:10 PM <Grid> <Grid.Transform3D> <!– Parent Camera --> <PerspectiveTransform3D/> </Grid.Transform3D> <Border Background="#FF7F00"> <Border.Transform3D> <CompositeTransform3D RotationX="-90 " …/> </Border.Transform3D> </Border> <Border Background="#FF6700"> <CompositeTransform3D RotationY="-90" …/> </Grid> © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Windowing Custom chrome, branding, sizing 4/16/2017 4:10 PM <!-- XAML --> <StackPanel x:Name="customTitleBar" Height="32" …> <FontIcon …/> <TextBlock Text="Belize 2015" …/> </StackPanel> // 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); © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Ink Canvas Palm rejection, smoothing, high fidelity Build 2015 4/16/2017 4:10 PM Ink Canvas Palm rejection, smoothing, high fidelity <Grid> <!-- It’s this simple --> <InkCanvas/> </Grid> © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Drag and Drop Extended for “Windowed” Apps Build 2015 4/16/2017 4:10 PM Drag and Drop Extended for “Windowed” Apps <!-- XAML --> <Grid AllowDrop="True" DragOver=“Do_DragOver" Drop=“Do_Drop" …> … </Grid> File Explorer My App © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4/16/2017 4:10 PM Demo © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

XAML WebView Enhancements Build 2015 4/16/2017 4:10 PM XAML WebView Enhancements “Edge” in Windows 10 WinRT Access And More… © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

XAML Improvements in Visual Studio 4/16/2017 4:10 PM XAML Improvements in Visual Studio © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Build 2015 4/16/2017 4:10 PM Visual Studio New design modes, performance instrumentation timeline tool and more… © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Visual Studio Visual Tree Inspector Build 2015 4/16/2017 4:10 PM Visual Studio Visual Tree Inspector © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4/16/2017 4:10 PM Demo © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

And More… CommandBar Updates Vector Fonts Property Change Improvements Build 2015 4/16/2017 4:10 PM 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 © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Call to Action Try it out and provide feedback Windows Feedback -> Developer Platform -> UI Frameworks and Controls (XAML) http://wpdev.uservoice.com

Please evaluate this session 4/16/2017 4:10 PM Please evaluate this session Your feedback is important to us! Visit Myignite at http://myignite.microsoft.com or download and use the Ignite Mobile App with the QR code above. © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4/16/2017 4:10 PM © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.