Building a Composite WPF and Silverlight Application with Prism – Part 2


In Building a Composite WPF and Silverlight Application with Prism – Part 1 I laid down the foundations of the composite application including

  • Configuring and connecting to Prism
  • Creating a Shell for the Silverlight application
  • Connecting that Shell using a Bootrapper class
  • Adding a Digg module and adding it to the ModuleCatalog

In this second tutorial in the series we will further develop the DiggModule by adding a View, what should be clear is that this architecture is applicable for your own custom application development needs. Prism ostensibly demonstrates the true power of WPF and Silverlight, in that it is a framework that can target both web and smart client applications, using the same modules and code.

This tutorial is in both C# and Visual Basic, but when creating projects in Visual Studio, the images I may use may be C# templates for example, but you should be able to do exactly the same in Visual Basic and vica-versa. It avoids the repetition of posting two images with “Open C# Silverlight Application” and “Open Visual Basic Application”, when the Visual Studio templates are the same – bar the language. I will however, post code samples in both languages

Open Shell.xaml and you should have the following standard XAML code

<UserControl x:Class=”NewsAggregator.Shell.Shell”

   xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

   xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

   Width=”400″ Height=”300″>

    <Grid x:Name=”LayoutRoot” Background=”White”>

    </Grid>

</UserControl>

To restyle the shell, add the following markup

<UserControl xmlns:basics=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls” x:Class=”NewsAggregator.Shell.Shell”

   xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

   xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

            Width=”300″ Height=”400″>

    <UserControl.Resources>

        <Style x:Key=”TopGrid” TargetType=”Grid”>

            <Setter Property=”Background” Value=”#FF5C7590″ />

        </Style>

    </UserControl.Resources>

    <Grid Style=”{StaticResource TopGrid}”>

        <Grid.RowDefinitions>

            <RowDefinition Height=”auto”/>

            <RowDefinition Height=”*”/>

        </Grid.RowDefinitions>   

    </Grid>

</UserControl>

Here the background colour is set, and a couple of grid rows are added. Now add a ContentControl whose purpose is to be a container for other controls. We will be adding a twitter client as well later on, so a tab control (you can drag it from the toolbox) is needed to switch between the Digg service and the Twitter on. Both controls are assigned to grid rows. Add the following below the end Grid.RowDefinitions tag

        <ContentControl Grid.Row=”0″ Margin=”2″ />

        <basics:TabControl Grid.Row=”1″ Margin=”3″/>

The following controls will act as containers, that any module can insert a view into i.e. The DiggModule and TwitterModule need to be added so these controls can show them. One approach, is for each module to communicate with the Shell directly, and know which control it needs to push things into, but that is tightly coupling the module to the shell.

Prism has a feature called a Region (you can think of a “Region” as a named place holder for where Views are going to be placed), and Modules can find that region by name, and push things into them. to access this in your XAML, you need to declare this namespace at the top

   xmlns:Regions=”clr-namespace:Microsoft.Practices.Composite.Presentation.Regions;assembly=Microsoft.Practices.Composite.Presentation”

Which will allow you to add a Region to a control. In the following markup I have added a SearchRegion and a ResultsRegion so when the Shell is loaded Prism will find these regions and register them in a way that the modules will be able to find them. The following the the complete markup you should have in Shell.xaml

<UserControl xmlns:basics=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls” x:Class=”NewsAggregator.Shell.Shell”

   xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

   xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

    xmlns:Regions=”clr-namespace:Microsoft.Practices.Composite.Presentation.Regions;assembly=Microsoft.Practices.Composite.Presentation”>

    <UserControl.Resources>

        <Style x:Key=”TopGrid” TargetType=”Grid”>

            <Setter Property=”Background” Value=”#FF5C7590″ />

        </Style>

    </UserControl.Resources>

    <Grid Style=”{StaticResource TopGrid}”>

        <Grid.RowDefinitions>

            <RowDefinition Height=”auto”/>

            <RowDefinition Height=”*”/>

        </Grid.RowDefinitions>

        <ContentControl Regions:RegionManager.RegionName=”SearchRegion” Grid.Row=”0″ Margin=”2″ />

        <basics:TabControl Regions:RegionManager.RegionName=”ResultsRegion” Grid.Row=”1″ Margin=”3″>

        </basics:TabControl>

    </Grid>

</UserControl>

Now that some regions are available, create a View in the Digg module. to do this add a new Silverlight User Control called DiggSearchResultsView.xaml

DiggSearch

Add a textblock with some text in it (this is so it can be view in the shell) and delete the Width and Height properties

<UserControl x:Class=”NewsAggregator.Digg.DiggSearchResultsView”

   xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

   xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”&gt;

    <Grid x:Name=”LayoutRoot” Background=”White”>

        <TextBlock>“Hello, I am here, Digg it””</TextBlock>

    </Grid>

</UserControl>

You should have

Hello

Now that this basic View is completed it now needs to be added to a Region. There are several ways to do this, including View Discovery or View Injection.

View Discovery

To get a hold of regions in Prism you need access to the Region Manager Service, and the easiest was to access it, is via it being injected in the constructor. In the DiggModule, add a constructor, and then add a IRegionManager to this. In the Initialize method, you can then indicate to the Region Manager, the name and type of View you wish to pass.

Visual Basic

Imports Microsoft.Practices.Composite.Modularity

Imports Microsoft.Practices.Composite.Regions

    Public Class DiggModule

        Implements IModule

        Private regionManager As IRegionManager

        Public Sub New(ByVal regionManager As IRegionManager)

            Me.regionManager = regionManager

        End Sub

    Public Sub Initialize() Implements Microsoft.Practices.Composite.Modularity.IModule.Initialize

        Me.regionManager.RegisterViewWithRegion(“ResultsRegion”, GetType(DiggSearchResultsView))

    End Sub

    End Class

 

C#

using Microsoft.Practices.Composite.Modularity;

using Microsoft.Practices.Composite.Regions;

namespace NewsAggregator.Digg

{

    public class DiggModule : IModule

    {

        private IRegionManager regionManager;

        public DiggModule(IRegionManager regionManager)

        {

            this.regionManager = regionManager;

        }

        #region IModule Members

        public void Initialize()

        {

            this.regionManager.RegisterViewWithRegion(“ResultsRegion”, typeof(DiggSearchResultsView));

        }

        #endregion

    }

}

If you run the program you should have the following

InternetExplorer

As you can see the view has shown up in the Region.

That wraps up this second tutorial. In the third tutorial, we will start to interact with data, and demonstrate the Model View View Model (MVVM) design pattern.

The complete source code for the 4 part series is available here (Download the WPF Silverlight Prism Folder)

3 thoughts on “Building a Composite WPF and Silverlight Application with Prism – Part 2

  1. Pingback: Building a Composite WPF and Silverlight Application with Prism - Part 3 « Ira Lukhezo’s blog

  2. Pingback: Building a Composite WPF and Silverlight Application with Prism - Part 4 « Ira Lukhezo’s blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s