Vertically Centering MenuItem text in a Fluent Ribbon with C# WPF

Question

I'm working with Fluent.Ribbon, and I am desperately trying to vertically center the text of second level menu items. I actually wouldn't mind making second level have the same style as first level items if that would be easier.

From digging through the source code, I think I've found that the separate style is defined by the ControlTemplate ApplicationMenuSecondLevelItemTemplate. However, since I'm working on learning WPF, I'm not sure how to override that with styles.

I've tried simpler solutions, like this one which just makes the text disappear.

I've also tried all of the option in this post. However, none of those work either, and when I fix the last one to be the following to get rid of errors, the application just crashes.

<Style x:Key="CenteredTextMenuItem" TargetType="{x:Type MenuItem}">
    <Setter Property="HeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <TextBox Text="{Binding}" HorizontalAlignment="Stretch" 
                HorizontalContentAlignment="Center" FontSize="16" FontWeight="Bold"/>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Height" Value="30"/>
    <Setter Property="Width" Value="188"/>
</Style>

How can I center a second level MenuItem's text with the Fluent.Ribbon control?

Thanks.

Edit:

Here is an image showing how the second level is not centered.

And nothing complicated with the code:

<Fluent:MenuItem Header="Print Invoice" Icon="NavIcons\Print_32.png" />

Answer 1

Here are possible solutions for your problem.

1. Simple, but somewhat ugly.

Create an event handler in code behind for the Loaded event of your menu items.

<Fluent:MenuItem Loaded="MenuItem_Loaded"/>

In this event handler, you can find the control template parts manually and override their appearance:

private void MenuItem_Loaded(object sender, RoutedEventArgs e)
{
    Fluent.MenuItem menuItem = sender as Fluent.MenuItem;
    if (menuItem != null)
    {
        TextBlock textBlock = menuItem.Template.FindName("textBlockDesc", menuItem) as TextBlock;
        if (textBlock != null)
        {
            textBlock.Visibility = System.Windows.Visibility.Collapsed;
        }

        textBlock = menuItem.Template.FindName("textBlock", menuItem) as TextBlock;
        if (textBlock != null)
        {
            textBlock.VerticalAlignment = System.Windows.VerticalAlignment.Center;
        }
    }
}

This is a bad solution, don't do it like that. I've just shown it so you can get an idea how could you access the template parts if you wish to. These strings "textBlockDesc" and "textBlock" are the control template parts defined in the Fluent theme.

2. Create your own style and control template.

Since you can't inherit a control template, you have to copy it from the Fluent theme and put it in your resources. The disadvantage is that you'll have to manually resync that template with the original one if there will be an update.

I don't put an example here, because that solution isn't really good too.

3. Override the menu item style manually.

Set the style of your menu items manually to the "first level" menu items' style.

<Fluent:MenuItem Style="{DynamicResource ApplicationMenuStyle}"/>