Как я могу отредактировать шаблон XAML, чтобы получить цвет фона для всего элемента управления меню?

Question

Я не могу установить цвет фона (# FF2B2B2B) для всего меню. В настоящее время это выглядит следующим образом: Мой текущий стиль меню

Я знаю, что есть возможность сделать это с помощью редактирования шаблона, но я не знаю, как это сделать (я новичок).

Итак, я получил это меню здесь:

        <Menu x:Name="menuControl" Margin="0,0,293,230" Background="#FF2B2B2B" Grid.RowSpan="2" Height="20px" VerticalAlignment="Top">
            <MenuItem x:Name="menuItemControl" Header="_File" Background="#FF2B2B2B" Foreground="White" Width="Auto">
               <MenuItem x:Name="menueItemLoginLogoutControl" Header="_Sign in" Background="#FF2B2B2B" Foreground="White" Click="menueItemLoginLogoutControl_ClickAsync"></MenuItem>
               <MenuItem x:Name="menueItemReload" Header="_Reload" Foreground="Black" Click="menueItemReload_Click" />
               <Separator/>
               <MenuItem x:Name="menueItemExitControl" Header="_Exit" Foreground="Black" Click="menueItemExitControl_Click"></MenuItem>
             </MenuItem>
        </Menu>

Я щелкнул правой кнопкой мыши на «Пункт меню» (на первом) и нажал «Редактировать шаблон» -> «Редактировать». копия ", и это был результат:

<Window.Resources>
        <SolidColorBrush x:Key="Menu.Static.Foreground" Color="#FF212121"/>
        <SolidColorBrush x:Key="Menu.Disabled.Foreground" Color="#FF707070"/>
        <SolidColorBrush x:Key="MenuItem.Selected.Background" Color="#3D26A0DA"/>
        <SolidColorBrush x:Key="MenuItem.Selected.Border" Color="#FF26A0DA"/>
        <SolidColorBrush x:Key="MenuItem.Highlight.Background" Color="#3D26A0DA"/>
        <SolidColorBrush x:Key="MenuItem.Highlight.Border" Color="#FF26A0DA"/>
        <SolidColorBrush x:Key="MenuItem.Highlight.Disabled.Background" Color="#0A000000"/>
        <SolidColorBrush x:Key="MenuItem.Highlight.Disabled.Border" Color="#21000000"/>
        <Geometry x:Key="Checkmark">F1 M 10.0,1.2 L 4.7,9.1 L 4.5,9.1 L 0,5.2 L 1.3,3.5 L 4.3,6.1L 8.3,0 L 10.0,1.2 Z</Geometry>
        <ControlTemplate x:Key="MenuItemTemplate1" TargetType="{x:Type MenuItem}">
            <Border x:Name="templateRoot" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Height="22" SnapsToDevicePixels="true">
                <Grid Margin="-1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition MinWidth="22" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
                        <ColumnDefinition Width="13"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="30"/>
                        <ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
                        <ColumnDefinition Width="20"/>
                    </Grid.ColumnDefinitions>
                    <ContentPresenter x:Name="Icon" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
                    <Border x:Name="GlyphPanel" Background="{StaticResource MenuItem.Selected.Background}" BorderThickness="1" BorderBrush="{StaticResource MenuItem.Selected.Border}" ClipToBounds="False" HorizontalAlignment="Center" Height="22" Margin="-1,0,0,0" VerticalAlignment="Center" Visibility="Hidden" Width="22">
                        <Path x:Name="Glyph" Data="{StaticResource Checkmark}" FlowDirection="LeftToRight" Fill="{StaticResource Menu.Static.Foreground}" Height="11" Width="10"/>
                    </Border>
                    <ContentPresenter x:Name="menuHeaderContainer" ContentSource="Header" Grid.Column="2" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
                    <TextBlock x:Name="menuGestureText" Grid.Column="4" Margin="{TemplateBinding Padding}" Opacity="0.7" Text="{TemplateBinding InputGestureText}" VerticalAlignment="Center"/>
                </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="{StaticResource MenuItem.Highlight.Background}"/>
                    <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Border}"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{StaticResource Menu.Disabled.Foreground}"/>
                    <Setter Property="Fill" TargetName="Glyph" Value="{StaticResource Menu.Disabled.Foreground}"/>
                </Trigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsHighlighted" Value="True"/>
                        <Condition Property="IsEnabled" Value="False"/>
                    </MultiTrigger.Conditions>
                    <Setter Property="Background" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Disabled.Background}"/>
                    <Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource MenuItem.Highlight.Disabled.Border}"/>
                </MultiTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>

Теперь я не знаю, что мне нужно изменить или добавить, чтобы получить цвет фона # FF2B2B2B для всего меню.

И мое меню выглядит немного странно после того, как этот шаблон был создан. Кто-нибудь знает почему и как я могу это исправить? (Изображение прилагается) пункт меню немного странно растянут, и я не могу нажать на него

Может кто-нибудь помочь?