extend your app to multiple device families and use new capabilities by targeting the uwp
TRANSCRIPT
![Page 1: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/1.jpg)
Porting 8.1 Apps to Windows 10Developer's Guide to Windows 10
![Page 2: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/2.jpg)
AgendaMigration Paths to Windows 10 UWPWindows 8.0/8.1 Store AppsWindows Phone 8.1 Store Apps (WinRT)Windows 8.1 Universal AppsWindows Phone Silverlight Apps
Migrating a Windows 8.1/Windows Phone 8.1 ProjectUpgrade UtilityAdditional Migration Steps
Migrating 8.1 Universal AppsMigrating Universal AppsHandling the Shared Project
![Page 3: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/3.jpg)
Extend your app to multiple device families and use new capabilities by targeting the UWP
![Page 4: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/4.jpg)
Migration Paths to Windows 10
![Page 5: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/5.jpg)
Windows 8.0/8.1 Store Apps
Windows 8.0
Minimal code update required
Responsive UX Design/Implementation
Windows 10
![Page 6: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/6.jpg)
Windows Phone 8.1 Store Apps (WinRT)
Windows Phone 8.1
Minor code updates for UWP APIs
Design UX for multiple form factors
Windows 10
![Page 7: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/7.jpg)
Windows 8.1 Universal Apps
Windows 8.1
Merge UX
Refactor to single code-base & to target UAP APIs
Windows 10
Windows Phone 8.1
![Page 8: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/8.jpg)
Windows Phone Silverlight Apps
*Silverlight on Windows Phone 8.1 can be a mix of Silverlight and WinRT APIs
Windows Phone 7.5/7.8
Windows Phone 8.0
Windows Phone 8.1*
Port the UI Silverlight -> Windows XAML
Rewrite code to target UWP APIs*
Design UX for multiple form factors
Windows 10
![Page 9: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/9.jpg)
Porting – What You Can Expect8.1 WinRT app code needs few changesApp lifecycle, background execution, Tiles and toasts – all the sameUWP APIs are a superset of the Windows 8.1 WinRT APIsReview/change logic that relied on compiler conditionals (#if…) to handle platform differencesA few APIs are deprecated (example, Phone 8.1 …AndContinue APIs)Charms bar gone, so app must now incorporate UI to launch Settings, Share or Search
8.1 WinRT XAML UI ports across fairly easilyThough you have work to do if you want to build adaptive UI working across multiple device familiesCare needed with deprecated and altered styles and with font size changes
Silverlight 7.x/8.x apps need reimplementationThough these apps still run on Windows 10 Mobile devices!Porting Tooling is coming! – More details announced soon
![Page 10: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/10.jpg)
Porting a Windows 8.1 or Windows Phone 8.1 Project
![Page 11: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/11.jpg)
Porting an 8.1 WinRT ProjectProject file and package.appxmanifest need modificationsNuGet V2 -> NuGet V3
No upgrade wizard in the tools
…but I’ve written a PowerShell script to do most of the work Get it at https://github.com/Win10DevGuideMVA/ProjectUpgradeUtility/ Contribute!
![Page 12: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/12.jpg)
Upgrade_to_uwp PowerShell script
• Automates most of the upgrade steps – doesn’t do everything!• Converts .csproj to UWP, updates package.appxmanifest• Run directly in Powershell (needs script execute allowed), or execute
Run_Upgrade_to_UWP.bat at cmd prompt
![Page 13: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/13.jpg)
Updated Project
![Page 14: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/14.jpg)
Add NuGet PackagesUWP apps uses NuGet V3Packages no longer saved per solution in solution root directoryPackages.config file replaced by project.json configuration filePackage references resolved at Build timePackages cached once per user in your C:\Users\username\.nuget
![Page 15: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/15.jpg)
Update your ArtworkMay need to change tile sizes and scaling:Supported Scale factors now:
100 – 125 – 150 – 200 – 400Standardised across all device families
![Page 16: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/16.jpg)
New scale factors
Single scale factor system for all appsGreat 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 grid
Scale Factors
100
125
150 200 250 300 400
![Page 17: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/17.jpg)
Window Sizes (launch and min size)Minimum allowed Window width no longer set in manifestNow: set in code using the ApplicationView classPreferredLaunchViewSize
Size the app launches with if no size remembered by Windows – only takes effect on Desktop device that is not in Tablet mode
SetPreferredMinSizeLargest min size: 500x500px, Smallest min size: 192x48pCall this on your view before call to Window.Activate
ExampleApplicationView.GetForCurrentView().SetPreferredMinSize(new Size(320, 320));
![Page 18: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/18.jpg)
See MSDN documentation for guidance on how to Move from Windows Runtime 8 to UWP:
http://aka.ms/movefrom8touwp
![Page 19: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/19.jpg)
Demo: Porting an 8.1 XAML app
![Page 20: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/20.jpg)
1. Review conditional code (#if…) and convert to adaptive code where appropriate
2. Add Reference to Platform Extension SDKs, if needed
3. Replace calls to deprecated APIs, if any4. Replace undefined and review retained styles in
XAML5. Update code that integrates with Charms bar6. Extend your UI to create a great, adaptive UI that
works across multiple device families!
Additional Conversion Steps
![Page 21: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/21.jpg)
1. Review #if conditional compilationCompiler conditionals may be used in shared code: this.Page.Loaded += (sender, e) => {#if WINDOWS_PHONE_APP Windows.Phone.UI.Input.HardwareButtons.BackPressed += HardwareButtons_BackPressed;#else // Keyboard and mouse navigation only apply when occupying the entire window if (this.Page.ActualHeight == Window.Current.Bounds.Height && this.Page.ActualWidth == Window.Current.Bounds.Width) { // Listen to the window directly so focus isn't required Window.Current.CoreWindow.Dispatcher.AcceleratorKeyActivated += CoreDispatcher_AcceleratorKeyActivated; Window.Current.CoreWindow.PointerPressed += this.CoreWindow_PointerPressed; }#endif };
![Page 22: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/22.jpg)
Handling Back ButtonDesktop: Enable Chrome back button Single converged back button API
Example: 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; }
SystemNavigationManager.GetForCurrentView().BackRequested += Page_BackRequested; }
![Page 23: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/23.jpg)
2. Add Ref for Platform extensions
![Page 24: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/24.jpg)
Adaptive code
var api = "Windows.Phone.UI.Input.HardwareButtons";if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent(api)){
Windows.Phone.UI.Input.HardwareButtons.CameraPressed += CameraButtonPressed;}
![Page 25: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/25.jpg)
3. Replace Deprecated APIs
![Page 26: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/26.jpg)
4. Review all use of Styles and SizesReplace undefined Styles in XAML with alternatives:
![Page 27: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/27.jpg)
Scaling gotcha’sOld scale factors may be larger now140% -> 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)
![Page 28: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/28.jpg)
5. Update Charms Bar Integration CodeCharms bar not on Windows 10 devicesReplace with in-app UI for• Search• App Settings• Sharing
Underlying code does not change, just the users’ way of accessing them
![Page 29: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/29.jpg)
6. Create an awesome adaptive UI!
Phone/narrow view
small landscape
view
large landscape view
![Page 30: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/30.jpg)
Migrating 8.1 universal apps
![Page 31: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/31.jpg)
What about 8.1 Universal apps?1. Choose one head to port
Phone or PC/Tablet
2. Merge UI from other head into adaptive UIPhone and PC/Tablet UI combined in the UAP project
3. Choose what to do with SharedShared or merged
![Page 32: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/32.jpg)
What to do with your Shared project?You can keep your Shared project1. WINDOWS_APP2. WINDOWS_PHONE_APP3. WINDOWS_UWP (new)
You may still need to include Windows.Foundation.Metadata.ApiInformation adaptive code checks for any APIs you use in Extension SDKs
![Page 33: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/33.jpg)
ReviewMigration Paths to Windows 10Windows 8.0/8.1 Store AppsWindows Phone 8.1 Store Apps (WinRT)Windows 8.1 Universal AppsWindows Phone Silverlight Apps
Migrating a Windows 8.1/Windows Phone 8.1 ProjectUpgrade UtilityAdditional Migration Steps
Migrating 8.1 Universal AppsMigrating Universal AppsHandling the Shared Project
![Page 34: Extend your app to multiple device families and use new capabilities by targeting the UWP](https://reader034.vdocument.in/reader034/viewer/2022051401/56649e4c5503460f94b41b32/html5/thumbnails/34.jpg)
© 2015 Microsoft Corporation. All rights reserved.