Use a UserControl inside a Ribbon - wpf

Question

I want to use a UserControl inside a RibbonControl.
For example:
<RibbonWindow
xmlns:uc="clr-namespace:UserControl1;assembly=UserControl1">
<Grid ShowGridLines="False" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="100*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100*"/>
</Grid.ColumnDefinitions>
<Ribbon Grid.Row="0">
<RibbonApplicationMenu >
<RibbonApplicationMenuItem x:Name="miExit" ImageSource="Images/large_exit.png" Header="Exit" />
</RibbonApplicationMenu>
<RibbonTab Header="Test">
<uc:RibbonGroups/>
</RibbonTab>
</Ribbon>
<uc:Content Grid.Row="1" />
</Grid>
</RibbonWindow>
You see two UserControls, uc:RibbonGroups and uc:Content. While the second one (uc:Content) works fine, the UserControl inside the RibbonControl won't work.
What i missed?
I also try this approach:
How to set the usercontrol for ribbon window in WPF?
an set a grid inside the RibbonTab and then the UserControl;
<Ribbon Grid.Row="0">
...
<Grid>
<RibbonTab Header="Test">
<uc:RibbonGroups/>
</RibbonTab>
</Grid>
</Ribbon>
instead of
<Ribbon Grid.Row="0">
...
<RibbonTab Header="Test">
<uc:RibbonGroups/>
</RibbonTab>
</Ribbon>
Edit:
UserControl now only holds the content of RibbonTab, RibbonTab itself moved to the main window
<UserControl ...>
<StackPanel Orientation="Horizontal">
<RibbonGroup Header="Test" >
<RibbonButton SmallImageSource="Images/small_save.png"
LargeImageSource="Images/large_save.png" />
<Image Source="Images/large_expert_enabled.png"></Image>
</Stackpanel>
</UserControl>
RibbonGroup are shown with the Header but without the images, and the separate Image are shown itself. So maybe there are now any suggestions what goes wrong?
EDIT2:
If i step into with Snoop, the RibbonButtons and their corresponding images are present.
EDIT3:
I tried another way with resources, but same problem as above..
How it looks, when i have the RibbonTab in the resource/UserControl:
http://s12.postimg.org/lpposl48t/DLL_Ribbon_Tab_fail_part.png
How it looks, when i have the RibbonGroup in the resource/UserControl:
http://s12.postimg.org/oiiwcm4l9/DLL_Ribbon_Group_fail_part.png

Answer 1

After a lot of research i found this from Ben Barefield:
http://www.benbarefield.com/blog/2011/03/04/ribbon-tab-definition-on-usercontrol/
He use a trick and move the ribbontab into a resourcedictionary.
Works well, but i also wanted to add some click events to this ribbontab (with view specific actions....) so i decided to fall back to the usercontrol.
The trick is, to detach the ribbontab from the usercontrol before adding it to the other control.
In detail:
add this methods to the usercontrol codebehind:
private void AttachTabToRibbon(RibbonTab tab)
{
Ribbon Ribbon = null;
Ribbon = getRibbon();
if (Ribbon == null)
return;
Ribbon.Items.Add(tab);
}
private Ribbon getRibbon()
{
var control = VisualTreeHelper.GetParent(this);
Ribbon Ribbon = null;
while (control != null && Ribbon == null)
{
var numberOfChildren = VisualTreeHelper.GetChildrenCount(control);
for (int i = 0; i < numberOfChildren; ++i)
{
var child = VisualTreeHelper.GetChild(control, i);
if (child is Ribbon)
{
Ribbon = child as Ribbon;
return Ribbon;
}
}
control = VisualTreeHelper.GetParent(control);
}
return null;
}
private void userControl_Loaded(object sender, RoutedEventArgs e)
{
Ribbon ribbonMenu = (Ribbon)this.FindName("ribbon");
RibbonTab ribbonTabAdminInterface = (RibbonTab)this.FindName("ribbonTab");
ribbonMenu.Items.Remove(ribbonTab);
ucStackPanel.Children.Remove(ribbonMenu);
AttachTabToRibbon(ribbonTab);
}
furthermore call the userControl_Loaded:
<UserControl ...
Loaded="userControl_Loaded"
>
<StackPanel x:Name="ucStackPanel">
<Ribbon x:Name="ribbon" >
<Ribbon.ApplicationMenu>
<RibbonApplicationMenu
</RibbonApplicationMenu>
</Ribbon.ApplicationMenu>
<RibbonTab x:Name="ribbonTab"/>
...
</Ribbon>
...
</StackPanel>