Building apps on the Universal Windows Platform

XAML

Performance

Tools

App Model

.Net Native

1

2

3

4

5

XAML

<XAML />

Windows 10 XAML ‘free’

Common scenarios are handled by the platform“automagicaly”

Window gets resized, Pivot headers moveMouse and Keyboard capable automatically

<XAML />

Windows 10 XAML ‘free’

Common scenarios are handled by the platform“automagicaly”

Responsive layout with new ControlsRelative panel, Adaptive triggers,

<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>

<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>

<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>

<XAML />

Windows 10 XAML ‘free’

Common scenarios are handled by the platform“automagicaly”

Flexibility and power through extensibilityExtensible Triggers

Extensible Triggers Demo

Windows Insiders FTW!

http://github.com/dotMorten/WindowsStateTriggersMorten NielsenWindows Developer MVP (@dotMorten)

<XAML />

Windows 10 XAML ‘free’

Common scenarios are handled by the platform“automagicaly”

Highly-tailored

Custom View and Controls by scenario, Xaml Views

Other UI GoodiesChange Notification on Dependency properties target.RegisterPropertyChangedCallback(ContentControl.ContentProperty, ContentChanged);

PerspectiveTransform3D (Effects: 3D Rotations, Parallax)

Custom chrome, branding, sizing CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;

Drag and Drop <Grid AllowDrop="True" DragOver="Do_DragOver" Drop="Do_Drop" …>

<Grid> <Grid.Transform3D> <!– Parent Camera --> <PerspectiveTransform3D/> </Grid.Transform3D> ...</Grid>

XAML Performancein Windows 10

Validating XAML in Windows 10

TOUR

Universal Windows app Performance

Notable performance gains when moving to UWP

Hello World (M)

Dialer (M) Calc (PC)0

100

200

300

400

500

600

700

345

609663

277

510 511

8.1 10

Tim

e in

ms

Hello World (M)

Dialer (M) Calc (PC)0

2

4

6

8

10

12

14

16

18

20

7.5

12.6

18.4

4.2

7

12.5

8.1 10

Dynam

ic

in

MB

StartupMemory

CPU - 15% to 30% Working Set - 25% to 45%

TOUR

Notable New Performance FeaturesCompiled Bindings AKA {x:Bind}

Resolved at compile time and produce compiler errors.

<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>

TOUR

Notable New Performance FeaturesProgressive Rendering AKA {x:Phase}

Set render priority for elements

<DataTemplate x:DataType="model:FileItem">

<Grid Width="200" Height="80">

<TextBlock Text="{x:Bind DisplayName}" />

<TextBlock Text="{x:Bind prettyDate}"

x:Phase="1"/>

</Grid>

</DataTemplate>

TOUR

Notable New Performance FeaturesDeferred Loading AKA {x:Defer}

XAML construct to “delay instantiation” of this part of the tree

<StackPanel x:Name="AdditionalProductPage"

Visibility="Collapsed" …

x:DeferLoadStrategy="Lazy">

</StackPanel>

var deferredPanel =

FindName("AdditionalProductPage");

Profile your applicationProfile your application First step – see if there’s a problem within your code

Use Visual Studio 2015 to analyze and fix Timeline tool – where is my problem Profiler to spot slow code Memory usage Visual Diagnostics

XAML Improvements in Visual Studio

<Visual Studio/>

New XAML language service

Built on top of RoslynCompletely decoupled from the designerAdvanced code + XAML refactoring

Design Modes

Design surface for every device family

Visual Tree Inspector

Inspect and modify your XAML while it is running

Profiling tools

CPU, Memory, Timeline, Network and moreSupport for WPF and Universal Windows apps

Blend for Visual StudioBlend is a tool for creating great user experiences, with deep focus on best-in-class UI design capabilities.

Visual Studio is a tool for creating great apps, with focus on best-in-class code editing and debugging capabilities.

Blend is rebuilt from the ground up using VS technologies

Windows Device Family Extension SDKsUse device family specific APIs by adding references to Windows Device Family Extension SDKs

var api = "Windows.Devices.Gpio.GpioController";if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent(api)){

var gpio = GpioController.GetDefault();var pin = gpio.OpenPin(LED_PIN);pin.SetDriveMode(GpioPinDriveMode.Output);pin.Write(GpioPinValue.High);

}

App Model

The Windows App ModelDefines the app lifecycle

Unified across all Windows devices Works on IOTMobilePCXboxHololens

Cradle to Grave Install Runtime environment Resource Management Update Data Model Uninstall

Running your codeExisting apps will run on the platforms they were built for

Windows Windows Mobile

Universal Windows Apps

Classic Windows Apps

X

Windows Phone 7,8,8.1 apps

X

Existing Windows Store Apps (WinRT)

X

MultitaskingResource Management Scaling from low end phones to high end PCs

Extended Execution for foreground applications Ask for more time

The amount of time is based on what device you’re running on let me finish saving my file

Always keep my app running Tell the OS when you start that you intend to keep running Turn by turn navigation

Triggers

Unifying the navigation model

Evaluated Xbox, Windows, and Phone modelsBack will behave much like Back button in Phone today

Navigates back in the app, then back to previous app

Go back to where you came from

Building a Web of AppsAllow apps to integrate using the best of the web

URL based activation/communication

Foreground to Foreground Very similar to the web model Allows for custom scheme invocation skype:presidentobama New in 10 - the ability to return results, query for apps and enumerate apps

Foreground to Background Application services Enables you to “publish” a background task that can be called by other apps Social app integration with the People app is a key example of this

App 2 App Demo

Content adapts with the tileThe new adaptive tile template works similarly to universal app patterns by allowing your content to adapt depending on the devices screen density. As you design your tiles it is important to keep in mind how you want your content to adapt to the tiles size on screens of different densities.

<tile>

<visual>

<binding template="TileMedium">

<group>

<subgroup>

<text hint-style="subtitle">John Doe</text>

<text hint-style="subtle">Photos from our trip</text>

<text hint-style="subtle">Thought you might like to see all of</text>

</subgroup>

</group>

<group>

<subgroup>

<text hint-style="subtitle">Jane Doe</text>

<text hint-style="subtle">Questions about your blog</text>

<text hint-style="subtle">Have you ever considered writing a</text>

</subgroup>

</group>

</binding>

</visual>

</tile>

Min. Med Size Max Med. Size

Show more content?

XML SAMPLE 1

Adaptive Tile Template

Adaptive and Interactive Toast Template (Windows App)The adaptive toast template is our most flexible toast we’ve ever had. This template allows you to put the content you want on the toast, how you want it, and have it work across all of Windows phone, tablet, and PC devices. It allows you to add interactivity to quickly reply to a message, accept an invite, like something on a social network, or snooze an alarm.

Legacy TemplatesIf there is a template that already meets your needs perfectly, feel free to use the legacy template catalog. There are 8 different templates available for use and previously Windows only template features, like inline images, are now fully working on Windows Phone.

Toast Templates

Desktop

Mobile

.NET Native

.NET Native

Native code compilation for managed languages

Provides converged developer experience for .NET across devices

Uses lean runtime and VC++ optimizer for fast code execution and reduced memory usage

.NET Native

60%CPU savings from cold start

40%CPU savings from warm start

30%Smaller memory footprint

Compile with .NET Native Demo

SummaryWe are listening

XAML does the hard work for you and enables responsive design

Microsoft is using the same XAML controls and APIs as you

New Visual Studio features make it easy to create responsive and performant applications quickly

Unified app model across all Window 10 devices

Rich app to app communications

Native code compilation and performance for managed languages

© 2015 Microsoft Corporation. All rights reserved.