Universal App for Windows 10 and Windows Phone

Universal App for Windows 10

I would like to tell you about one of the most interesting in my opinion innovations recent conference Build 2014 . The question will be about the simultaneous development of applications for Windows 8 and Windows Phone, that is, about a universal app for the platform Windows .

 Microsoft platform covers a wide range of devices - from smartphones and tablets to desktop computers and gaming consoles Xbox One, and it is natural that the developer wants to minimize the effort to create applications for all form factors. On competing platforms, there is a huge difference between desktop and mobile applications (since they are running different operating systems), and the mobile application designed for smartphones can run on tablet devices, which often leads to user frustration due to not very high quality user interface. 

At the moment, Microsoft came close to that, to unify all platforms (Windows Phone, Windows 8, Xbox One) in terms of API, and allow the programmer to make maximum use of common code for building applications, while retaining the ability to use different designs for different form factors. Read more about how it is implemented at the moment - see below.

As previously created application Windows 10 + Phone

Until now, to create applications with a common code for Windows and Windows Phone had to use a shared library of portable (portable library) to highlight common code responsible for data access and business logic, and a variety of projects for the UI.Details of such an approach is described in a special course on the Microsoft Virtual Academy  . Also, due to the difference in API Windows 8 and Windows Phone had a piece of code to make a platform-dependent.

Universal Windows 10 applications

At the conference build it was announced the following new features:

• The new version of Windows Phone 8.1 will be used Windows RT API This means that about 90% of system calls between Windows 8.1 and Windows Phone 8.1 will be shared. Furthermore, the XAML markup language also been unified across platforms. In other words, the new Windows Phone 8.1 application will use Windows XAML, instead of Silverlight. If you need compatibility for Windows Phone, you can still be developed using Silverlight, including using new features, but this is a topic for another article.

• In Visual Studio 2013 Update 2 will be a new project template for standardized applications Windows. This template creates a variety of projects for Windows and Phone, and the third "shared" project, which houses all the common code. This shared project 

• can contain not only the code but also the XAML-markup, shared resources, images, etc. This project is not compiled into a separate library, and is divided between the two platform projects at the level of the inclusion of the text at compile time. This template can be used to develop for C # / XAML, C ++ / XAML or HTML / JS.

• If you wish to allocate a portion of the platform-independent code in a separate library, shared among multiple applications, it is still possible to use a portable library, which can now also include the XAML-markup . Portable library can be used to develop C # or Visual Basic.

• Binary compatibility across platforms yet , ie Windows applications and Windows Phone 8 will continue to be distributed through the respective shops, and the developer will need to create and load each of the stores the application package (though now Windows Phone 8.1 will use the same format .appx, that of Windows 8. However, in the shops Windows and Windows Phone will use a single application IDs , which will implement the scenario a single purchase applications for use on all platforms .

• Applications for the Xbox One current version Visual Studio Update 2 not fit well into the overall story, although at a plenary report showed universal application Khan Academy with Kinect, running on the Xbox and Windows (yes, Kinect v2 will support applications store Windows, but this is again a topic for another article). Developing for Xbox One at the moment is supposed to HTML / JS / CSS and C ++

So now there is a convenient opportunity for developers to create applications for Windows and Windows Phone, which contain a significant amount of common code, with the ability to customize the design for different platforms to maximize satisfaction polzovatalya!

Universal Hello World

Consider a small example of a universal application. The structure of the project in Visual Studio 2013 Update 2 has been changed, and now in the Shop Window are available as an application for Windows and Windows Phone, and universal applications and libraries. The newly created universal app will be calculated on the platform Windows Phone 8.1 and Windows 8.1 Update. At the same time in the application Windows Phone available project templates Windows Phone, based on Silverlight, which will allow to create applications for earlier versions of the platform - but the possibility of universal application at the same time can not be used. Once you create an empty universal application, we get the following structure consisting of three projects : one project for each platform and a common shared project: Note:

• Default design pages (XAML) platforms are carried on different projects. However, in simple cases, you can use a common XAML-files for all platforms if you are sure that your design will be well enough to adapt to different resolutions from the smartphone to the desktop. However, many built-in controls (for example, GridView) are able to adapt and change their appearance depending on the platform.

• If you have already prepared a draft Windows or Windows Phone, you can create on the basis of its universal application by selecting the context menu of the project the corresponding item. This project will be converted to the same three-designed structure, and you can transfer files between applications into a common project for sharing.

• In this project,can be included links to the library (References), whereby these links will be added to both the project (we can see that the references of each of the platform projects present Shared-link). If some libraries are available for only one of the platforms, then we can still use the appropriate functionality to the general code surrounding it conditional compilation directives #ifdef. Visual Studio is so comfortable that this will work Intellisense, alerting us to the fact that the link is only available in one of the platforms.

• If we make XAML-code in the overall project, the XAML editor is available for drop-down switching platform, and we can visually edit page design in the phone mode or in tablet mode / desktop.

In most cases, you will want to share as much code between platforms, transferring all that is possible in the project shared. In our case, we can move MainPage.xaml from one of the projects in the shared project, and remove it in platform projects, as in our case design page will not differ from platform to platform:

< Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}" > 

 < TextBlock Style = "{} StaticResource HeaderTextBlockStyle" HorizontalAlignment = "Center" VerticalAlignment = "Center" > Hello, world! </ TextBlock > 

 </ Grid >

Thus, we have a universal application, code and design of which are completely in the shared project.

On the way to real-world applications - Photo Viewer

Let's try to turn our Hello World application into something useful - for example, in the best photo viewer flickr. Flickr offers RSS-Feed photos, so to determine the appropriate data source is relatively simple (for greater ease of loading RSS made non-asynchronous, in real projects to do so is not necessary):

Code for obtaining images from Flickr

On the main page, we use the GridView, attached to this data source. In order to cross-platform pictures were of different sizes, using a key from a resource file that defines the desired photo size.

XAML-design the main page of the application

To set the different parameters in the resource file, create a platform in each of its projects Resource.xaml resource file as follows:

< ResourceDictionary xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local = "using:UniversalHello" > < x: Double x: Key = "ImageSize" > 150 </ x: Double >

 </ ResourceDictionary >

And finally, we need to connect this resource file in App.xaml (which is in the shared project):

App.xaml

As a result, we get a couple of applications for Windows 8 and Windows Phone, which correctly reflect the complete gallery of images specific to the platform. The complete source code can be found on github .

Preview of Upcoming Programming Passion App