Introduction

Ever wondering if you could use Ribbon with PRISM and boost your applications UI prettiness and usability ?

The answer is yes. Because PRISM is based on the concept of regions where you can specify how you can manage this region.

We will be using the same concept for Ribbon where we are going to tell PRISM how are going to maintain this UI Estate/Region.

Below is the step by step guide (as I understood it). Download the source code to follow with me.

!Step By Step Guide

Marking Out Our Ribbon Estate In Shell

First we need to tell locate an area/region in our Shell.xaml which should used for Ribbon. As Ribbon is unique control, we can't simple host it in Window control, it needs its own control to live it.

Infragistics control that I am using uses XamRibbonWindow.

Example of the Shell.xaml below:
<igRibbon:XamRibbonWindow x:Class="BlueCrest.Prism.Desktop.Views.Shell"
        >
    <igRibbon:RibbonWindowContentHost>
        <Grid>
            <StackPanel>
                <ItemsControl prism:RegionManager.RegionName="{x:Static CommonUI:RegionNames.MainRegion}" />
            </StackPanel>
        </Grid>
        <igRibbon:RibbonWindowContentHost.Ribbon>
            <igRibbon:XamRibbon prism:RegionManager.RegionName="{x:Static CommonUI:RegionNames.RibbonRegion}"/>
        </igRibbon:RibbonWindowContentHost.Ribbon>
    </igRibbon:RibbonWindowContentHost>



As you can see from above example, specifically this line (within RibbonWindowContentHost.Ribbon):
<igRibbon:XamRibbon prism:RegionManager.RegionName="{x:Static CommonUI:RegionNames.RibbonRegion}"/> 


We are marking out an area where RegionManager will be responsible for.

Giving the power to RegionManager

Now that we have marked out a territory for Ribbon, we need to empower RegionManager with how to handle the request to add Ribbon Tab into the area. To do this we use Adapter pattern, where object of one type in adapter/converted into another type.

Check out XamRibbonRegionAdapter in the SourceCode.

And you will see that our XamRibbonRegionAdapter is based on RegionAdapterBase<XamRibbon>. Within that code you will see how we adapt/convert our RibbonEstate (which is our DataModel which holds our Ribbon Estate) into XamRibbon's Tab/Group/RibbonItems.

Register Our XamRibbonRegionAdapter

Some how we need to let PRISM know that we now have this new Adapter we would like to use. To do we need to override below method:
protected override RegionAdapterMappings ConfigureRegionAdapterMappings()
        {
            RegionAdapterMappings mappings = base.ConfigureRegionAdapterMappings();

            mappings.RegisterMapping(typeof(XamRibbon), Container.Resolve<XamRibbonRegionAdapter>());

            return mappings;

        }


As you can see from above we are registering our own mapping.

Getting To Use IRibbonService

I like to encapsulate my services and that's why created IRibbonService. As you see in the sourcecode, it simply needs references to RegionManager and asks to register this view (which is RibbonEstate object in our case)
_ribbonRegion = _regionManager.Regions[RegionNames.RibbonRegion];
_ribbonRegion.Add(ribbonEstate, id);

//TODO

I think they are lots of bells and whistles you can add, including:
  • Add icons
  • Be able to remove certain TabGroup on ViewModel unload

Last edited Jun 14, 2012 at 9:55 PM by bluecreststudio, version 4

Comments

No comments yet.