Porting Windows Phone Silverlight to HTML Windows Runtime 8
[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]
Note For info about porting to a Universal Windows Platform (UWP) app for Windows 10, see Move from Windows Phone Silverlight to UWP.
Migrating a Windows Phone Silverlight app to a Windows Store app using JavaScript can be either a straightforward effort or a difficult one, depending on the type of app. If you are migrating a simple UI app—a utility or lightweight game—JavaScript can be an effective destination platform for Windows 8 ports from Windows Phone Silverlight, using well-known, standard web-development technologies. If you are migrating an app with significant UI components or a graphics-rich environment, you should consider a Windows Store app using C++, C#, or Visual Basic and XAML.
As you read this topic, you can refer to Windows Phone Silverlight to Windows Runtime namespace and class mappings.
Preparing to migrate a Windows Phone Silverlight app to JavaScript
Migrating a Windows Phone Silverlight app to a Windows Store app using JavaScript requires a certain level of preparation, especially if you are new to Windows 8 development. Note these considerations:
- You must know HTML5, CSS3, and JavaScript. For more info, see the Create your first Windows Store app using JavaScript tutorial.
- You must understand how you can use HTML5 and CSS to reconstruct the user interface of your application. You should identify the UI elements you are using from Windows Phone Silverlight, and review the controls provided in HTML5 and the Windows Library for JavaScript toolkit for controls analogous to those in your Windows Phone Silverlight app. Then review how your UI components and containers can be expressed as HTML5 pages and elements (<div>). Some controls might require using the elements provided in the Windows.UI namespace of the Windows Runtime.
- You must understand how to redevelop core behaviors by using JavaScript. If the functionality you need is not available in JavaScript or the WinJS , you can use a specific subset of APIs from the .NET Framework by referencing the Windows Profile run-time libraries in your application.
- You must evaluate the assets and UI of your application to see if they can cleanly support a variety of screen resolutions, the majority of which are larger than the native Windows Phone Silverlight resolution of 800 x 480 pixels. Consider redrawing and redeveloping your assets if they are static bitmaps. Windows Store apps using JavaScript can also support vector images using the Scalable Vector Graphics (SVG) support provided by WWAHost and can scale them appropriately, although you should consider alternate aspect ratios (4:3, 16:9, and 16:10).
If you are migrating a game or graphics-intensive application, you must use the functionality provided in the Trident graphics model, including Canvas and SVG support, for WWAHost and Internet Explorer 10. This HTML-specific graphics model includes support for 2D and 3D transformations through W3C standards-compliant CSS behaviors. For more information, please see the W3C CSS 3D Transform draft specification.
Migrating a Windows Phone Silverlight app to JavaScript
You develop a Windows Store app using JavaScript by using JavaScript, HTML5, and CSS3. So you must redesign the presentation components of your app and redevelop them as HTML documents, and you must represent all behaviors as JavaScript and CSS behaviors. Some tips:
- You can express individual screens as HTML pages. Within these pages, you can express containers and discrete organizational elements with <div> elements or "frames" (connected or static).
- You can implement controls using HTML control elements and input types (such as <input> or <textarea>), or through CSS3 and JavaScript (custom interactive elements).
- You can perform drawing behaviors with the <canvas> element in HTML5 and JavaScript.
In addition, your Windows Store app using JavaScript can take advantage of Windows-specific libraries to increase functionality and use operating system-level functions. These libraries include:
- The WinJS -- A toolkit of JavaScript libraries that support improved event handling and DOM query behaviors, enable new control types, and provide developer-friendly patterns for other common JavaScript behaviors.
- Trident 6.0 -- An HTML- and CSS-based model for the layout and rendering of visual components that implements Canvas for the real-time drawing and manipulation of bitmap graphics, and Scalable Vector Graphics (SVG) support for vector graphics. (Trident 6.0 is the set of libraries used by Internet Explorer 10 for the display of content, and can be used to support additional graphics and rendering behaviors.)
- The Windows Runtime -- OS-level functions made available to JavaScript.
The following table provides a list of Windows Phone Silverlight APIs and their Windows Runtime counterparts (as made available to JavaScript). This table does not suggest a one-to-one mapping of functionality; one platform may have more or less functionality than its counterpart. Also note that some Windows Runtime APIs are not available to Windows Store apps using JavaScript, such as the Windows.UI.Xaml namespaces and types. This is because HTML5 provides user interface elements, behaviors, and rendering for you to use instead.
| API type | Silverlight API namespaces | Windows Runtime API namespaces (C#/Visual Basic) |
|---|---|---|
| Devices | Microsoft.Devices, Microsoft.Devices.Radio, Microsoft.Devices.Sensors | Windows.Devices.Enumeration, Windows.Devices.Enumeration.Pnp, Windows.Devices.Input, Windows.Devices.Sensors |
| Windows Phone app model and environment | Microsoft.Phone, Microsoft.Phone.Info, Microsoft.Phone.Notification, Microsoft.Phone.Reactive, Microsoft.Phone.Shell, Microsoft.Phone.Tasks | Windows.Networking.PushNotifications, Windows.Devices.Sms, Windows.ApplicationModel.Background, Windows.ApplicationModel.Contacts, Windows.ApplicationModel.Contacts.Provider, Windows.ApplicationModel.Core |
| Maps | Microsoft.Phone.Controls.Maps, Microsoft.Phone.Controls.Maps.AutomationPeers, Microsoft.Phone.Controls.Maps.Core Microsoft.Phone.Controls.Maps.Design Microsoft.Phone.Controls.Maps.Overlays, Microsoft.Phone.Controls.Maps.Platform | Windows.Devices.Geolocation |
| Marketplace | Microsoft.Phone.Marketplace | Windows.ApplicationModel.Store |
| Networking and syndication | Microsoft.Phone.Net, Microsoft.Phone.Net.NetworkInformation | Windows.Networking, Windows.Networking.BackgroundTransfer, Windows.Networking.Connectivity, Windows.Networking.NetworkOperators, Windows.Networking.Sockets, Windows.Web.AtomPub, Windows.Web.Syndication |
| Programming and data models | System | Windows.Foundation, Windows.Foundation.Collections, Windows.Foundation.Metadata, Windows.Data.Xml.Dom, Windows.Data.Xml.Xsl, Windows.Data.Json |
| Location | System.Device.Location | Windows.Devices.Geolocation, Windows.Networking.Proximity |
| Automation and diagnostics | System.Diagnostics, System.Windows.Automation.Peers | Windows.Foundation.Diagnostics |
| Graphics (3D transforms) | XNA Framework Class Library, Content Pipeline Class Library | No equivalent at this time. |
| Controls and UI infrastructure | Microsoft.Phone.Controls, Microsoft.Phone.Controls.Primitives, | Windows.UI.ApplicationSettings, Windows.UI.Core, Windows.UI.Input, Windows.UI.Notifications, Windows.UI.ViewManagement |
| Storage | System.IO.IsolatedStorage class | Windows.Storage, Windows.Storage.FileProperties |
You can access much of the .NET Framework Class Library by using the Windows Runtime. Functionality that is not specific to the Windows Phone platform typically has a counterpart API in the .NET Framework Class Library. For example, classes and methods available in the Windows Phone Silverlight version of the System and System.Diagnostics namespaces may also be available in the Windows Runtime as their .NET Framework counterparts. For the complete set of .NET Framework APIs available in Windows Phone Silverlight, and which may also be accessible in the Windows Profile, see the Silverlight class reference documentation.
Note The Windows Profile provides a wrapper for over 12,000 of the .NET Framework APIs. However, not all of the .NET Framework APIs are currently supported. For a complete list, please refer to the Windows Profile API documentation.
Note If you want to create a graphics-rich experience for your ported Windows Phone Silverlight app (such as a game) and you don't want to use the XAML or JavaScript models because of the limitations of those models, consider migrating it to a C++ app with DirectX.