Sam Jarawan – samjar@microsoft.com - PowerPoint Presentation

Slide1
Slide2

Sam Jarawan – samjar@microsoft.comPrincipal Program Manager – XAML UI Framework

Moving to Universal Windows Platform: Porting an App from Windows 8.1 XAML or Windows Phone Silverlight to Windows 10

3-741Slide3

Sam Jarawan – samjar@microsoft.comPrincipal Program Manager – XAML UI Framework

Moving to Universal Windows Platform: Porting an App from Windows 8.1 XAML or Windows Phone Silverlight to Windows 10

Session 741Slide4

Why move to Universal Windows Platform (UWP)?

Develop a Porting StrategyPorting demoUpgrade breaking changesSilverlight apps

Agenda slideSlide5

1,000,000,000 DEVICES!!!

New features (Inking, Cortana, AllJoyn, …)Innovation will happen here first

Performance Improvements

XBF

v2, Startup

perf

(Defer

), Text Performance, …

Single code base

Why

move your

apps to

UWP?Slide6

Windows Store 8 XAML appsWindows Phone 8 XAML apps

Universal Windows 8 apps (dual head)Windows Phone Silverlight 8.x appsPorting from…Slide7

Upgrading a XAML appSlide8

No

upgrade script in current toolsIn the past we performed inline upgradesDo you need to support old

versions?

Is it easier

to add

UWP project

to existing

solutions?

We want to

get feedback on the best way to upgrade your apps

Create a new UWP project in same solution

Copy code to new project

Add References if applicable

Modify Manifest file (add capabilities, BG Tasks,…)Build -> Fix -> Build -> repeat…

General Porting ProcessSlide9

Coming up with a Porting StrategySlide10

Use a single UWP to target all Windows 10 devices

Use adaptive code for device family specific APIsUse adaptive/responsive/tailored UI for different screen sizesOptionally use shared projects/PCLs to share between UWP and Windows 8 apps

Porting from a Single Windows/Phone ProjectSlide11

These are dual “head” solutions (Windows 8.1 and Windows Phone 8.1) with a shared project

Upgrading a Windows 8 Universal Solution Slide12

Use a single UWP to target all devices

Create separate UWPs targeting device families (Desktop/Mobile/Xbox/IoT/…)

Example

Single UWP App to target Mobile and Single UWP to target all others

Example Manifest entry

<

Dependencies

>

<

TargetDeviceFamily

Name

="

Windows.Mobile

"

MinVersion

="

10.0.1.0

"

MaxVersionTested

="

10.0.1.0

" />

Upgrading OptionsSlide13

Single shared project for Windows 8.1, Windows Phone 8.1 and 10.0 UWP Apps

One shared project for Windows 8.1/Windows Phone 8.1 Apps and another for 10.0 UWP AppsOne Shared for Windows Phone 8.1 and 10.0 mobile, another for Windows 8.1 and 10.0 UWP Apps.

…

Code Sharing OptionsSlide14

Add a single UWP ProjectMerge all code into single solution, create single adaptable views

Self contained not leveraging shared codeStrategy Option 1Slide15

Create separate UWPs targeting device families

One for MobileOne for all others Self contained leveraging own set of shared codeStrategy Option 2Slide16

Add a new UWP “Head”Shares same code as 8.1 projects

Use #if’s for API differences in shared code if neededStrategy Option 3Slide17

Add multiple new UWP “Heads”

One for MobileOne for all othersShares same code as 8.1 projectsUse #if’s for API differences in shared code if needed

Strategy Option 4Slide18

Build BreaksAPIs moved between

UWP and extension SDKs (ex: camera button)Deprecated APIs (ex: no charms bar for 10.0

UWP apps)

Runtime breaks

Missing XAML resource styles

Phone* resources gone (ex:

PhoneAccentBrush

)

See Dev Center for Design Guidelines and type ramp (link at end)

User Experience Breaks

Upgrade breaking changes to

Controls

Design Refresh

ex: GridView now flows vertically instead of

horizontal

Areas to address while portingSlide19

DemoMigrating a real Windows 8.1 app to UWP (Option 3)

(goal: get your code up and running)Slide20

XAMLManifest

Scale factorsOther upgrade breaking changes to considerSlide21

XAMLSlide22

Default theme changes

Light on Desktop (but dark in 8.1)Set RequestedTheme=“Dark” if you want old behaviorAppBar and

CommandBar

IsSticky

=true makes it not light dismissible

SearchBox

is not converged

use

AutoSuggestBox

Date/

TimePicker

Converged - visual changes (8.1 phone goes to selection page)

Pivot control is

converged

XAML Upgrade

B

reaking ChangesSlide23

GridView/

ListViewGridView – new vertical flow instead of horizontalNew visuals for selection modelDeprecated swipe gestureSemanticZoom

Zoom out by tapping a group header, pinch zoom can be re-enabled

Mobile – no longer zooms out to entire screen, constrained by bounds of control

ContentDialog

More flexible than

MessageDialog

Some missing

‘

UnConverged

’

Styles

Some Phone* & Phone Control styles that didn’t end up in converged controls

XAML Upgrade

B

reaking ChangesSlide24

Manifest DifferencesSlide25

8.1

<Package

xmlns

="http://schemas.microsoft.com/

appx

/2010/manifest"

xmlns:

m2

="http://schemas.microsoft.com/

appx

/2013/manifest

"

>

<Identity Name="78ec24f6-149a-47aa-b5a2-f854ab7119f5"

Publisher

="CN=

samjar

"

Version="1.0.0.0"

/>

<

Properties>

<

DisplayName

>My Awesome App</

DisplayName

>

<

PublisherDisplayName

>

samjar

</

PublisherDisplayName

>

<Logo>Assets\StoreLogo.png</Logo>

</Properties

>

<

Resources>

  <Resource Language="

en

-us"/>

 < Resource 

m2

:Scale="180"/>

 < Resource 

m2

:DXFeatureLevel="dx11"/>

</Resources>

…

Namespace Changes

10.0

<Package 

xmlns

="http://schemas.microsoft.com/

appx

/manifest/foundation/windows10"

xmlns:

uap

="http://schemas.microsoft.com/

appx

/manifest/

uap

/windows10

"

>

<

Identity Name

="a6db432c-3f41-4475-ae4f-0e3168636cd2"

Publisher="CN=

samjar

"

Version

="1.0.0.0" />

<

Properties>

<

DisplayName

>My Amazing App</

DisplayName

>

<

PublisherDisplayName

>

samjar

</

PublisherDisplayName

>

<Logo>Assets\StoreLogo.png</Logo>

</Properties

>

<

Resources>

<Resource Language="

en

-us"/>

<Resource

uap

:Scale

="180"/>

<Resource

uap

:DXFeatureLevel

="dx11"/>

</

Resources

>

…Slide26

Example

<Capabilities

>

<

uap:Capability

Name="

documentsLibrary

"/>

<

uap:Capability

Name="

removableStorage

"/>

</

Capabilities

>

Capabilities that need “

uap

:” Prefixes

documentsLibrary

picturesLibrary

videosLibrary

musicLibrary

enterpriseAuthentication

sharedUserCertificates

removableStorage

Appointments

ContactsSlide27

8.1

<Prerequisites>

<

OSMinVersion

>6.3.0</

OSMinVersion

>

<

OSMaxVersionTested

>6.3.0</

OSMaxVersionTested

>

</

Prerequisites

>

Targeting

10.0

<Dependencies>

<

TargetDeviceFamily

Name

="

Windows.Universal

"

MinVersion

="10.0.10053.0"

MaxVersionTested

="10.0.10053.0" />

</Dependencies

>Slide28

8.1

<m2:VisualElements

DisplayName

="My Awesome App"

Square150x150Logo

="Assets\Logo.png"

Square30x30Logo

="Assets\SmallLogo.png"

Description

="My Awesome

App“

BackgroundColor

="#464646"

ForegroundText

="

light“

ToastCapable

=“True”>

<m2:SplashScreen Image

="Assets\SplashScreen.png"

/>

<m2:DefaultTile

ShortName

=“

MyApp

”

Wide310x150Logo=“310x150.png”

Square310x310Logo=“310x310.png”

Square70x70Logo=“70x70.png”

DefaultSize

=“square150x150Logo”/>

<

m2:ApplicationView

MinWidth

=“width320”/>

</

m2:VisualElements

>

* Deprecated

VisualElement

Differences

10.0

<

uap:VisualElements

DisplayName

="My Amazing App"

Square150x150Logo

="Assets\Logo.png"

Square44x44Logo

="Assets\SmallLogo.png"

Description

="My Amazing App"

BackgroundColor

="#464646">

<

uap:SplashScreen

Image

="Assets\SplashScreen.png"

/>

<

uap:DefaultTile

ShortName

=“

MyApp

”

Wide310x150Logo=“310x150.png”

Square310x310Logo=“310x310.png”

Square71x71Logo

=“

71x71.png”/>

</

uap:VisualElements

>Slide29

8.1

<m2

:VisualElements

DisplayName

="My Awesome App"

Square150x150Logo

="Assets\Logo.png"

Square30x30Logo

="Assets\SmallLogo.png"

Description

="My Awesome

App“

BackgroundColor

="#464646"

ForegroundText

="

light“

ToastCapable

=“True”>

<

m2

:SplashScreen Image

="Assets\SplashScreen.png"

/>

<

m2

:DefaultTile

ShortName

=“

MyApp

”

Wide310x150Logo=“310x150.png”

Square310x310Logo=“310x310.png”

Square70x70Logo=“70x70.png”

DefaultSize

=“square150x150Logo”/>

<

m2

:ApplicationView

MinWidth

=“width320”/>

</

m2

:VisualElements>

* Deprecated

Namespace changes

10.0

<

uap

:VisualElements

DisplayName

="My Amazing App"

Square150x150Logo

="Assets\Logo.png"

Square44x44Logo

="Assets\SmallLogo.png"

Description

="My Amazing App"

BackgroundColor

="#464646">

<

uap

:SplashScreen

Image

="Assets\SplashScreen.png"

/>

<

uap

:DefaultTile

ShortName

=“

MyApp

”

Wide310x150Logo

=“310x150.png”

Square310x310Logo

=“310x310.png”

Square71x71Logo

=“

71x71.png”/>

</

uap

:VisualElements

>Slide30

8.1

<m2:VisualElements

DisplayName

="My Awesome App"

Square150x150Logo

="Assets\Logo.png"

Square30x30Logo

="Assets\SmallLogo.png"

Description

="My Awesome

App“

BackgroundColor

="#464646"

ForegroundText

="

light“

ToastCapable

=“True”>

<m2:SplashScreen Image

="Assets\SplashScreen.png"

/>

<m2:DefaultTile

ShortName

=“

MyApp

”

Wide310x150Logo=“310x150.png”

Square310x310Logo=“310x310.png”

Square70x70Logo

=“70x70.png”

DefaultSize

=“square150x150Logo”/>

<

m2:ApplicationView

MinWidth

=“width320”/>

</

m2:VisualElements

>

* Deprecated

Tile Size Differences

10.0

<

uap:VisualElements

DisplayName

="My Amazing App"

Square150x150Logo

="Assets\Logo.png"

Square44x44Logo

="Assets\SmallLogo.png"

Description

="My Amazing App"

BackgroundColor

="#464646">

<

uap:SplashScreen

Image

="Assets\SplashScreen.png"

/>

<

uap:DefaultTile

ShortName

=“

MyApp

”

Wide310x150Logo=“310x150.png”

Square310x310Logo=“310x310.png”

Square71x71Logo

=“

71x71.png”/>

</

uap:VisualElements

>Slide31

8.1

<m2:VisualElements

DisplayName

="My Awesome App"

Square150x150Logo

="Assets\Logo.png"

Square30x30Logo

="Assets\SmallLogo.png"

Description

="My Awesome

App“

BackgroundColor

="#464646"

ForegroundText

="

light“

ToastCapable

=“True”

>

<m2:SplashScreen Image

="Assets\SplashScreen.png"

/>

<m2:DefaultTile

ShortName

=“

MyApp

”

Wide310x150Logo=“310x150.png”

Square310x310Logo=“310x310.png”

Square70x70Logo=“70x70.png”

DefaultSize

=“square150x150Logo”

/>

<

m2:ApplicationView

MinWidth

=“width320”/>

</

m2:VisualElements

>

Deprecated Elements

10.0

<

uap:VisualElements

DisplayName

="My Amazing App"

Square150x150Logo

="Assets\Logo.png"

Square44x44Logo

="Assets\SmallLogo.png"

Description

="My Amazing App"

BackgroundColor

="#464646">

<

uap:SplashScreen

Image

="Assets\SplashScreen.png"

/>

<

uap:DefaultTile

ShortName

=“

MyApp

”

Wide310x150Logo=“310x150.png”

Square310x310Logo=“310x310.png”

Square71x71Logo

=“70x70.png

”/>

</

uap:VisualElements

>Slide32

If updating from Windows Phone ensure <

PhoneIdentity> matches what you had beforeEnsures users upgrading from Phone 8.x will receive your new app as an update, rather than a duplicate

<

mp:PhoneIdentity

PhoneProductId

="ca6e747f-41ba-422c-9f7b-e78f080c9dd7“

PhonePublisherId

="00000000-0000-0000-0000-000000000000" />

PhoneIdentitySlide33

A few more changes to be aware ofSlide34

Application View Class

PreferredLaunchWindowingMode Modes: Auto, PrefferredLaunchViewSize & FullScreen

PreferLaunchViewSize

SetPreferredMinSize

Default min size: 500x320px

Largest min size: 500x500px

Example

ApplicationView.GetForCurrentView

().

SetPreferredMinSize

(

new

Size { Width =

320,

Height

= 320

});

Window Sizes (launch and

m

in size)Slide35

Desktop: Enable Chrome back button (coming soon)

Single converged back button APIExample:

protected

override void

OnNavigatedTo

(

NavigationEventArgs

e)

{

var

frame =

Window.Current.Content

as Frame;

if (

frame.CanGoBack

)

{

SystemNavigationManager.GetForCurrentView

().

AppViewBackButtonVisibility

=

AppViewBackButtonVisibility.Visible

;

}

else

{

SystemNavigationManager.GetForCurrentView

().

AppViewBackButtonVisibility

=

AppViewBackButtonVisibility.Collapsed

;

}

Window.UI.Core.SystemNavigationManager.GetForCurrentView

().

BackRequested

+=

Page_BackReqested

;

}

Handling Back ButtonSlide36

Single scale factor system for all apps

Great alignment with other app platformsGuarantees 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 assetsScale factors work well with 4-px gridSee session 2-63 Display Scaling: Why it matters for more details

New scale factors

Scale

Factors

100

125

150

200

250

300

400Slide37

Old scale factors may be larger now

140% -> 150% , 180% - > 200%?Visual refresh has changed font sizesEx: TitleTextBlockStyle (8.1) FontSize

=14.667 (10.0)

FontSize

=24

Example (left 8.1 App, Right 10.0)

Scaling gotcha’sSlide38

Supporting fluid/responsive/tailored design

Resizable desktop windowsPhone/Phablet/Tablet/2:1s/Laptops/IoT/HoloLens/Surface Team/Xbox/…Adding

new features

Inking, Cortana,

AllJoyn

,

CalendarView

,

SplitView, …Performance Improvements

Compiled Bindings -

x:Bind

List Panning, Chromed Visuals, Software Bitmap Source

Taking the app forwardSlide39

Silverlight Phone AppsSlide40

Great content on migrating from SL app to 8.1 XAML on Windows Dev Center

https://msdn.microsoft.com/en-us/library/windows/apps/dn642486(v=vs.105).aspx https://msdn.microsoft.com/en-us/library/windows/apps/hh465136.aspx

API Mappings

https://

msdn.microsoft.com/en-us/library/windows/apps/dn800286.aspx

New porting tool coming

Porting a Windows Silverlight appSlide41

Different RunTimes

Most of your knowledge and experience will transferAs well as much of your source code and UI markupViewsApps UI should be straightforward to port, some differences in controlsViewModel

and

DataModel

Much of this should port over without much change

Cloud Services

Should port over without much change, different SDKs generally required

Assets

ReUsable

Porting a Windows Phone Silverlight AppSlide42

Similar approach to porting XAML apps

Create new UWP project in same solutionCopy files overAdd new referencesModify manifest fileBuild -> fix -> build -> …Differences in namespace and class names will generate lots of build errors

UX will most likely be ‘phone’ designed

Porting to a Windows 10 UWP ProjectSlide43

Free Visual Studio Add-In

Converts Silverlight Windows Phone apps to Windows 10 appsEnables the top 80% of apps to be converted 80% of the wayIncludes mappings for top components (>1200)

Supports open source extensibility model – anyone can

contribute

Get on the pre-release at

www.mobilize.net/build

See a

demo

in the

demo zone

area on the

second

floor

Silverlight Conversion Tool – Mobilize.NetSlide44

Port your apps, let us know how it goes!

What tooling could we offer to make this better?Check out the other XAML talks to take your app forward after portingCall to ActionSlide45

Must See Talks

Speakers

Session

Code

What's New in XAML for Universal Windows Apps

Joe Stegman

629

Introducing the App Model for the Universal Windows Platform (UWP)

Andrew Clinick

Matt Hidinger

617

App Lifecycle: From Activation and Suspension to Background Execution and Multitasking in Universal Windows Apps

Shawn Henry

John Vintzel

626

Data Binding: Boost Your App’s Performance Through New Enhancements to XAML Data Binding

Chipalo Street

Sam Spencer

635

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

Tim Heuer

Harini Kannan

679

XAML Performance: Techniques for Maximizing Universal Windows App Experiences Built with XAML

Mark AlcazarKiran Kumar689API Contracts (or How I Learned to Stop Checking OS Versions and Love Feature Detection)Brent Rector733Navigation and Windowing in Windows AppsRoberth Karman779

Display Scaling: What it is and why it matters to you

Steve Wright

263

New XAML Tools in Visual Studio 2015

Unni Ravindranathan

697Slide46

Come by the Windows Insiders lounge on the second floor for the next 90 minutes…

Additional information @Upgrading your appshttp://msdn.microsoft.com/library/dn975273.aspx

Designing UWP Apps

http://dev.windows.com/en-us/design

Questions?Slide47