Introduction

Prism (Composite Application Guidance for WPF and Silverlight) is designed to build applications in WPF and Silverlight that have a single code base. It helps to develop the client application in a modular fashion so that complexity of a large application can be divided in to simpler modules.

Note: Please download Composite Application Library (CAL) from http://compositewpf.codeplex.com/releases

Architecture: Following diagram shows basic architecture that I am going to explain:

1.gif
  1. App.XAML: Call BootStrapper on Application_Startup
  2. BootStrapper: This is a class file that calls Shell (Shell.XAML) and so creates catalogue of module.
  3. Shell: This is like a Master Page having regions.
  4. Region: It is like placeholders to register views.
  5. View: This is XAML file having User Interface
  6. Module: Each module can have one or more View(s) which are registered to Region (in the Shell) through RegionManager
Step 1: Create Silverlight Application

Create Silverlight application named "PrismSample" and rename MainPage.XAML to Shell.XAML

2.gif
Step 2: Add CAL references to Silverlight Application

Add following References to PrismSample project
  • Microsoft.Practices.Composite.dll
  • Microsoft.Practices.Composite.Presentation.dll
  • Microsoft.Practices.Composite.UnityExtensions.dll
  • Microsoft.Practices.ServiceLocation.dll
  • Microsoft.Practices.Unity.Silverlight.dll
3.gif

Step 3: Create Bootstrapper class

In this step we creating following scenario

4.gif
  • Add Bootstrapper.cs class file to PrismSample project.
  • Implement UnityBootstrapper.
  • Override CreateShell methods : Set startup object as Shell.XAML.
  • Override CreateModuleCatalog methods. For now leave code as it is.
5.gif

Step 4: Change App.xaml.cs

In this step we creating following scenario

6.gif
In the Application_Startup event call Bootstrapper class to run it.

7.gif
Step 5: Add Silverlight Application library project named "PrismModules"
  • Add Silverlight library project and name it "PrismModules"
  • Create folder Views
  • Add MainView.XAML and MenuView.XAML file to Views folder
  • Add MainModule.cs and MenuModule.cs file to the project
8.gif

Step 6: Change MenuView.XAML and MainView.XAML

In the step 6, 7, 8 we are creating following scenario

9.gif
Add TextBlock to MenuView.XAML to display text "Menu Region".

10.gif
Similarly change MainView.XAML to show Textblock "Main Region".

Step 7: Change MenuModule.cs and MainModule.cs
  • In the MenuModule.cs class implement IModule and Implement Initialize method of IModule
  • Add property RegionManager of type IRegionManager
  • Set RegionManager in the constructor
  • In the Initialize method, register MenuView to MenuRegion as shown below.
11.gif

Similarly follow steps for MainModule.cs

Step 8: Change Shell.XAML to add Region
  • In the Shell.XAML file add ItemsControl for MenuRegion and MainRegion
  • In the each ItemsControl add Attached property RegionManager.RegionName and set value to MenuRegion and MainRegion for respective ItemsControl
12.gif

Step 9: Change CreateModuleCatalog method in Bootstrapper.cs

In this step we are creating following scenario

13.gif
In the CreateModuleCatalog method, add MenuModule and MainModule to ModuleCatalog
14.gif

Step 10: Run the application

Finally run the application to see Menu and Main region in the Shell

15.gif

Conclusion: In this article I have tried to explain the basic components of Prism and how they are wired to each other to create Silverlight UI.