Getting StartedDeveloping Universal Windows Platform (UWP) Apps

Jaliya UdagedaraMVP (.NET)

Introduction

Extension SDKs

New XAML Controls

Agenda

Current Day TechnologiesWindows 8.1 UpdateWindows Phone 8.1 Update 2

Windows 10 Insider PreviewFast Ring 10122Slow Ring 10074

Visual Studio 2013 Update 5 RCVisual Studio 2015 RC

.NET 4.5.2 / C# 5

.NET 4.6 RC / C# 6 Preview

As of 30th May 2015

IntroductionUniversal Windows Platform (UWP)

One Windows PlatformWindows 8.1 and Windows Phone 8.1 apps target an operating systemWith Windows 10 apps targets one or more device familiesThe set of APIs in the universal device family is inherited by child device families.

Easy for users to get & stay

current

Unified core and app platform

The Convergence Journey

Windows Phone 7.5

Windows Phone 8Windows Phone 8.1

Windows 8

Xbox One

Windows on Devices

Xbox 360

Windows 8.1

Windows 10

ConvergedOS kernel

Convergedapp model

Windows 10 Editions AnnouncedWindows 10 Home

Windows 10 Mobile

Windows 10 Pro

Windows 10 Enterprise

Windows 10 Education

Windows 10 Mobile Enterprise

Visual Studio 2015 Product EditionsEnterprise

Professional

Community

*Blend for Microsoft Visual Studio

Developer ChecklistInstallationWindows 10 Insider Preview• http://insider.windows.com/

Visual Studio 2015 RC• http://www.visualstudio.com

The Visual Studio installer includes the Windows 10 SDK

ExtrasMicrosoft Account• Windows Developer License

Hyper-V (hardware dependent)• Phone emulator

Supported Programming LanguagesVisual C# and XAML

Visual Basic and XAML

Visual C++ and DirectX, DirectX/XAML

JavaScript and HTML5

Windows 10operating system

Bridging technologies

Win32

desktop

Webhosted

JavaAndroid

Obj.CiOS

Universal Windows Platform

JSC++& CX

.Netlanguages

HTMLDirectX

XAML

C++

.Netlanguages

MFCWFWPF

.Netruntime

Device FamiliesWith Windows 10 apps targets one or more device families not the Operating System

Solution LayoutIs there a Appx Manifest?

Is there a Head project?

Is there a Shared project?

Are there #IF directives?

DemoUWP Apps

Extension SDKs

Shared Projects

WindowsBinaryPhoneBinary

Not all APIs were available everywhere

Compilation DirectivesC# Syntax

#if WINDOWS_PHONE_APP Windows.Phone.UI.Input.HardwareButtons

.BackPressed += this.HardwareButtons_BackPressed;#endif

C++ Syntax

#if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP_backPressedEventToken = HardwareButtons::BackPressed += ref new EventHandler

<BackPressedEventArgs^> (this, &NavigationHelper::HardwareButton_BackPressed);

#endif

Introducing Platform Extension SDKs• Extends the UWP

• Targets specific platforms

• Updates at a separate cadence

• Enabled on every device

Adding Extensions

Testing for capabilities

IsApiContractPresentIsEnumNamedValuePresentIsEventPresentIsMethodPresentIsPropertyPresentIsReadOnlyPropertyPresentIsTypePresentIsWriteablePropertyPresent

Windows.Foundation.Metadata.ApiInformation

Test capabilities at runtime

var ns = "Windows.Phone.UI.Input.HardwareButtons";if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent(ns)){

Windows.Phone.UI.Input.HardwareButtons.BackPressed += Back_BackPressed;

} 

What about shared projects?Still completely supportedCompilation directives are supported, too

1. WINDOWS_APP2. WINDOWS_PHONE_APP3. WINDOWS_UAP (new)

You still need to test for API support

New XAML ControlsSplitView, RelativePanel,MonthCalendar

Navigation FrameworkThe Frame• Frame.Back/FrontStack• CanGoBack()• GoBack()• CanGoForward()• GoForward()

• Frame.Navigate(Type, Parameter)• Navigating event• Navigated event

• Frame.Get/SetNavigationState()

Frame

PageBackStack

FrontStack

The Page• Key overrides• OnNavigatedTo(parameter)• OnNavigatedFrom()

• Page.NavigationCacheMode• Enabled (based on Frame’s CacheSize limit)• Required (always, no limit)• Disabled (never)

Navigation Framework

SplitView

Common behaviour, custom design

Your Windows App

SplitView.Pane <SplitView>

<SplitView.Pane>

<StackPanel>

<RadioButton />

<RadioButton />

</StackPanel>

</SplitView.Pane>

</SplitView>

SplitView.ContentSplitview.Content is intended to be the Frame

<SplitView>

<SplitView.Pane />

<SplitView.Content>

<Frame/>

</SplitView.Content>

</SplitView>

SplitView Properties<SplitView

IsPaneOpen="False"

CompactPaneLength="150"

OpenPaneLength="50"

Placement="Right|Left"

PaneDisplayMode="CompactInline">

<SplitView.Pane />

<SplitView.Content />

</SplitView>

RelativePanel

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>

Panel position options

<Rectangle Height="100" Width="100" Fill="Red"

RelativePanel.AlignLeftWithPanel="True" (default)

RelativePanel.AlignRightWithPanel="True"

RelativePanel.AlignTopWithPanel="True" (default)

RelativePanel.AlignBottomWithPanel="True"

RelativePanel.CenterInPanelHorizontally="True"

RelativePanel.CenterInPanelVertically="True" />

Align with sibling (right)

<RelativePanel>

<Rectangle x:Name="BlueRect" Height="100" Width="100" Fill="Blue" />

<Rectangle x:Name="RedRect" Height="100" Width="100" Fill="Red"

RelativePanel.RightOf="BlueRect"RelativePanel.AlignVerticalCenterWith="BlueRect" />

</RelativePanel>

Align with sibling (below, right)

<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.AlignRightWith="BlueRect" />

</RelativePanel>

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>

Align with sibling (below, left)

<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.AlignLeftWith="BlueRect" />

</RelativePanel>

Sibling position options

<Rectangle Height="100" Width="100" Fill="Red"

RelativePanel.Above="BlueRect"

RelativePanel.RightOf="BlueRect"

RelativePanel.Below="BlueRect"

RelativePanel.RightOf="BlueRect" />

Sibling alignment options

<Rectangle Height="100" Width="100" Fill="Red"

RelativePanel.AlignTopWith="BlueRect"

RelativePanel.AlignRightWith="BlueRect"

RelativePanel.AlignBottomWith="BlueRect"

RelativePanel.AlignLeftWith="BlueRect"

RelativePanel.AlignHorizontalCenterWith="BlueRect"

RelativePanel.AlignVerticalCenterWith="BlueRect" />

DemoSplitView and RelativePanel

More…“A Developer's Guide to Windows 10 Preview” on Microsoft Virtual Academy• Instructors • Jerry Nixon - Microsoft Developer Evangelist• Andy Wigley - Microsoft Developer Evangelist

“A Developer's Guide to Windows 10” on Microsoft Virtual Academy• Instructors • Jerry Nixon - Microsoft Developer Evangelist• Andy Wigley - Microsoft Developer Evangelist