Decouple RadRibbonBar with Composite Silverlight (Prism)

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.

About the author

Miro Miroslavov

Miro Miroslavov

is XAML enthusiast and Team Leader at Telerik. He’s responsible for the RadDiagram framework and some related products. You can follow him on Twitter at @mmiroslavov.

 

7 Comments

david maloney
Thanks!  Any Idea how I can add items to the ApplicationMenu and QuickAccessToolBar  via regions?
Miro Miroslavov
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
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
Miroslav, this does not seem to work for WPF desktop client applications.
Miro Miroslavov
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
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

Comments

  1.    
      
      
       
  2. (optional, emails won't be shown on public pages)
  3. (optional)
Read more articles by Miro Miroslavov - or - read latest articles in Developer Tools