We turn the Windows Store application into a universal

Today we will talk about the possibility of expanding the Windows Store application to universal. As a result of the work, you will receive not only the Windows Store app, but also the Windows Phone 8.1 app, and with it, a new audience of users who can use your app from various devices, paying for it once and saving data and status between devices .

This article describes the process of extending the Windows Store application to Windows Phone, typical problems and their solutions.

Introduction

The universal application from Microsoft is a technology for developing applications running on Windows 8.1, regardless of the form factor of the device : phone, tablet or PC.

To create universal applications for Windows 8.1 and Windows Phone 8.1, you need Windows 8.1 and Visual Studio 2013 Update 2.
')
Starting the development of the project of the new type “Universal apps”, let us pay attention to the templates with interface layouts, which, when selected, obtain the automatically generated solution from the following projects:

• Windows 8.1 project;
• Windows Phone 8.1 project;
• The project containing the common code (Shared).

The overall source code includes interface elements and API calls , which significantly reduces the amount of source code for each of the applications. Note that the appearance of the application for each of the platforms will be different, due to the behavior of some interface elements on different devices.

Universal applications are supported for C ++, C # and JavaScript.

Read more about the new features of universal applications previously written in this article .

An example of transition from a Windows Store application to a universal one.

Make the transition from a Windows 8.1 application to a universal one by adding a Windows Phone 8.1 project to the solution:

1. Under Windows Phone 8.1, an application explicitly means only WinRT XAML applications, excluding Silverlight 8.1. Silverlight applications do not have extensibility to universal ones.
2. Open the application project for Windows 8.1:
   
   
   The main task of the demo application is to display images from a given directory on the device:
   
   
3. Add a Windows Phone 8.1 application to a Windows 8.1 application:
   

We get in the solution browser additionally a project for Windows Phone 8.1 and a project with common code:


Initially, the project with the common code is empty, so from the application for Windows 8.1 we copy the following elements:

• Directories: ommon, Models, ViewModel
  
• And files: ImageViewPage.xaml, MainPage.xaml
  
  

Verify that all elements are copied correctly:


Remove from the project Windows 8.1, the elements that are duplicated in the overall project:


Directories and files:


From the Windows Phone 8.1 project, also remove the duplicate elements:


This needs to be done, because the main function of the project with the common code is to distribute the code located in it to both the Windows 8.1 and Windows Phone 8.1 projects. Therefore, duplicate files are simply not needed in both projects.

Test how the application works under Windows Phone 8.1

Install the Windows Phone 8.1 project as the starting one:


Run in the emulator:


The application did not start correctly and we received the following errors:


Click "Break" and try to get rid of the problem.
Open the MainPage.xaml file from the shared Shared project:


Note that for any XAML file from a common project, you can select the edit mode, where the active code for Windows 8.1 or Windows Phone 8.1 will be highlighted separately:


Compare two editing modes:

Windows 8.1


Windows Phone 8.1


We observe the DataContext element, not recognized by the compiler, which tells us that we forgot to add the same connections to the Windows Phone project in the App.xaml project as in the Windows 8.1 file in the App.xaml:

<Application.Resources> <ResourceDictionary> <data:LibraryLoaderViewModel x:Key="LibraryImageSource" /> </ResourceDictionary> </Application.Resources> 

Now the application has started, but does not display the data:


The reason is that we have specified as the resource directory an image library that is used on PC devices.

But for mobile devices, the resource store should be changed to the image store in the device’s photo album.

Open the LibraryLoaderViewModel.xaml file:


And change the function of the private async Task LoadImages () as follows:

 private async Task LoadImages() { #if WINDOWS_APP var folder = Windows.Storage.KnownFolders.PicturesLibrary; #elif WINDOWS_PHONE_APP var folder = Windows.Storage.KnownFolders.CameraRoll; #endif var imageFiles = await folder.GetFilesAsync(); foreach (var imageFile in imageFiles) { var image = new ImageItem(imageFile, ImageLocation.CameraRoll); _libraryImages.Add(image); } await Window.Current.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => { OnPropertyChanged("LibraryImages"); }); } 

We explain to the application which image repository should be accessed depending on the device. For this we use the construction #if. Thereby separating actions that are different for Windows 8.1 and Windows Phone 8.1 platforms:

Windows = WINDOWS_APP
Windows Phone = WINDOWS_PHONE_APP

Configure access to the repository using the Capabilities property in the Package.appxmanifest for Windows Phone 8.1 project:


Everything works great. You can check the result by connecting your own device and launching the application from it.

Note that the mobile application designer does not correctly display the markup:


We have the opportunity to check how the application looks on the screens of various sizes using the Device toolbar:


Here we go through the screen size options:


Adjust the correct display for each if necessary, for example, in the MainPage.xaml file, change the specified property Height = “125” to Auto in the case of the size of 480x800:

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.RowDefinitions> <RowDefinition Height="Auto*"/> <RowDefinition Height="643*"/> </Grid.RowDefinitions> </Grid> 

Now the application is ready for use on any Windows 8.1 and Windows Phone 8.1 devices.

Other Distributable Code Support Scenarios

There are several options for storing and using common code for cross-platform Windows 8.1 and Windows Phone 8.1 applications:

• The newest and easiest way is a project with shared Shared code inside the Universal app solution. This approach is the easiest and supports any kind of distributed data: code, XAML files, images, XML / JSON, RESW. Here the Visual State Manager tool already familiar to us is implemented, which allows you to see common and different code for platforms.
• Portable Class Library are libraries and WinRT components;
• One of the interesting features of the Portable Class Library is the ability to write a library in any of the languages, for example, C ++ or JavaScript, and use it in any application. For example, you want to create a reusable library for different applications or in the case of cross-platform development for Windows, iOS and Android.
• Adding links to files with common code in the project. For example, when you need to make a Windows Store application or a Windows Phone 8.1 (XAML) application from Silverlight.

Conclusion

The process of expanding the Windows Store application to universal turned out to be simple, since the API for the phone and for the PC now coincide by 90% .

When developing and porting, you should pay attention to some differences between the platforms , as was the case with the image repository, and take into account various form factors and screen resolutions for various devices.

useful links

New Windows Phone 8.1. What should an application developer do?
Updating Windows Phone Silverlight 8.0 application to Windows Phone Silverlight 8.1
Update Windows Phone 8.0 application to Windows Phone 8.1 (XAML)
Microsoft Virtual Academy (MVA) Training Courses
Download free or trial Visual Studio 2013
Become a Windows Phone Application Developer
Download sample application from this article.
Download generic application code samples (c #, c ++, javascript)