Windows 10 Universal Apps Development with Prism

This article will help you setup a Universal app template using Prism 6 to quickly get started on building Windows 10 apps.

Windows 10 brings the platform which makes it possible to have single code base for phone and desktop app. Earlier with Windows 8.1, Universal apps were there but you can’t have a single code base but the common shared one between phone and desktop app.  Now developing line of business apps is even more engaging and with the making of Prism 6, it is finally possible to have single framework for both platform apps. Right now Prism 6 is being porting over for Windows 10 and you can have a look at their active repo at https://github.com/PrismLibrary/Prism

In this article, I am going to show you how to setup a basic Windows 10 Universal app + Prism 6 template to get started. Right now Prism 6 is available and you need to compile it to produce the binaries to use it with your project. You can either do so or can grab the dlls already compiled by me for this article at my dropbox account here: https://www.dropbox.com/s/8m8atk23snpxni0/Prism6.zip?dl=0

Let’s started with code then. First of all, get Visual Studio 2015 Community edition from the link below:
https://go.microsoft.com/fwlink/?LinkId=532606&clcid=0x409

Once all done and setup, create new Blank App (Universal Windows) project that is located under Windows -> Universal. Name it PrismApp. Reference the following binaries of Prism 6:

Prism.Windows.dll
Microsoft.Practices.ServiceLocation.dll
Microsoft.Practices.Unity.dll
Prism.dll
Prism.Unity.Windows.dll

The supplied Prism 6 binaries have two .pri files alongside DLLs. They are required by compiler to know about resources referenced by Prism.

Setup Prism
Follow these steps to quickly setup Prism in our app.

1. Replace the base class of App to PrismUnityApplication from Application. Also remove all the code from App class. After doing this changes, your App.xaml.cs file should look like following:

namespace PrismApp
{
    using Prism.Unity.Windows;
    sealed partial class App : PrismUnityApplication
    {
        
    }
}

2. Now open file App.xaml and add new XML namespace as prism and then replace the Application tag with the PrismUnityApplication tag. Now App.xaml should look like following:

<prism:PrismUnityApplication
    x:Class="PrismApp.App"
    xmlns:prism="using:Prism.Unity.Windows"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PrismApp"
    RequestedTheme="Light">
</prism:PrismUnityApplication>

We are not done with Prism setup yet for App.xaml.cs file. We will revisit it later in this article.
Like MVC, Prism has convention where you can have Views and ViewModels folder and based on naming convention, it will automatically wire up ViewModel with the View. Let’s setup that.

3. Create two folder named Views and ViewModels in the project. Add new item and choose Blank page template. Name the page as HomePage.xaml. We need to modify this newly added page and after modification, your file should look like following:

<prism:VisualStateAwarePage
    x:Class="PrismApp.Views.HomePage"
    xmlns:prism="using:Prism.Windows.Mvvm"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using: PrismApp.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    prism:ViewModelLocator.AutoWireViewModel="True"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock Text="{Binding Message}" Margin="10"/>
    </Grid>
</prism:VisualStateAwarePage>

4. Now open the code-behind file HomePage.Xaml.cs and change base class of HomePage from Page to VisualStateAwarePage.

namespace PrismApp.Views
{
using Prism.Windows.Mvvm;
    public sealed partial class HomePage : VisualStateAwarePage
    {
         public HomePage ()
        {
             this.InitializeComponent();
        }
    }
}

5. Right click on the ViewModels folder and select Add -> Class and name it HomePageViewModel.cs. We are following naming convention to add ViewModel suffix at the end of the View name. We will inherit from ViewModelBase class that Prism 6 supplies.

using Prism.Windows.Mvvm;

namespace PrismApp.ViewModels
{
    public class HomePageViewModel: ViewModelBase
    {
         public string Message { get; set; } = "Hi from Universal + Prism app";
    }
}

Note the new way initializing the property value which is introduced with C# 6 and Visual Studio 2015.

6. Now we will override required application life cycle events in App.xaml.cs as following:

sealed partial class App : PrismUnityApplication
    {
         protected override Task OnLaunchApplicationAsync(LaunchActivatedEventArgs args)
         {
             NavigationService.Navigate("Home", null);

             Window.Current.Activate();

             return Task.FromResult<object>(null);
        }

         protected override Task OnInitializeAsync(IActivatedEventArgs args)
         {
             RegisterTypes();
             return base.OnInitializeAsync(args);
        }

        private void RegisterTypes()
        {
            ViewModelLocationProvider.SetDefaultViewTypeToViewModelTypeResolver((viewType) =>
            {
                var viewModelTypeName = string.Format(CultureInfo.InvariantCulture, "PrismApp.ViewModels.{0}ViewModel, PrismApp", viewType.Name);
                var viewModelType = Type.GetType(viewModelTypeName);
                 return viewModelType;
            });
        }
    }

The ViewModelLocationProvider code tells Prism where to look for ViewModels file with naming convention.

We are all good and once you Run the app, you will see following screen:



And wait! Since it is the Universal app, same can run on Mobile Emulator without any code change. Choose Mobile Emulator of your choice from Debug menu and hit F5.


By jay nanavati   Popularity  (4629 Views)