WPF Application Using Prism

Before reading this article, I will recommend that you read and understand the below concepts. If you know this information already that is enough to understand this article.

WPF
MVVM
Unity Framework

Introduction

Prism is a framework to build composite applications using WPF + MVVM. When we develop composite applications, they should have:

Ability to extend
Flexibility
Ability to reuse modules which are developed
Top quality
Ability to test modules independently

Prism framework is strongly recommended to achieve the above-mentioned abilities.

We will develop a simple wpf application using PRISM.

Below is the design which we are going to implement.

Here we can see 3 main components:

Shell: This is the one, which will act like a showcase to all modules. All modules can be loaded here.
BootStrapper : This is the one which connects the modules to Shell.
Modules: Modules are those, which can be developed independently. Using MVVM design pattern to build these modules is recommended.

Now we will start implementing.

Create a solution with WPF application project.

Prism framework can be installed using nuget command: nuget command: install-package Prism.UnityExtensions -v 4.0.0.0

In this delete MainWindow.xaml

In App.xaml remove startupuri

In App.xaml.cs add the below code, to run the application:

using System.Windows;
namespace Prism.Sample.Demo
{
/// <summary>
/// Interaction logic for App.xaml
/// </summary>
public partial class App : Application
{
protected override void OnStartup(StartupEventArgs e)
{
base.OnStartup(e);
BootStrapper bootstrapper = new BootStrapper();
bootstrapper.Run();
}
}
}

Add a Window with name “PrismShell”

Add the below code in PrismShell.Xaml.cs, in the below code we can see that we added dockpanel and split as 4 regions. FYI we can split any number of regions based on our requirement. For now I will explain with 4 regions called:

Ribbon Region
Left Region
Main Region
Bottom Region

<Window x:Class="Prism.Sample.Demo.PrismShell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:prism="http://www.codeplex.com/prism" WindowState="Maximized"
mc:Ignorable="d" Title="ShellApp" Height="900" Width="1200">
<Grid x:Name="LayoutRoot">
<DockPanel LastChildFill="True" HorizontalAlignment="Stretch" Name="dockPanel" VerticalAlignment="Stretch">
<Border BorderBrush="Silver" BorderThickness="1" DockPanel.Dock="Top" >
<StackPanel Orientation="Horizontal" DockPanel.Dock="Top" Height="100" HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentControl BorderBrush="Silver" BorderThickness="1" prism:RegionManager.RegionName="RibbonRegion"></ContentControl>
</StackPanel>
</Border>
<Border BorderBrush="Silver" BorderThickness="1" DockPanel.Dock="Bottom" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" DockPanel.Dock="Bottom" Height="100">
<ContentControl prism:RegionManager.RegionName="BottomRegion"></ContentControl>
</StackPanel>
</Border>
<Border BorderBrush="Silver" BorderThickness="1" DockPanel.Dock="Left" >
<ScrollViewer>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Vertical" DockPanel.Dock="Left" Width="200">
<ContentControl prism:RegionManager.RegionName="LeftRegion"></ContentControl>
</StackPanel>
</ScrollViewer>
</Border>
<Border BorderBrush="Silver" BorderThickness="1" >
<ScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentControl prism:RegionManager.RegionName="MainRegion" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"></ContentControl>
</StackPanel>
</ScrollViewer>
</Border>
</DockPanel>
</Grid>
</Window>

Create BootStrapper class and the below code in that class. In the below code we can see that we have used unity framework to resolve dependency issues and we have overridden 2 methods.

InitializeModules : To Load PrismShell and display.
ConfigureModuleCatalog: We will load modules which we want to display through PrismShell

using Microsoft.Practices.Prism.Modularity;
using Microsoft.Practices.Prism.UnityExtensions;
using System.Windows;
namespace Prism.Sample.Demo
{
public class BootStrapper : UnityBootstrapper
{
protected override DependencyObject CreateShell()
{
return Container.TryResolve<PrismShell>();
}
protected override void InitializeModules()
{
base.InitializeModules();
Application.Current.MainWindow = (PrismShell)Shell;
Application.Current.MainWindow.Show();
}
protected override void ConfigureModuleCatalog()
{
base.ConfigureModuleCatalog();
ModuleCatalog moduleCatalog = (ModuleCatalog)ModuleCatalog;
}
}
}

Now we will create Module with Name ModuleA

Create Project of type ClassLibrary with Name Prism.Sample.ModuleA

Add ViewModel Folder, inside that create AViewModel and the below code:

using System.ComponentModel;
namespace Prism.Sample.ModuleA.ViewModel
{
public class AViewModel : INotifyPropertyChanged
{
public AViewModel()
{
ModuleAContent = "This is Ribbon Region module(ModuleA loaded here), Basically we can use it to display menus";
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
private string _moduleAContent;
public string ModuleAContent
{
get => _moduleAContent;
set
{
_moduleAContent = value;
OnPropertyChanged(nameof(ModuleAContent));
}
}
}
}

Add View folder, inside that create UserControl with the name Aview and add the below code:

<UserControl x:Class="Prism.Sample.ModuleA.View.AView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:viewModel="clr-namespace:Prism.Sample.ModuleA.ViewModel"
mc:Ignorable="d" Height="100" Width="600">
<UserControl.Resources>
<viewModel:AViewModel x:Key="vm"/>
</UserControl.Resources>
<UserControl.DataContext>
<Binding Source="{StaticResource vm}"/>
</UserControl.DataContext>
<Grid>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"
Text="{Binding ModuleAContent}" FontWeight="Bold" TextWrapping="Wrap"
Height="60" Width="Auto" FontSize="20" Foreground="Orange" />
</Grid>
</UserControl>

In the above code we can see that we used MVVM design pattern and Bounded ModuleAContent Variable.

Install Prism framework using nuget command: nuget command: install-package Prism.UnityExtensions -v 4.0.0.0

Add AModule class and the below code. In the below code we inherited interface IModule and we have provided implementation for Initialize Method.

In Initialize Method we have registered, with Region name and AView, to indicate where Bootstrapper has to load this module in PrsimShell.

using Microsoft.Practices.Prism.Modularity;
using Microsoft.Practices.Prism.Regions;
using Prism.Sample.ModuleA.View;
namespace Prism.Sample.ModuleA
{
public class AModule : IModule
{
private readonly IRegionViewRegistry _regionViewRegistry=null;
public AModule(IRegionViewRegistry regionViewRegistry)
{
_regionViewRegistry = regionViewRegistry;
}
public void Initialize()
{
_regionViewRegistry.RegisterViewWithRegion("RibbonRegion", typeof(AView));
}
}
}

In BootStrapper.cs configure the developed module in ConfigureModuleCatalog like below.

protected override void ConfigureModuleCatalog()
{
base.ConfigureModuleCatalog();
ModuleCatalog moduleCatalog = (ModuleCatalog)ModuleCatalog;
moduleCatalog.AddModule(typeof(AModule));
}

Similarly we need to add ModuleB, ModuleC, ModuleD. For your reference I have uploaded Solution Project. PFA solution for reference to implement ModuleB, ModuleC, Module D.

At the end BootStrapper looks like below:

using Microsoft.Practices.Prism.Modularity;
using Microsoft.Practices.Prism.UnityExtensions;
using Prism.Sample.ModuleA;
using Prism.Sample.ModuleB;
using Prism.Sample.ModuleC;
using Prism.Sample.ModuleD;
using System.Windows;
namespace Prism.Sample.Demo
{
public class BootStrapper : UnityBootstrapper
{
protected override DependencyObject CreateShell()
{
return Container.TryResolve<PrismShell>();
}
protected override void InitializeModules()
{
base.InitializeModules();
Application.Current.MainWindow = (PrismShell)Shell;
Application.Current.MainWindow.Show();
}
protected override void ConfigureModuleCatalog()
{
base.ConfigureModuleCatalog();
ModuleCatalog moduleCatalog = (ModuleCatalog)ModuleCatalog;
moduleCatalog.AddModule(typeof(AModule));
moduleCatalog.AddModule(typeof(BModule));
moduleCatalog.AddModule(typeof(CModule));
moduleCatalog.AddModule(typeof(DModule));
}
}
}

Below is the snap of the end result window.

Summary

In this article we understood about developing Prism applications using Prism + WPF + MVVM.

4 Comments

Join the conversation! Your thoughts help the community grow.

Saf Sied6y ago
In your App.xaml.cs file the following line gives the error: The type or namespace could not be found. Are you missing a using directive or an assembly reference: BootStrapper bootstrapper = new BootStrapper(); I have installed the latest package Install-Package Prism.Unity.Extensions -Version 7.2.0.1054. Please help.
- Nagaraj M6y ago
  hi Saf, please try with install-package Prism.UnityExtensions -v 4.0.0.0 . mean while i will try to install 7.0.x and get back to you
Naveen H6y ago
Nice Article.
Karthik R6y ago
Good info about the prism application thank you for the article