Additional Nesting level appears when using a DataTemplate in a WPF Ribbon Application Menu

Question

I am using the WPF Ribbon control provided by Microsoft.

The problem consists in that, when I use a DataTemplate to fill a RibbonApplicationSplitMenuItem, I get an additional nesting level that I believe should not be there.

Here is the relevant WPF code:

<Window.Resources>
    <DataTemplate DataType="{x:Type cfg:PluginInfoConfigurationElement}" x:Key="GotoPluginAppMenuItem">
        <ribbon:RibbonApplicationMenuItem 
                                Header="{Binding Path=Key}"
                                ImageSource="{Binding Path=Image}"/>
    </DataTemplate>
</Window.Resources>

            <ribbon:RibbonApplicationMenu>
                <ribbon:RibbonApplicationSplitMenuItem x:Name="LoadPluginMenuItem" 
                   ItemsSource="{Binding Source={StaticResource NlpModel}, Path=AvailablePlugins}" 
                   Header="Plugins"
                   ItemTemplate="{StaticResource GotoPluginAppMenuItem}">
                </ribbon:RibbonApplicationSplitMenuItem>
                <ribbon:RibbonApplicationSplitMenuItem x:Name="LoadPluginMenuItem2" 
                                                       Header="Plugins">
                    <ribbon:RibbonApplicationMenuItem 
                                Header="FooPlugin"
                                ImageSource="Images/icon-32.png"/>
                    <ribbon:RibbonApplicationMenuItem 
                                Header="Invalid"
                                ImageSource="Images/icon-32.png"/>
                </ribbon:RibbonApplicationSplitMenuItem>
                <!-- Other items to fill the menu -->
            </ribbon:RibbonApplicationMenu>

And here is what I get:

With a Data Template.

Without the template.

As you can see, an additional nesting level appears when using a DataTemplate. How can I prevent that?

Answer 1

Instead of setting the ItemTemplate you need to set ItemContainerStyle otherwise you are ending up with a ribbon:RibbonApplicationMenuItem inside of the ribbon:RibbonApplicationMenuItem.

Jean Hominal: Here is the code that I have used, which achieved the result I wanted:

<Style TargetType="{x:Type ribbon:RibbonApplicationMenuItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <ribbon:RibbonApplicationMenuItem Header="{Binding Path=Caption}"
                                                  ImageSource="{Binding Path=Image}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>