Как убрать границу MenuItem под MenuItem в WPF

Question

Я использую элемент управления MenuItem в WPF.Но я не знаю, как убрать границу sub MenuItems.

MainWindow.xaml

<Menu DockPanel.Dock="Top" Grid.Row="0" Background="#383838" Foreground="White" VerticalAlignment="Top">
    <MenuItem Header="TEST" FontSize="20" Margin="20,0,0,0">
        <MenuItem Header="TEST"/>
        <MenuItem Header="TEST"/>
        <MenuItem Header="TEST"/>
        <MenuItem Header="TEST"/>
        <MenuItem Header="TEST"/>
        <MenuItem Header="TEST"/>
    </MenuItem>
</Menu>

Я хочу удалить белую рамку над изображением.

Answer 1

Я думаю, вы должны добавить шаблон элемента управления для MenuItem, например, так ...

<ControlTemplate x:Key="MenuItemControlTemplate1" TargetType="{x:Type MenuItem}">
    <Border x:Name="templateRoot" BorderBrush="#383838" BorderThickness="0" Background="#383838" 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="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="0" 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="#383838" BorderThickness="0" Background="#383838" Padding="0">
                    <ScrollViewer x:Name="SubMenuScrollViewer" 
                                  Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}"
                                  Background="#383838" Margin="0" Padding="0">
                        <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="#383838" HorizontalAlignment="Left" Margin="0" Width="0"/>
                            <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>
        <Trigger Property="IsKeyboardFocusWithin" Value="True">
            <Setter TargetName="templateRoot" Property="Background" Value="{StaticResource ClickedColor}" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Тогда вы бы добавили этот шаблон к вам в пункт меню, например ...

<Menu DockPanel.Dock="Top" Grid.Row="0" Background="#383838" Foreground="White" VerticalAlignment="Top">
    <MenuItem Header="TEST" FontSize="20" Padding="0" Template="{DynamicResource MenuItemControlTemplate1}">
        <MenuItem Header="TEST" Foreground="White"/>
        <MenuItem Header="TEST" Foreground="White"/>
        <MenuItem Header="TEST" Foreground="White"/>
        <MenuItem Header="TEST" Foreground="White"/>
    </MenuItem>
</Menu>

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