Turning the Windows Store App Into Universal

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

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

Introduction

A 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 the operating system Windows 8.1 and Visual Studio 2013 Update 2.

Starting the development of a new type of project, “Universal apps”, we’ll pay attention to templates with interface layouts, when choosing which we get an automatically generated solution from following projects:

• Windows 8.1 project
• Windows Phone 8.1 Project;
• A project containing a common code (Shared).

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

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

More information about the new features of universal applications was previously written in this article .

An example of the transition from the Windows Store application to the universal

We will transfer from the Windows 8.1 application to the universal one by adding the Windows Phone 8.1 project to the solution:

1. Under Windows Phone 8.1, the application clearly means only WinRT XAML applications, excluding Silverlight 8.1. Silverlight applications cannot be expanded to universal.
2. Open the application project for Windows 8.1: The
   
   
   main task of the demo application is to display pictures from a given directory on the device:
   
   
3. Add the Windows Phone 8.1 application to the Windows 8.1 application:
   

We get in the Solution Explorer an additional project for Windows Phone 8.1 and a project with a common code:


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

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

Check that all the elements were copied correctly:


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


Directories and files: We


also delete duplicate elements from the Windows Phone 8.1 project:


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

Let's test how the application works under Windows Phone 8.1

Set Windows Phone 8.1 as the project to start:


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 the shared project, you can select the editing mode, where the active code for Windows 8.1 or Windows Phone 8.1 is highlighted separately:


Compare the two editing modes:

Windows 8.1


Windows Phone 8.1


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

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


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

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

Open the LibraryLoaderViewModel.xaml file:


And change the private async Task LoadImages () function 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 store should be accessed depending on the device. To do this, use the #if construct. Thus, separating actions that are different for the Windows 8.1 and Windows Phone 8.1

platforms : Windows = WINDOWS_APP
Windows Phone = WINDOWS_PHONE_APP We will configure

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


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

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


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


Here we go over the screen size options: We


set up 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 with a size of 480x800:

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

Other Distributed Code Support Scenarios

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

• 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. The Visual State Manager tool is already familiar to us, which allows us to see common and different code for platforms.
• Portable Class Library - these 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 shared code in the project. For example, when you want 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 a universal one turned out to be simple, since the APIs for the phone and for the PC are now 90% identical .

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

useful links

New Windows Phone 8.1. What should an application developer do?
We update Windows Phone Silverlight 8.0 application to Windows Phone Silverlight 8.1 We
update Windows Phone 8.0 application to Windows Phone 8.1 (XAML)
Microsoft Virtual Academy training courses (MVA)
Download free or trial Visual Studio 2013
Become a Windows Phone application developer
Download the sample application from this article
Download universal application code examples (c #, c ++, javascript)