Ribbon Tab Definition on UserControl

We’ve been using the Ribbon control provided by Microsoft on a project I’ve been working on. We started with the WPF toolkit Ribbon but recently upgraded to the .Net 4.0 version. The 4.0 version is much better than the WPF Toolkit version, and I would suggest using it.

Some of our views have specific commands available while they are active so we initially created contextual tabs to associate with these views. The contextual tabs were defined in the main RibbonWindow’s XAML:

<r:Ribbon>
  <r:Ribbon.ContextualTabGroups>
    <r:RibbonContextualTabGroup Header="Tab 1"
             Visibility="{Binding TabOneVisible}"/>
    <r:RibbonContextualTabGroup Header="Tab 2"
             Visibility="{Binding TabTwoVisible}"/>
  </r:Ribbon.ContextualTabGroups>
  <r:RibbonTab ContextualTabGroupHeader="Tab 1">
    <r:RibbonGroup Name="Clusters">
      <r:RibbonButton Label="Button"
             Command="{Binding ButtonOneCommand"/>
      <r:RibbonButton Label="Button"
             Command="{Binding ButtonTwoCommand"/>
    </r:RibbonGroup>
  </r:RibbonTab>
  <r:RibbonTab ContextualTabGroupHeader="Tab 2">
    <r:RibbonGroup Name="Clusters">
      <r:RibbonButton Label="Button"
             Command="{Binding ButtonThreeCommand"/>
    </r:RibbonGroup>
  </r:RibbonTab>
</r:Ribbon>

I have multiple problems with this approach. First, it requires the main view to know what actions are available for each sub-view and declare buttons for each of these actions. Additionally, command binding is not quite as elegant as it could be; either chain binding is required, or the main view model must define all the commands. For the chain binding to work, the main view model needs a references to every sub-view model, which should not be necessary.

What I really wanted was for each sub-view to be responsible for defining the actions that can be taken when it is visible. To this end I created a couple of Attached Properties on UserControl. The RibbonTab definitions are moved into the UserControl XAML:

<UserControl
   a:UserControlRibbon.RibbonTab="{DynamicResource Tab}"
   a:UserControlRibbon.RibbonTabDataContext="{Binding}">
  <UserControl.Resources>
    <r:RibbonTab x:Key="Tab"
         Header="Control Tab">
      <r:RibbonGroup>
        <r:RibbonButton Label="Button"
            Command="{Binding ButtonCommand}"/>
      </r:RibbonGroup>
    </r:RibbonTab>
  </UserControl.Resources>
</UserControl>

There are some ways in which this could be better, but I think this provides a much better way for the ribbon to be put together. I had thought about creating a RibbonUserControl similar to RibbonWindow. The RibbonUserControl would have the RibbonTab property, which would move the tab out of the resources and eliminate the two assignments in the UserControl declaration.

Get the code. Feel free to use it, just include the copyright.