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”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
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”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
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”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
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
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”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”>
<Grid x:Name=”LayoutRoot” Background=”White”>
<TextBlock>“Hello, I am here, Digg it””</TextBlock>
</Grid>
</UserControl>
You should have
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
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)
Ira Lukhezo's blog 
Pingback: Building a Composite WPF and Silverlight Application with Prism - Part 3 « Ira Lukhezo’s blog
Pingback: Building a Composite WPF and Silverlight Application with Prism - Part 4 « Ira Lukhezo’s blog
Your simplicity in explaining things amazes me 🙂 !