Silverlight: OutlookBar, Prism and TransitionControl

With this post, I'll show you a step by step approach on how to integrate RadOutlookBar with Prism. To spice thing a little bit, the transitions between the different Prism modules will be handled by RadTransitionControl.

Start off by creating a new Silverlight solution. Name the Silverlight application Prism.Shell and the Web project - Prism.Web

 

Organize the Solution Explorer a little bit by adding 3 solution folders.

 

Right-click on the Modules solution folder and add 2 new Silverlight applications. These applications will be the modules of our Prism application. Name them Prism.Module1 and Prism.Module2. Also, make sure they output their xap files in Prism.Web

 

Proceed by adding the necessary Prism binaries for each module.

 

Now delete MainPage.xaml and App.xaml from each module, since they won't be necessary.

 

In each module, add a new folder called Views and in that folder add a new Silverlight User Control - Module1View for Module1 and Module2View for Module2.

 

It is up to you to decide what each view will contain. For the sake of the example, each view will display just a single image.

 

The next step is to create the entry point of each module. In this case, the entry point is a class called InitModule. The most important part of this class is the Initialize method that registers a view with a region.

 

That is more or less on the modules. Now it is time to deal with the Prism.Shell project. First of all, add references to the Prism binaries as well as Telerik.Windows.Controls.dll and Telerik.Windows.Controls.Navigation.dll:

 

Next, remove MainPage.xaml from Prism.Shell and add a new UserControl called Shell and leave it as it is for the moment.

 

The following step is probably one of the most important. Since we will be loading our modules from XAML file, we have to create such file describing the modules. Create a new xaml file and call it ModulesCatalog.xaml.

 

As any Prism application you need to have a Bootstrapper. Add a new class and call it Bootstrapper.

Go to App.xaml.cs and run the bootstrapper from the Application_Startup event handler.

 

Now it is time to add the OutlookBar that will show the modules. Go to Shell.xaml and add the following OutlookBar definition.

 

In the Shell.xaml.cs code-behind, get a reference to the region manager and module manager in the constructor. Also, in the constructor, you can define the transition of the transition controls.

 

Finally, the code that makes the transition between the modules.

 

More or less, this is it. For further reference, please have a look at the sample project.

Telerik OutlookBar and Transition controls are available for download as part of RadControls for Silverlight/WPF at:

RadControls for Silverlight - Download Trial

RadControls for WPF - Download Trial

To check the online demos, please follow the link below:

Telerik TileView for Silverlight

Telerik TileView for WPF