Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
555 views
in Technique[技术] by (71.8m points)

xaml - WPF Menu - unwanted borders

I've made a simple WPF menu and changed its background and foreground colors, but there is still a border around the submenu itself and around each separator which I'm not able to remove:

enter image description here

Xaml code:

<Menu Style="{DynamicResource MainMenu}" IsMainMenu="true">
    <MenuItem Header="_File">
       <MenuItem Header="_New" Command="New"/>
          <Separator />
          <MenuItem Header="_Import"/>
          <MenuItem Header="_Export"/>
          <Separator />
          <MenuItem Header="_Print..." Command="Print"/>
          <MenuItem Header="_Print Setup..."/>
          <Separator />
          <MenuItem Header="_Sign Out" />
          <Separator />
          <MenuItem Header="_Exit"/>
       <MenuItem Header="_Edit"/>
       <MenuItem Header="_View"/>
       <MenuItem Header="_Tools"/>
       <MenuItem Header="_Help"/>
</Menu>

Style:

<Style TargetType="{x:Type Menu}" x:Key="MainMenu">
    <Setter Property="Background" Value="#2b2b2b"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="BorderBrush" Value="#3f3f46"/>
    <Style.Resources>
        <Style TargetType="{x:Type MenuItem}">
            <Setter Property="Background" Value="#3f3f46"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="BorderBrush" Value="#3f3f46"/>
        </Style>
        <Style TargetType="{x:Type Separator}">
            <Setter Property="Background" Value="White"/>
        </Style>
    </Style.Resources>
</Style>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The white lines are part of the Popup template, which is what MenuItem uses at its default template. You'll have to override it to remove these linings.

If you have Blend, then you can easily change the template and copy-paste the code into your project. If you don't have Blend, give this a shot:

1- Add a reference to PresentationFramework.Aero

2- In your XAML file, import this namespace:

xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"

Paste this code inside the Window.Resources section. This is what Blend generated based on the modified template:

 <LinearGradientBrush x:Key="MenuItemSelectionFill" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#34C5EBFF" Offset="0"/>
        <GradientStop Color="#3481D8FF" Offset="1"/>
    </LinearGradientBrush>
    <Geometry x:Key="Checkmark">M 0,5.1 L 1.7,5.2 L 3.4,7.1 L 8,0.4 L 9.2,0 L 3.3,10.8 Z</Geometry>
    <ControlTemplate x:Key="{ComponentResourceKey ResourceId=SubmenuItemTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">
        <Grid SnapsToDevicePixels="true">
            <Rectangle x:Name="Bg" Fill="{TemplateBinding Background}" RadiusY="2" RadiusX="2" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"/>
            <Rectangle x:Name="InnerBorder" Margin="1" RadiusY="2" RadiusX="2"/>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition MinWidth="24" SharedSizeGroup="MenuItemIconColumnGroup" Width="Auto"/>
                    <ColumnDefinition Width="4"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="37"/>
                    <ColumnDefinition SharedSizeGroup="MenuItemIGTColumnGroup" Width="Auto"/>
                    <ColumnDefinition Width="17"/>
                </Grid.ColumnDefinitions>
                <ContentPresenter x:Name="Icon" ContentSource="Icon" Margin="1" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
                <Border x:Name="GlyphPanel" BorderBrush="#CDD3E6" BorderThickness="1" Background="#E6EFF4" CornerRadius="3" Height="22" Margin="1" Visibility="Hidden" Width="22">
                    <Path x:Name="Glyph" Data="{StaticResource Checkmark}" Fill="#0C12A1" FlowDirection="LeftToRight" Height="11" Width="9"/>
                </Border>
                <ContentPresenter Grid.Column="2" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                <TextBlock Grid.Column="4" Margin="{TemplateBinding Padding}" Text="{TemplateBinding InputGestureText}"/>
            </Grid>
        </Grid>
        <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="Fill" TargetName="Bg" Value="{StaticResource MenuItemSelectionFill}"/>
                <Setter Property="Stroke" TargetName="Bg" Value="#8071CBF1"/>
                <Setter Property="Stroke" TargetName="InnerBorder" Value="#40FFFFFF"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Foreground" Value="#FF9A9A9A"/>
                <Setter Property="Background" TargetName="GlyphPanel" Value="#EEE9E9"/>
                <Setter Property="BorderBrush" TargetName="GlyphPanel" Value="#DBD6D6"/>
                <Setter Property="Fill" TargetName="Glyph" Value="#848589"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <LinearGradientBrush x:Key="MenuItemPressedFill" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#28717070" Offset="0"/>
        <GradientStop Color="#50717070" Offset="0.75"/>
        <GradientStop Color="#90717070" Offset="1"/>
    </LinearGradientBrush>
    <Geometry x:Key="UpArrow">M 0,4 L 3.5,0 L 7,4 Z</Geometry>
    <Style x:Key="MenuScrollButton" BasedOn="{x:Null}" TargetType="{x:Type RepeatButton}">
        <Setter Property="ClickMode" Value="Hover"/>
        <Setter Property="MinWidth" Value="0"/>
        <Setter Property="MinHeight" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <DockPanel Background="Transparent" SnapsToDevicePixels="true">
                        <Rectangle x:Name="R1" DockPanel.Dock="Right" Fill="Transparent" Width="1"/>
                        <Rectangle x:Name="B1" DockPanel.Dock="Bottom" Fill="Transparent" Height="1"/>
                        <Rectangle x:Name="L1" DockPanel.Dock="Left" Fill="Transparent" Width="1"/>
                        <Rectangle x:Name="T1" DockPanel.Dock="Top" Fill="Transparent" Height="1"/>
                        <ContentPresenter x:Name="ContentContainer" HorizontalAlignment="Center" Margin="2,2,2,2" VerticalAlignment="Center"/>
                    </DockPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Fill" TargetName="R1" Value="{DynamicResource {x:Static SystemColors.ControlLightLightBrushKey}}"/>
                            <Setter Property="Fill" TargetName="B1" Value="{DynamicResource {x:Static SystemColors.ControlLightLightBrushKey}}"/>
                            <Setter Property="Fill" TargetName="L1" Value="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}"/>
                            <Setter Property="Fill" TargetName="T1" Value="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}"/>
                            <Setter Property="Margin" TargetName="ContentContainer" Value="3,3,1,1"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <MenuScrollingVisibilityConverter x:Key="MenuScrollingVisibilityConverter"/>
    <Geometry x:Key="DownArrow">M 0,0 L 3.5,4 L 7,0 Z</Geometry>
    <Style x:Key="{ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}" BasedOn="{x:Null}" TargetType="{x:Type ScrollViewer}">
        <Setter Property="HorizontalScrollBarVisibility" Value="Hidden"/>
        <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                    <Grid SnapsToDevicePixels="true">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Border Grid.Column="0" Grid.Row="1">
                            <ScrollContentPresenter Margin="{TemplateBinding Padding}"/>
                        </Border>
                        <RepeatButton Grid.Column="0" CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Command="{x:Static ScrollBar.LineUpCommand}" Focusable="false" Grid.Row="0" Style="{StaticResource MenuScrollButton}">
                            <RepeatButton.Visibility>
                                <MultiBinding ConverterParameter="0" Converter="{StaticResource MenuScrollingVisibilityConverter}" FallbackValue="Visibility.Collapsed">
                                    <Binding Path="ComputedVerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}"/>
                                    <Binding Path="VerticalOffset" RelativeSource="{RelativeSource TemplatedParent}"/>
                                    <Binding Path="ExtentHeight" RelativeSource="{RelativeSource TemplatedParent}"/>
                                    <Binding Path="ViewportHeight" RelativeSource="{RelativeSource TemplatedParent}"/>
                                </MultiBinding>
                            </RepeatButton.Visibility>
                            <Path Data="{StaticResource UpArrow}" Fill="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
                        </RepeatButton>
                        <RepeatButton Grid.Column="0" CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Command="{x:Static ScrollBar.LineDownCommand}" Focusable="false" Grid.Row="2" Style="{StaticResource MenuScrollButton}">
                            <RepeatButton.Visibility>
                                <MultiBinding ConverterParameter="100" Converter="{StaticResource MenuScrollingVisibilityConverter}" FallbackValue="Visibility.Collapsed">
                                    <Binding Path="ComputedVerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}"/>
                                    <Binding Path="VerticalOffset" RelativeSource="{RelativeSource TemplatedParent}"/>
                                    <Binding Path="ExtentHeight" RelativeSource="{RelativeSource TemplatedParent}"/>
                                    <Binding Path="ViewportHeight" RelativeSource="{RelativeSource TemplatedParent}"/>
                                </MultiBinding>
                            </RepeatButton.Visibility>
                            <Path Data="{StaticResource DownArrow}" Fill="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
                        </RepeatButton>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <ControlTemplate x:Key="{ComponentResourceKey ResourceId=SubmenuContent, TypeInTargetAssembly={x:Type FrameworkElement}}" TargetType="{x:Type ContentControl}">
        <Border BorderBrush="#FF959595" BorderThickness="1" Background="#3f3f46">
            <Grid>
                <ContentPresenter Grid.ColumnSpan="2" Margin="1,0"/>
            </Grid>
        </Border>
    </ControlTemplate>
    <ControlTemplate x:Key="{ComponentResourceKey ResourceId=TopLevelHeaderTemplateKey, TypeInTargetAssembly={x:Type MenuItem}}" TargetType="{x:Type MenuItem}">
        <Grid SnapsToDevicePixels="true">
            <Rectangle x:Name="OuterBorder" RadiusY="2" Radius

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...