WPF MenuItem отображение без окружающей пустой области

Question

В следующем XAML мне нужно отобразить синий rectangle внутри пункта меню без серой пустой области вокруг него. Но, как показано на экране ниже, прямоугольник внутри пункта меню показывает много пустого пространства вокруг прямоугольника. Вопрос : Что я могу здесь делать неправильно и как мы можем избавиться от пустого места из пункта меню? Я пробовал использовать Margin и StackPanel. Но пока безуспешно. Я думаю, что нам, вероятно, нужен какой-то шаблон пункта меню здесь. Я следую этому учебнику WPF .

1012 * XAML *:

<Window x:Class="WpfTESTApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfTESTApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="492.182" Width="499" Loaded="Window_Loaded">
    <Grid>
        <DockPanel>
            <Menu DockPanel.Dock="Top">
                <MenuItem Header="My Rectangle">
                    <StackPanel Width="50" Height="50">
                        <Rectangle Fill="Blue" Width="50" Height="50"  Margin="0,0,0,0" Stroke="Black"/>
                    </StackPanel>
                </MenuItem>
            </Menu>
        </DockPanel>        
    </Grid>
</Window>

Снимок экрана главного окна [с дизайном и представлением во время выполнения]: в пункте меню мне нужно отобразить только синий прямоугольник

Answer 1

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

 <Window.Resources>
    <ControlTemplate x:Key="MenuItemControlTemplate1" 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"  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="0"/>
                <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="{TemplateBinding Foreground}" FlowDirection="LeftToRight"  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}"/>
                <Popup x:Name="PART_Popup" AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom">
                    <Border x:Name="SubMenuBorder" BorderBrush="#FF999999" BorderThickness="1"  Padding="0" Background="#FFF0F0F0" Width="Auto" >
                        <ScrollViewer x:Name="SubMenuScrollViewer" Padding="0" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
                            <Grid RenderOptions.ClearTypeHint="Enabled">
                                <Canvas HorizontalAlignment="Left" Height="0"  VerticalAlignment="Top" Width="0">
                                    <Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
                                </Canvas>
                                <Rectangle Fill="#FFD7D7D7" HorizontalAlignment="Left"  Width="1"/>
                                <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
                            </Grid>
                        </ScrollViewer>
                    </Border>
                </Popup>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsSuspendingPopupAnimation" Value="True">
                <Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>
            </Trigger>
            <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="#3D26A0DA"/>
                <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF26A0DA"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
                <Setter Property="Fill" TargetName="GlyphPanel" Value="#FF707070"/>
            </Trigger>
            <Trigger Property="CanContentScroll" SourceName="SubMenuScrollViewer" Value="False">
                <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/>
                <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>

. И код для пункта меню будет таким, как приведенный ниже

 <DockPanel>
        <Menu DockPanel.Dock="Top" >
            <MenuItem Header="My Rectangle" Template="{DynamicResource MenuItemControlTemplate1}" >

                    <Rectangle Fill="Blue" Width="200" Height="30"   Margin="-35,0,-50,0" Stroke="Black"/>
                <Rectangle Fill="Red" Width="200" Height="30"   Margin="-35,0,-50,0" Stroke="Black"/>
                </MenuItem>

        </Menu>
    </DockPanel>

Как вы можете видеть, я применил поле для прямоугольника, если вы удалите его, то вы сможете увидеть отступы слева и справа.