WPF Prism Example

Step by step - A very simple example using WPF Prism 4

[This example is not a tutorial for Prism or dependance injection. It is assumed that you have good understanding of dependance injection, IoC and why we need them. Also you know the need for MEF as oppose to Unity. There are plenty of documentation available on these topics, please feel free to go over them. This example is for anyone with understanding of above topics, who would like to put together a quick and simple structure using Prism to experiment various things or for the developers who have moved from Winform to WPF or used Spring.NET or other dependance injection mechanism before.]


Section 1

Step 1.1

Download and install Prism in your desktop. You can download from official Microsoft site here:
http://www.microsoft.com/en-us/download/details.aspx?id=4922



Step 1.2

Create a WPF project from your Visual Studio 2010.
First thing you do is - double click the App.xaml file and get rid of this 

           StartupUri="MainWindow.xaml"   // remove this part for Prism based application

Delete MainWindow.xaml and MainWindow.xaml.cs from project if they were automatically created when the project was created. Since for Prism application you will start the application by running the prism bootstrapper, therefore this startup uri is not needed.


Step 1.3

Add Prism related DLL references into your project. Add the following by browsing to where you installed Prism.

      Microsoft.Practices.Prism
      Microsoft.Practices.Prism.MefExtension
      Microsoft.Practices.ServiceLocation

Addiationally add the following DLL reference as well

     System.ComponentModel.Composition
     


Create subdirectories

     ViewModels
      Views


ShellWindow class 

Under Views folder, add a new Window called ShellWindow (or call whatever you like). This will be your main shell window which boorstrapper will bring up. Also which will host all modules later that will be added by Prism MEF (Microsoft Entensibility Framework).

For Shell Window to be "export" enabled, add an attribute called  [Export] above ShellWindow class declaration.

[Export]

            public partial class ShellWindow : Window



PrismExampleBootstrapper class

Add a new class file called PrismExampleBootstrapper.cs in your project and inherit this class from MefBootstrapper class.

Implement abstract method of MefBootstrapper called CreateShell

protected override System.Windows.DependencyObject CreateShell()

        {

            return this.Container.GetExportedValue<ShellWindow>();

        }

Include your own assembly in the aggregate catalog so that export finds it.

protected override void ConfigureAggregateCatalog()

        {

            base.ConfigureAggregateCatalog();

            this.AggregateCatalog.Catalogs.Add(new

AssemblyCatalog(typeof(PrismExampleBootstrapper).Assembly));

        }

 

Override InitializeShell method to show your shell window as the main window.

protected override void InitializeShell()

        {

            base.InitializeShell();

            Application.Current.MainWindow = (ShellWindow)this.Shell;

            Application.Current.MainWindow.Show();

        }

Step 1.4

On App.xaml.cs inside the OnStartup method add code to instantiate your own bootstrapper (which is inherited from MefBootstrapper as shown above) and run.

protected override void OnStartup(StartupEventArgs e)

        {

            base.OnStartup(e);

            var bootstrapper = new PrismExampleBootstrapper();

            bootstrapper.Run();

        }

Now from Visual Studio, run the application and your first application show come up Prism based bootstrapper and your shell.



In section 2 we will no start adding modules and configurations to load and run components.


Section 2

Section 2.1

Now update your shell window. Let us define prism region there. We are going to use Microsoft Ribbon for WPF. Ribbon has nothing to do with Prism or MEF, however we are going to use this control, so if you do not have this ribbon installed, you cam donwload from Microsoft site and install it. Or if you have any third party UI components like DevExpress or Infragistics installed you can use the ribbon control from there as well.


Open up you ShellWindow.xaml file that we created in section 1 and repplace of the the XAML like below, where we added a ribbon control and bottom section we divided into two grid. Only Prism related part here is that we have named three placed as prism regions (please see lines in bold).

<Window x:Class="PrismExample.Views.ShellWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:prism="clr-namespace:Microsoft.Practices.Prism.Regions;assembly=Microsoft.Practices.Prism"       

        xmlns:ribbon="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon"

        Title="Simple Prism Exmaple" Height="400" Width="900"

        >

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"></RowDefinition>

            <RowDefinition Height="*"></RowDefinition>

        </Grid.RowDefinitions>

       

        <ribbon:Ribbon Grid.Row="0" Height="100" HorizontalAlignment="Stretch" Name="ribbon1" VerticalAlignment="Top" prism:RegionManager.RegionName="RibbonRegion">

           

        </ribbon:Ribbon>

        <Grid Grid.Row="1">

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="1*"></ColumnDefinition>

                <ColumnDefinition Width="4*"></ColumnDefinition>

            </Grid.ColumnDefinitions>

            <ItemsControl Name="NavigatorRegion" prism:RegionManager.RegionName="NavigatorRegion" Grid.Column="0"></ItemsControl>

            <GridSplitter Grid.Column="1" HorizontalAlignment="Left" Width="2" ></GridSplitter>

            <ContentControl Name="WorkspaceRegion" prism:RegionManager.RegionName="WorkspaceRegion" Grid.Column="1"></ContentControl>

           

        </Grid>

    </Grid>

</Window>