Content alignment for the menu item in WPF does not work

Question

I am trying to align the text on the menu item to center. I have already created the code for template, style to take care of other things. Sadly, content alignment is not working, no matter where I declare it. Clearly, I have added some unnecessary tag somewhere that I can't seem to find. Kindly help me find the problem. Below is the full code used.

XAML markup:

   <Menu x:Name="MenuBar" Height="40" VerticalAlignment="Top" Background="#ffFF7A00" Loaded="MenuBar_Loaded">
    <MenuItem x:Name="HomeMenuItem" Template="{DynamicResource MenuItemTemplate}" Click="HomeMenuItem_Click" Panel.ZIndex="1" Style="{DynamicResource MenuStyle}" >
        <MenuItem.Header>
            <TextBlock Text="Home" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </MenuItem.Header>
    </MenuItem>

Style

        <Style x:Name="MenuStyle" x:Key="MenuStyle" TargetType="{x:Type MenuItem}">
        <Setter Property="Foreground" Value="#ffffffff"/>
        <Setter Property="BorderBrush" Value="#ffffffff"/>
        <Setter Property="BorderThickness" Value="0,0,1,0"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="FontFamily" Value="Trebuchet MS"/>
        <Setter Property="Width" Value="150"/>
        <Setter Property="Height" Value="40"/>
        <Setter Property="Background" Value="#FFFF7A00"/>
        <Setter Property="Focusable" Value="True"/>
        <Setter Property="IsTabStop" Value="True"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="#FF0081A7"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Visibility" Value="Collapsed"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Background" Value="#FF0081A7"/>
            </Trigger>
        </Style.Triggers>
    </Style>

Control template

        <ControlTemplate x:Name="MenuItemTemplate" x:Key="MenuItemTemplate" TargetType="{x:Type MenuItem}">
        <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
            <Grid VerticalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
                <Path x:Name="GlyphPanel" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z" Fill="#FF212121" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/>
                <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="Icon" Value="{x:Null}">
                <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
            </Trigger>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
                <Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
            </Trigger>
            <Trigger Property="IsHighlighted" Value="True">
                <Setter Property="Background" TargetName="templateRoot" Value="#0026A0DA"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
                <Setter Property="Fill" TargetName="GlyphPanel" Value="#FF707070"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

I guess there is a conflicting tag that might be causing this, but I can't seem to find which one. I have already tried using content alignment in hover trigger too, but that didn't work either.

Answer 1

Adding HorizontalAlignment="Center" to the Grid present in ControlTemplate(inside Border) will solve your problem.

<ControlTemplate x:Name="MenuItemTemplate" x:Key="MenuItemTemplate" TargetType="{x:Type MenuItem}">
            <Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                <Grid VerticalAlignment="Center" HorizontalAlignment="Center">

Answer 2

You need to supply a HeaderTemplate for the MenuItem style. eg

<ContextMenu>
    <ContextMenu.Resources>
        <DataTemplate x:Key="HeaderControlTemplate">
            <TextBlock HorizontalAlignment="Center" Text="{Binding}"/>
        </DataTemplate>
    </ContextMenu.Resources>
    <MenuItem Header="Menu1" Template="{StaticResource MenuTemplate}" HeaderTemplate="{StaticResource HeaderControlTemplate}"/>
    <MenuItem Header="Menu Item 2" Template="{StaticResource MenuTemplate}" HeaderTemplate="{StaticResource HeaderControlTemplate}"/>
</ContextMenu>