RadRibbonGroup Template Only Fills Group's Tray (MVVM, Caliburn)

[Jules]

Hello,

I'm trying to implement a set of ribbon tabs and contextual tab groups with a SOLID design. Using Caliburn.Micro, I'm hoping to later develop new RadRibbonGroup views and view models by defining them independently of each other and their parent tabs.

So far, things are going well. However, the way in which I have been able to achieve this means that the entire contents of my RadRibbonGroups are displayed in what looks to the the tray of a RadRibbonGroup object that the Telerik library seems to be wrapping around my DataTemplate.

Here's how I'm pulling the data from my ViewModels into my views.

<UserControl.Resources>
   <DataTemplate x:Key="RibbonGroupDataTemplate">
     <ContentControl cm:View.Model="{Binding}" />
   </DataTemplate>
   <Style TargetType="t:RadRibbonContextualGroup">
     <Setter Property="Header" Value="{Binding  Header, Mode=OneTime}" />
     <Setter Property="t:RadRibbonContextualGroup.GroupName" Value="{Binding GroupName, Mode=OneTime}" />
     <Setter Property="IsActive" Value="{Binding IsActive, Mode=OneWay}" />
     <Setter Property="Color" Value="{Binding Color, Mode=OneTime}" />
   </Style>
   <Style TargetType="t:RadRibbonTab">
     <Setter Property="Header" Value="{Binding Header}" />
     <Setter Property="ContextualGroupName" Value="{Binding ContextualGroupName}" />
     <Setter Property="ItemsSource" Value="{Binding Groups}" />
     <Setter Property="ItemTemplate" Value="{StaticResource RibbonGroupDataTemplate}" />
   </Style>
 </UserControl.Resources>

 <t:RadRibbonView
   ItemsSource="{Binding Tabs}"
   ContextualGroupsItemsSource="{Binding ContextualGroups}"
   ApplicationButtonVisibility="Visible"
   TitleBarVisibility="Collapsed"
   MinimizeButtonVisibility="Visible"
   IsMinimizable="True"
   IsMinimized="False">

 

Attached are a couple screenshots of what I mean. One of them is from viewing the resulting tree in snoop. The highlighted Tray can be seen to contain the RibbonRadGroup view that was located by Caliburn through the "RibbonGroupDataTemplate" data template.

 

Thank you in advance for your help.

[Martin Ivanov]

Hello Jules,

The RibbonView control will wrap anything that is placed in their ItemTemplate in a container of type the default child item. For example, the element in the ItemTemplate of RadRibbonTab will be wrapped in a RadRibbonGroup elements. Also, the elements will be automatically placed in the header of the created container. This is because the ItemTemplate of the parent ribbon cotrnol is bound to the HeaderTemplate of the child controls.

You can take a look at the Paint with MVVM RadRibbonView example which demonstrates how you can use the ribbon in an MVVM scenario.

Regards,
Martin
Telerik