Prism Walkthrough - Part 3: Add Views to Regions

Source code of this part can be downloaded here.

In this part we’ll create our first views and display them inside their regions.  The views are the controls that display our content.  Because our application is build with modularity in mind it’s the Module and not the Shell that should define which views need to be added to the regions. 

 

 

1) We add a folder “Views” to our Module project and 4 views inside this new folder: 

  • CreateFileView:  One of the views that can be displayed in the MainRegion
  • CreatFolderView: Another view for the MainRegion
  • MenuView: Control that will be responsible to Add views to the MainRegion
  • StatusBar: Control that will be added to the StatusBarRegion

 

 

To add views to our regions we use the prism region manager service.  The region manager service is responsible for maintaining a collection of regions and creating new regions for controls.  Typically, we interact directly with region manager service to locate regions in a decoupled way through their name and add views to those regions. By default, the UnityBootstrapper base class registers an instance of this service in the application container. This means that we can obtain a reference to the region manager service in our application by using dependency injection.

We use constructor dependency injection to gather an instance of the RegionManager and store it in a local field and it’s  in the Initialize method of our CoreModule class that we implement logic to add the initial views to our Regions. 

 

2) Modify the CoreModule class like:

   1:  public class CoreModule : IModule
   2:  {
   3:      private readonly IRegionManager regionManager;
   4:   
   5:      public CoreModule(IRegionManager regionManager)
   6:      {
   7:          this.regionManager = regionManager;
   8:      }
   9:   
  10:      public void Initialize()
  11:      {
  12:          this.RegisterViewsWithRegions();
  13:      }
  14:   
  15:      protected virtual void RegisterViewsWithRegions()
  16:      {
  17:          this.regionManager.RegisterViewWithRegion(RegionNames.MenuRegion, typeof(MenuView));
  18:          this.regionManager.RegisterViewWithRegion(RegionNames.StatusbarRegion, typeof(StatusbarView));
  19:      }
  20:  }

 

 

To overcome magic constants in our code  we used a class containing all our region names.

 

3) Add this RegionNames class to your Infrastructure Library:

   1:  namespace PrismWalkthrough.Infrastructure
   2:  {
   3:      public class RegionNames
   4:      {
   5:          public const string MainRegion = "MainRegion";
   6:          public const string MenuRegion = "MenuRegion";
   7:          public const string StatusbarRegion = "StatusbarRegion";
   8:      }
   9:  }

 

 

Finally to see something displayed in our Menu and StatusBar we need to add some content inside these controls:

 

4) Modify the MenuView.xaml:

<StackPanel>
    <Menu Name="menu1" Background="Transparent" >
        <MenuItem Header="File" >
            <MenuItem Header="New"  CommandParameter="CreateFile" />
            <MenuItem Header="Folder" CommandParameter="CreateFolder"  />
        </MenuItem>
    </Menu>
</StackPanel>

 

5) Modify the StatusBarView.xaml:

<Grid>
    <TextBlock Text="This is the StatusBar" />
</Grid>

 

When pressing F5 you should see:

 

 

kick it on DotNetKicks.com

Prism Walkthrough - Part 2: Define The Regions

Define the Regions

 

Our shell will contain 3 regions:

  • Menu Region: contain a Menu that is responsible to load views in the Main Region
  • Main Region: region that will load the workspace controls – these are the views that will handle the application features. In our application only one view at a time can be loaded in the Main Region.
  • Status Bar Region: provide info about current application state 

 

These regions are the placeholders for the controls defined in our Modules.  Our application will contain only one Module: the CoreModule but this application can easily be extended by adding new modules.   In our application the regions are defined as ItemsControls  in the Shell.xaml file and can be accessed in a decoupled way by their names; they support dynamically adding or removing views at run time.

  1. To add the regions in the Shell window add the following namespace definition to the root Window element. You need this namespace to use an attached property for regions that is defined in the Composite Application Library:  xmlns:cal=http://www.codeplex.com/CompositeWPF.
  2. Replace the Grid in the Shell by the following xaml:
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="35" />
            <RowDefinition Height="*" />
            <RowDefinition Height="35" />
        </Grid.RowDefinitions>
        <ItemsControl Name="MenuRegion" cal:RegionManager.RegionName="MenuRegion" 
    VerticalAlignment="Top" Grid.RowSpan="2" Height="26" HorizontalAlignment="Left" Background="Transparent" Margin="0,12,0,0"/>
    <Grid Margin="4,4,4,4" Grid.Row="1"> <Border Background="GhostWhite" BorderBrush="LightGray"
    BorderThickness="1" CornerRadius="5" Margin="0,0,0,0"> <ItemsControl Name="MainRegion"
    cal:RegionManager.RegionName="MainRegion" Margin="4" Height="291" />
    </Border> </Grid> <Border Grid.Row="2" > <ItemsControl Name="StatusbarRegion"
    cal:RegionManager.RegionName="StatusbarRegion" Background="Transparent" />
    </Border> </Grid>

 

Now you should be able to run the application and see this screen:

 

 

Next --->

kick it on DotNetKicks.com

 

 

 

 

Prism walkthrough - Part 1: Create The Shell

 

The client side application is made out of three assemblies:

  • The Shell (PrismWalkthrough.Shell)
  • The Modules ( PrismWalkthrough.Modules)
  • The Infrastructure (PrismWalkthrough.Infrastructure)

The foundation of the application is “The Shell”.  The Shell is the top-level window of an application based on the Prism Composite Application Library. This window is a place to host different user interface (UI) components that exposes a way for itself to be dynamically populated by others, and it may also contain common UI elements, such as menus and toolbars. The Shell window sets the overall appearance of the application.

 

In our application it’s the shell that is responsible to load the Modules. A module represents a set of related concerns. It can include components such as views, business logic, and pieces of infrastructure, such as services for logging or authenticating users. Modules are independent of one another but can communicate with each other in a loosely coupled fashion.  In this walkthrough our application will contain only one module: the CoreModule nevertheless the modular architecture enable us to easily extend the application adding new modules later on.

 

The Infrastructure Assembly is a shared library referenced by both the shell project and the module projects, and holds shared types such as constants, event types, entity definitions and interfaces.

 

Create the Solution

 

  1. Create the Shell project (PrismWalkthrough.Shell) application with Visual Studio-> File, Project, WPF Application.
  2. Add the Modules project and Infrastructure project –> File, Add New Project, Classlibrary
  3. The three projects should reference the Composite Application Library assemblies, add the following reference:
    (These assemblies can be found in the october 2009 Guidance of Prism -  you will need to compile the sample application)
    1.  
      • Microsoft.Practices.Composite.dll
      • Microsoft.Practices.Composite.Presentation.dll
      • Microsoft.Practices.Composite.UnityExtensions.dll
      • Microsoft.Practices.Unity.dll
      • Microsoft.Practices.ServiceLocation.dll
  4. Add a reference to the Modules and Shell projects referencing the Infrastructure assembly.
  5. Add a refrence to the Shell project referencing the Modules assembly.
  6. Add a refrence to the Modules and infrastructure that reference to the WindowsBase & PresentationCore and PresentationFramework –> Reference, Add, .Net tab.

 

Your solution should look like this:

 

 

 

 

Initialize the application

To enable modularity and dependency injection in our application we need to make some changes to the standard WPF application we just created.  First we setup a bootstrapper.  The bootstrapper is responsible for the initialization of the application, this is realized by overriding the CreateShell method.

  1. Add a new class on the root of the application containing the shell (PrismWalkthrough.Shell), name it Bootstrapper
  2. The Bootstrapper should inherit from Microsoft.Practices.Composite.UnityExtensions.UnityBootstrapper class and override the CreateShell method. You need to instantiate the Shell through the Unity conatiner and call his Show method
   1:  public class Bootstrapper : UnityBootstrapper
   2:  {
   3:      protected override System.Windows.DependencyObject CreateShell()
   4:      {
   5:          Shell shell = this.Container.Resolve<Shell>();
   6:          shell.Show();
   7:          return shell;
   8:      }
   9:  }

 

To be able to run the bootstrapper at least one module should be registered in our application. 

  1. Add a class to the PrismWalkthrough.Module and name it CoreModule.cs
  2. This class should implement the IModule interface:
   1:  namespace PrismWalkthrough.Modules
   2:  {
   3:      public class CoreModule : IModule
   4:      {
   5:          public void Initialize()
   6:          {
   7:              
   8:          }
   9:      }
  10:  }

 

Through the bootstrapper you must configure which Modules are available in our Shell. You need to register at least one module in your bootstrapper.

  1. Override the InitializeModules in the bootstrapper:
   1:  protected override void  InitializeModules()
   2:  {
   3:      IModule coreModule = this.Container.Resolve<CoreModule>();
   4:      coreModule.Initialize();
   5:  }

 

The WPF Application class needs to execute the bootstrapper by calling his Run method. 

  1. First you should delete the StartupUri in the App.Xaml file.
    <Application x:Class="PrismWalkthrough.Shell.App"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    </Application>
  2. Override the OnStartup method in the App.cs file:
   1:  protected override void OnStartup(StartupEventArgs e)
   2:  {
   3:      base.OnStartup(e);
   4:      Bootstrapper bootstrapper = new Bootstrapper();
   5:      bootstrapper.Run();
   6:  }

 

Now you should be able to run you application, you should see a white screen.

Next --->