Decouple RadRibbonBar with Composite Silverlight (Prism)

Friday, March 26, 2010 by Miro Miroslavov | Comments 7

Let's suppose we want to decouple our application that uses RadRibbonBar as a main menu. Doing this using Composite Application Guidelines (Prism) is common scenario, so let's see how to achieve it.

We'll make our RadRibbonBar to serve as RegionManager (This is possible because RadRibbonBar inherits from ItemsControl) and the RadRibbonTabs as actual views that will be plugged-in.

So first we start with declaring RadRibbonBar as RegionManager :

<telerikRibbonBar:RadRibbonBar Regions:RegionManager.RegionName="RibbonRegion" />

Having Region we can focus on creating the actual views. Let's add new Silverlight class library project and name it SalesRibbonTab. Now we need the view itself, so add new class let's say Ribbon that inherits from RadRibbonTab.

Ribbon.xaml.cs

public partial class Ribbon : RadRibbonTab
{
    public Ribbon()
    {
        InitializeComponent();
    }
}

 

And associate xaml file with it.

Ribbon.xaml

<telerikRibbonBar:RadRibbonTab xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="CustomersRibbonTab.Ribbon"
        xmlns:telerikRibbonBar="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.RibbonBar"
        Header="Customers">
    <telerikRibbonBar:RadRibbonGroup Header="Cusomers">
        <telerikRibbonBar:RadRibbonButton Content="Add" />
        <telerikRibbonBar:RadRibbonButton Content="Remove" />
    </telerikRibbonBar:RadRibbonGroup>
</telerikRibbonBar:RadRibbonTab>

Ok. Now we need a class that will serve as the glue between the RegionManager and the actual View. It has to inherit from IModule and lets name it

SalesRibbonTabModule.cs

public class SalesRibbonTabModule : IModule
{
    private readonly IRegionManager regionManager;
 
    public SalesRibbonTabModule(IRegionManager regionManager)
    {
        this.regionManager = regionManager;
    }
 
    public void Initialize()
    {
        regionManager.RegisterViewWithRegion("RibbonRegion", typeof(Ribbon));
    }
}

 

Having the SalesRibbonTabModule class, now we need to add instance of it to the ModuleCatalog in the Bootstrapper class.

Bootstrapper.cs

public class Bootstrapper : UnityBootstrapper
{
    protected override DependencyObject CreateShell()
    {
        Shell shell = Container.Resolve<Shell>();
        Application.Current.RootVisual = shell;
        return shell;
    }
 
    protected override IModuleCatalog GetModuleCatalog()
    {
        ModuleCatalog catalog = new ModuleCatalog()       
        .AddModule(typeof(SalesRibbonTab.SalesRibbonTabModule));
         
        return catalog;
    }
}

Now we are all set and can use all the benefits of Composing the UI.

Download the demo project including the Prism dlls from here.

[Update] The project is updated and improved in new post. Find more.

 

7 Comments

  • david maloney 13 Jul 2010
    Thanks!  Any Idea how I can add items to the ApplicationMenu and QuickAccessToolBar  via regions?
  • Miro Miroslavov 14 Jul 2010
    Hello david,
    It should work the same way as in the demo, you should only mark the ApplicationMenu as Region and add modules to that region.
    However in what scenario you need so dynamic ApplicationMenu and/or QuickAccessToolbar? I think this can bring even more overhead to the whole application than normal loaded UI.

    Regards,
    The Telerik Team
  • Arnstein 11 Aug 2010
    Did you figure out a way to do this David? The region isn't registered in the regionmanger when you mark the applicationmenu as a region.
  • JG 31 Aug 2010
    Miroslav, this does not seem to work for WPF desktop client applications.
  • Miro Miroslavov 01 Sep 2010
    Hi JG,

    I've never tried this.
    Let me check this out and I will get back to you in your forum post and here as well.

    Thank you.

    Regards,
    The Telerik Team
  • Miro Miroslavov 01 Sep 2010
    Hi There,

    The problem you are facing is due to the fact that RadRibbonBar for WPF does not support using the ItemsSource property. Which breaks the PRISM, because it uses this property internally.
    We have this problem in our Issue system, so we will fix it soon. This will also make possible to bind the RibbonBar entirely.

    Regards
  • frosty 24 Nov 2010
    I created a template for a modular, SL 4 app, using the RibbonBar, with the concepts of MVVM utilizing MEF with Prism 4.

    Also, I've created a QATBRegionAdapter so you can add a region to the QuickAccessToolbar.
    You can download the template at:

    http://www.dotnetpatterns.net/content/185-Silverlight-4.0-Prism-4.0-Telerik-Ribbon-Application-Template

    I'm keeping it there as it's easier for me to update.  Also, if you have questions please post them on the site.

Add comment

  1. Formatting options
       
     
     
     
     
       
  2. (optional, emails won't be shown on public pages)
  3. (optional)