Basic Prism Application for Beginners. Part2

Basic Prism Application for Beginners. Part2

(https://msdn.microsoft.com/en-us/library/gg406140.aspx)

Continue from the Part 1.

Lets Start Adding the module to our Report Designer Solution

(1) Add a WPF User Control Library as shown below. Name it RibbonBarModule

(2) Remove UserControl1.xaml and Add three Folders Views, ViewModels and  Models.

(3)The Solution Explorer will like this

(4) Right Click on Project and Select Manage NuGet Package and Prism  as given below

(5)Install UnityExtensions by using command install-package prism.unityextensions 
Make sure that the project is changed in the Package Manager Console

(6) Add New UserControl in Views Folder and Name it RibbonBarView

(7) Now Add RibbonBarViewModel in ViewModels Folder. Add RibbonBarModel in Models Folder.(8) Add Interface IRibbonBarView in Views, IRibbonBarViewModel in ViewModels and IRibbonBarModel in IRibbonBarModel in Models folder.(9) inherit RibbonBarView from IRibbonBarView the code will look like thispublic partial class RibbonBarView :UserControl,IRibbonBarView    {        public RibbonBarView()        {            InitializeComponent();        }    }

Inherit RibbonBarViewModel from IRibbonBarViewModel and Inherit RibbonBarModel from IRibbonBarModel respectively the code will like as shown below
 class RibbonBarViewModel:IRibbonBarViewModel
    {
    }
class RibbonBarModel:IRibbonBarModel
    {
    }
 The purpose of inheritance here is to expose the required functionality only,

The Solution will look like this 

 (10) Now add a RibbonBarModule class.like shown below (At Ribbon Bar Module Project level)

(11) Here comes the Magic Derive ur RibbonBarModule.cs Class from IModule which is in Namespace Microsoft.Practices.Prism.Modularity;
Copy the given code given below

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.Practices.Prism.Modularity;
namespace RibbonBarModule
{
    class RibbonBarModule:IModule
    {
        public void Initialize()
        {
        }
    }
}

(12) Time to Configure Module Catalog in BootStrapper Class . Add Reference of RibbonBarModule Project in ReportDesigner Project
In BootStrapper.cs file replace with the following code.

using System;
using System.Windows;
using Microsoft.Practices.Prism.Modularity;
using Microsoft.Practices.Prism.UnityExtensions;
using Microsoft.Practices.Unity;
namespace ReportDesigner
{
    class Bootstrapper : UnityBootstrapper
    {
        protected override System.Windows.DependencyObject CreateShell()
        {
            return new Shell();
        }
        protected override void InitializeShell()
        {
            base.InitializeShell();
            Application.Current.MainWindow = (Window)this.Shell;
            Application.Current.MainWindow.Show();
        }
        protected override IModuleCatalog CreateModuleCatalog()
        {
            return base.CreateModuleCatalog();
        }
        protected override void ConfigureModuleCatalog()
        {
            base.ConfigureModuleCatalog();
            ModuleCatalog moduleCatalog = (ModuleCatalog)this.ModuleCatalog;
            moduleCatalog.AddModule(typeof(RibbonBarModule.RibbonBarModule));
            moduleCatalog.AddModule(typeof(ContentModule.ContentEditorModule));
            moduleCatalog.AddModule(typeof(ToolBoxModule.ToolBoxModule));
            moduleCatalog.AddModule(typeof(PropertiesModule.PropertiesModule));
        }
    }
}

In the above code the ConfigureModuleCatalog is the function where we add all the modules that we want to load in application. Modules are inherited from IModule interface How views will be displayed will be shown later.
(13) The application should be successfully build till this point.
(14) Before Moving Further Lets Talk about RegionManager
RegionManager is Responsible for Creating Regions for controls . The Regions will hold the views. The UnityBootstrapper Class (we inherit our Bootstrapper class from it) has one instance of RegionManager class by default. We can get the reference of Region Manager Class by Dependency Injection (Here we are using Constructor Injection)
(15) In RibbonBarModule class

create a readonly variable like this
 private readonly IRegionManager regionManager;

create a parameterized constructor constructor like given below
 public RibbonBarModule(IRegionManager regMan)        {            regionManager = regMan;        }

(16) Now in Initialize Module Method register your view. Copy the Given Code Given below in RibbonBarModule

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.Practices.Prism.Modularity;
using Microsoft.Practices.Prism.Regions;
using RibbonBarModule.Views;
namespace RibbonBarModule
{
    public class RibbonBarModule:IModule
    {
        private readonly IRegionManager regionManager;
        public void Initialize()
        {
            regionManager.RegisterViewWithRegion("RibbonRegion", typeof(RibbonBarView));
        }
        public RibbonBarModule(IRegionManager regMan)
        {
            regionManager = regMan;
        }
    }
}

(17) For convenience,  Copy this XAML in RibbonBarView.xaml

<UserControl x:Class="RibbonBarModule.Views.RibbonBarView"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="20" d:DesignWidth="600">
    <Menu>
        <MenuItem Header="_File">
            <MenuItem Header="_New"></MenuItem>
            <MenuItem Header="_Open"></MenuItem>
            <MenuItem Header="_Save"></MenuItem>
            <MenuItem Header="_Exit"></MenuItem>
        </MenuItem>
        <MenuItem Header="_Home"></MenuItem>
        <MenuItem Header="_Insert"></MenuItem>
        <MenuItem Header="_Design"></MenuItem>
        <MenuItem Header="_PageLayout"></MenuItem>
        <MenuItem Header="_References"></MenuItem>
    </Menu>
</UserControl>

(18) For convenience copy this XAML in Shell.xaml

<Window x:Class="ReportDesigner.Shell"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        xmlns:prism="http://www.codeplex.com/prism"        Title="Report Designer" Height="Auto" Width="Auto">    <DockPanel LastChildFill="True">        <ItemsControl  prism:RegionManager.RegionName="RibbonRegion" Name="RibbonRegion" DockPanel.Dock="Top" Height="100" Background="AntiqueWhite"></ItemsControl>        <ItemsControl  prism:RegionManager.RegionName="StatusBarRegion" Name="StatusBarRegion" DockPanel.Dock="Bottom" Height="50" Background="Aqua"></ItemsControl>        <ItemsControl  prism:RegionManager.RegionName="ToolBarRegion" Name="ToolBarRegion" DockPanel.Dock="Left" Width="200" Background="Azure"></ItemsControl>        <ItemsControl  prism:RegionManager.RegionName="PropertiesRegion" Name="PropertiesRegion" DockPanel.Dock="Right" Width="200" Background="Beige"></ItemsControl>        <ItemsControl  prism:RegionManager.RegionName="DesignerRegion" Name="DesignerRegion"></ItemsControl>    </DockPanel></Window>

 We have created regions as one shown in previous article.
(19) Hit F5 and the following should display.

(20) Now like the above we will create other modules and load  view in other regions as well.

Also we will load different views at run time in the coming articles.