C# WPF ContentPresenter MenuItem TextAlignment

Question

first I want to mention that I'm new to C# WPF. I already searched a lot, but so far I have not found a proper solution to my problem and I hope that someone can help me now.

Now to my problem:

I have a C # WPF Application in which I have a Menu. I am using the Window.Resoucres area to define a new Template for the x:Type MenuItem. This works so far.

However, I do not get it out, to center the text on multiple lines (Multiline) menus.

I have a menu item with the text "Costs Overview". This should be centered displayed among themselves, because I have given the menu a fixed width.

I want something like this (just centered):

Costs
Overview

Here i the style template which i currently use:

<Style x:Key="MenuItem" TargetType="{x:Type MenuItem}">
        <Setter Property="Background" Value="#FF6C6D6E"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="{x:Null}"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Width" Value="60"/>
        <Setter Property="Height" Value="90"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type MenuItem}">
                    <Border x:Name="Border" Background="{TemplateBinding Background}"  BorderBrush="{TemplateBinding BorderBrush}"  BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="Center" >
                        <Grid>
                            <!-- ContentPresenter to show an Icon -->
                            <ContentPresenter Margin="0,10,0,35" x:Name="Icon" VerticalAlignment="Center" ContentSource="Icon"/>
                            <!-- Content for the menu text etc -->
                            <ContentPresenter Margin="0,55,0,0" VerticalAlignment="Top" HorizontalAlignment="Center" ContentSource="Header" RecognizesAccessKey="True" />
                        </Grid>
                    </Border>

                    <!-- These triggers re-configure the four arrangements of MenuItem to show different levels of menu via Role -->
                    <ControlTemplate.Triggers>
                        <!-- Role = TopLevelItem :  this is a child menu item from the top level without any child items-->
                        <Trigger Property="Role" Value="TopLevelItem">
                            <Setter Property="Padding" Value="0"/>
                            <Setter Property="BorderBrush" Value="{x:Null}" />
                            <Setter Property="BorderThickness" Value="0"/>
                            <Setter Property="Width" Value="80" />
                            <Setter Property="Height" Value="80" />
                            <Setter Property="HorizontalAlignment" Value="Center" />
                        </Trigger>
                        <!-- Using colors for the Menu Highlight and IsEnabled-->
                        <Trigger Property="IsHighlighted" Value="true">
                            <Setter Property="Background" Value="#FF939498"  />
                        </Trigger>

                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="#FF939498"  />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

This style give my menu the following look.

As you can see, the text in the menu is not centered. I already tried some solutions like setting a TextBlock in the ContentPresenter to set the TextAlignment="Center" attribute, but i don't know how to get the MenuItem Text in the TextBlock Binding.

I also tried to set the TextBlock.TextAlignment="Center" attribute to the ContentPresenter but it didn't work also.

As you maybe can see, I have another problem with my Menu. Do you know, how I can remove the blue focus when I hover over the MenuItem? The normal hover style is that the menu will get a light gray color, like in the middle of the button. Also my MenuItem does not use the full width of the Menu...

I am looking forward to every idea.

Thanks in advance!

SOLUTION

bars22 gave me the right hint..

I forgot that I have a normal menu a few lines deeper. I was just looking at the ControlTemplate...

Here is my solution:

I leaved the Style from the MenuItem as I done it and changed my Menu to the following:

            <Menu Background="{x:Null}" ItemsSource="{Binding PageViewModels}">
                <Menu.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </Menu.ItemsPanel>
                <Menu.ItemTemplate>
                    <DataTemplate>
                        <MenuItem Icon="{Binding Icon}"
                            Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
                            CommandParameter="{Binding }"
                            Style="{StaticResource MenuItem}">
                            <MenuItem.Header>
                                <StackPanel>
                                    <TextBlock TextAlignment="Center" Text="{Binding Name}" />
                                </StackPanel>
                            </MenuItem.Header>
                        </MenuItem>
                    </DataTemplate>
                </Menu.ItemTemplate>
            </Menu>

bars222 bars222 · Accepted Answer · 2016-01-20T07:54:56

You can change container for content presenters to StackPanel.

<StackPanel>
    <!-- ContentPresenter to show an Icon -->
    <ContentPresenter x:Name="Icon" ContentSource="Icon"/>
    <!-- Content for the menu text etc -->
    <ContentPresenter ContentSource="Header" RecognizesAccessKey="True" />
</StackPanel>

I've tested on these MenuItems. It's two different variants. I think it looks well.

<Menu DockPanel.Dock="Top" Background="white">
    <MenuItem Header="Test">
        <MenuItem Style="{StaticResource MenuItem}">
            <MenuItem.Header>
                <TextBlock Text="Costs Overview" HorizontalAlignment="Center" TextWrapping="Wrap" />
            </MenuItem.Header>
            <MenuItem.Icon>
                <Image Source="/WPFTest;component/Images/Test.png" />
            </MenuItem.Icon>
        </MenuItem>
        <MenuItem Style="{StaticResource MenuItem}">
            <MenuItem.Header>
                <StackPanel>
                    <TextBlock HorizontalAlignment="Center" Text="Costs" />
                    <TextBlock HorizontalAlignment="Center" Text="Overview" />
                </StackPanel>
            </MenuItem.Header>
            <MenuItem.Icon>
                <Image Source="/WPFTest;component/Images/Test.png" />
            </MenuItem.Icon>
        </MenuItem>
    </MenuItem>
</Menu>

C# WPF ContentPresenter MenuItem TextAlignment

SOLUTION

1 Answers