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.

Menu Screenshot

And nothing complicated with the code:

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

Could you please post a picture and some XAML markup what are you trying to achieve? The second level menu items are vertically centered by default. — dymanoid, Mar 24 '15 at 15:48
That's because there's a line for a `Description` which is not set in your `MenuItem`s (thus, is displayed as a blank line). This is arranged using an additional `TextBlock` in the control template. If you don't need the second line, you could completely redefine the style and control template, or force the style of the second level menu to be the same as the first level. If you need an example, let me know, I'll post this as an answer. — dymanoid, Mar 24 '15 at 22:09
An example would be wonderful, being new to this whole system. — David, Mar 24 '15 at 22:16

score 1 · Accepted Answer · answered Mar 25 '15 at 09:34

Here are possible solutions for your problem.

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.

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.

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}"/>

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

1 Answers1