Introduction To PRISM

I have also mentioned how to solve errors most people have faced when starting with PRISM.

Prerequisites for this Project

Visual Studio 2010 onwards and Active Internet Connection (To download PRISM).

In this project I have used Visual Studio 2015.

What is PRISM?

Prism provides guidance to help you more easily design and build, flexible, and easy-to-maintain client business apps that run on Windows Runtime, Windows Presentation Foundation (WPF) desktop, Silverlight, or Windows Phone . These apps may start small and evolve over time.

Using design patterns that embody important architectural design principles, such as separation of concerns and loose coupling, Prism helps you to design and build apps that embody significant presentation and business logic that typically interact with back-end systems and services and, using a layered architecture, may be physically deployed across multiple tiers. It is expected that the app will evolve significantly over its lifetime in response to new requirements and business opportunities. In short, these apps are "built to last" and "built for change." Apps that do not demand these characteristics may not benefit from using Prism.
-MSDN

The article is divided into three parts:

• PART 1: Install PRISM and create a PRISM window.
• PART 2: Create UI Regions.
• PART 3: Create Modules and map them to predefined regions.

Legend:

• Focus of the step is highlighted in YELLOW.
• Error that could occur are in RED.
• Code and XAML starts with highlighted GREEN.

PART 1: Install PRISM and create a PRISM window

• Create a new WPF Application : Name = IntroToPrism
  
  
  
  
• Remove the default MainWindow.xaml
  
  
  
  
• Remove StartupUri="MainWindow.xaml" from the App.xaml file.
  
  
  
  
• Go to Tools - Nuget Package Manager - Package Manager Console.
  
  
  
  
• First we will add Prism.
  
  
• Type Install-Package Prism.Wpf -Version 6.1.0 and press enter.
  
  
  
  
• Then add Prism.Unity Package.
  
  Type Install-Package Unity -Version 2.1.505.2. (Note: Specific versions are required)
  
  
  
  
• Then add Unity.Extensions,
  
  Type Install-Package Prism.UnityExtensions -Version 4.1.0,
  
  
  
  When using certain versions they may throw error asking for a specific version of Unity , to resolve add the requested version of Unity. Here I have used 2.1.505.2.
  
  
• Now add a new WPF Window and name it PrismAppShell.xaml.
  
  
  
  
• Create a new class Bootstrapper.cs.
  
  
  
  
• Then derive the Bootstrapper class from UnityBootstrapper class, i.e. UnityBootstrapper is now the base class.
  
  Override two methods of UnityBootstrapper in Bootstrapper class.
  
  InitializeModules
  
  ConfigureModuleCatalog
  
  Implement the abstract method CreateShell in Bootstrapper class.
  
  You may have to add the following using statements also.

Code

• Now Goto - App.xaml.cs,
  
  
  
  
• Override method OnStartup.
  
  Code:
  
  1. public partial class App: Application
  2. {
  3. protected override void OnStartup(StartupEventArgs e)
  4. {
  5. base.OnStartup(e);
  6. BootStrapper bootstrapper = new BootStrapper();
  7. bootstrapper.Run();
  8. }
  9. }
• In the PrismAppShell.xaml add a Label with any Text.
  
  
• Now Run the program, your new window will show.
  
  
  
  

PART 2 : Create UI Regions

• Now in PrismAppShell.xaml - add namespace
  
  
  1. xmlns:prism="http://www.codeplex.com/prism"
     
     
  
  
  
• Now we will create three regions Header, Body and Footer.
  
  So add Content Controls to the window.
  
  Give grid a name LayoutRoot
  
  XAML:
  
  1. <Grid x:Name="LayoutRoot">
  2. <DockPanel LastChildFill="True" HorizontalAlignment="Stretch"
  3. Name="dockPanel1" VerticalAlignment="Stretch">
  4. <StackPanel Orientation="Horizontal" DockPanel.Dock="Top"
  5. Background="#FFCCD4F8" Height="25">
  6. <ContentControl prism:RegionManager.RegionName="HeaderRegion" Background="#FF93E094"></ContentControl>
  7. </StackPanel>
  8. <StackPanel Orientation="Horizontal" DockPanel.Dock="Left" Background="#FFD9E1EF" >
  9. <ContentControl prism:RegionManager.RegionName="BodyRegion" Background="#FFB5E4E1"></ContentControl>
  10. </StackPanel>
  11. <StackPanel Orientation="Horizontal" DockPanel.Dock="Bottom" Background="#FFD9E1EF" Height="25">
  12. <ContentControl prism:RegionManager.RegionName="FooterRegion" DockPanel.Dock="Bottom" Background="#FFF4B0B0"></ContentControl>
  13. </StackPanel>
  14. </DockPanel>
  15. </Grid>
      
      
• Now run the application.
  
  
  
  In case you get any error on region, go to - References and delete Prism.dll
  
  
  
  NOTE: You can create any combination of regions.

PART 3: Create Modules and map them the predefined regions, ie Header, Body and Footer

• Add new project PRISMMODULES and delete MainWindows.xaml again,
  
  
  
  We will follow MVVM.
  
  
• Create a new folder View and add a new WPF window to the project and name it ToolbarWindow.xaml.
  
  
  
  
• Then create a new folder ViewModels and add a new class in it and name it ToolBarViewModel.cs.
  
  
• Then create a new folder Model and add a new class in it and name it ToolbarModule.cs.
  
  
  
  
• Goto the ToolbarModule.cs file and add the following code.
  
  Code:
  
  1. using Microsoft.Practices.Prism.Modularity;
  2. using Microsoft.Practices.Prism.Regions;
  3. using System;
  4. using System.Collections.Generic;
  5. using System.ComponentModel;
  6. using System.Linq;
  7. using System.Text;
  8. using System.Threading.Tasks;
  9. namespace PRISMMODULES.Model
  10. {
  11. public class ToolbarModule: IModule, INotifyPropertyChanged
  12. {
  13. private readonly IRegionViewRegistry regionViewRegistry = null;
  14. public ToolbarModule(IRegionViewRegistry regionViewRegistry)
  15. {
  16. this.regionViewRegistry = regionViewRegistry;
  17. }
  18. public void Initialize()
  19. {
  20. this.regionViewRegistry.RegisterViewWithRegion("HeaderRegion", typeof (ToolbarWindow));
  21. }
  22. public event PropertyChangedEventHandler PropertyChanged;
  23. }
  24. }
      
      
• Now go back to the BootStrapper.cs file and change method ConfigureModuleCatalog.
  
  
  1. protected override void ConfigureModuleCatalog()
  2. {
  3. base.ConfigureModuleCatalog();
  4. ModuleCatalog moduleCatalog = (ModuleCatalog)this.ModuleCatalog;
  5. moduleCatalog.AddModule(typeof(PRISMMODULES.Model.ToolbarModule));
  6. }
     
     
• Now if you try to run the application you may get an error, Window must be the root of the tree. Cannot add Window as a child of Visual. To solve this open the ToolbarWindow.xaml file and change the Window tag to UserControl and delete any Title property if any and also remove width and height.
  
  
• Now Goto ToolBarViewModel.cs and add the following for MVVM.
  
  Code:
  
  1. using PRISMMODULES.Model;
  2. using System;
  3. using System.Collections.Generic;
  4. using System.ComponentModel;
  5. using System.Linq;
  6. using System.Text;
  7. using System.Threading.Tasks;
  8. namespace PRISMMODULES.ViewModels
  9. {
  10. class ToolBarViewModel: INotifyPropertyChanged
  11. {
  12. public event PropertyChangedEventHandler PropertyChanged;
  13. private void RaisePropertyChanged(string propertyName)
  14. {
  15. if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
  16. }
  17. private ToolbarModule _TM;
  18. public ToolbarModule TM
  19. {
  20. get
  21. {
  22. return _TM;
  23. }
  24. set
  25. {
  26. _TM = value;
  27. RaisePropertyChanged("_TM");
  28. }
  29. }
  30. }
  31. }
• Now Goto ToolBarViewModel.cs.
  
  Add Resource to point to the ViewModel and assign it as DataContext to the UserControl.
  
  Now add a Toolbar to the Grid and give it width.
  
  Add two buttons to the toolbar.
  
  1. <UserControl x:Class="PRISMMODULES.ToolbarWindow"
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6. xmlns:local="clr-namespace:PRISMMODULES"
  7. xmlns:mods="clr-namespace:PRISMMODULES.ViewModels"
  8. mc:Ignorable="d"
  9. DataContext="{Binding Source= mainViewModelLocator}">
  10. <UserControl.Resources>
  11. <ResourceDictionary>
  12. <mods:ToolBarViewModel x:Key="mainViewModelLocator"></mods:ToolBarViewModel>
  13. </ResourceDictionary>
  14. </UserControl.Resources>
  15. <Grid>
  16. <ToolBar Width="200" >
  17. <Button Content="Item 1 Test"/>
  18. <Button Content="Item 2 Try"/>
  19. </ToolBar>
  20. </Grid>
  21. </UserControl>
      
      
• Now run the Application,
  
  

And Voila !

Definitions

Dependency objects

Dependency object is the base object for all WPF objects. All the UI Elements like Buttons TextBox etc and the content elements like Paragraph, Italic, Span etc all are derived from Dependency Object.

Dependency objects are used for WPF property system. By default, what ever the property system we have in DOT Net CLR is very basic. But Dependency properties provide lots of additional features/services to support Data Binding.

Once you create any property as a dependency property, then automatically you get following feature implemented for you. ie. Change Notification, Validation, Call Back, Inheritance, DataBinding, Styles, Default Values etc.

Dependency injection

Dependency injection is a software design pattern that implements inversion of control for resolving dependencies. A dependency is an object that can be used (a service). An injection is the passing of a dependency to a dependent object (a client) that would use it. The service is made part of the client's state. Passing the service to the client, rather than allowing a client to build or find the service, is the fundamental requirement of the pattern.