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.
