WPF - 菜单中的小白点

Posted 2023-02-22

【中文标题】WPF - 菜单中的小白点

【英文标题】：WPF - Little White Dots in Menu

【发布时间】：2019-01-31 12:55:11

【问题描述】：

我在设置控件模板的样式时遇到了问题，其中出现了小白点。我似乎找不到这些是从哪里来的……有什么想法吗？我在菜单下方添加了一张图片，然后在下方添加了 Blend 中的 ControlTemplate 样式。我正在使用 VS 2017 和 Blend 来制作样式。我是使用 Blend 的新手，所以我确信它是我缺少的东西

<ControlTemplate x:Key="MenuBarSubItem" TargetType="x:Type MenuItem">
    <Border x:Name="templateRoot" BorderBrush="TemplateBinding BorderBrush" BorderThickness="TemplateBinding BorderThickness" Background="#FF2D2D30" 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" Content="TemplateBinding Icon" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels" VerticalAlignment="Center" Width="16"/>
            <Border x:Name="Glyphpanel" BorderBrush="#FF26A0DA" BorderThickness="1" Background="#FF2D2D30" ClipToBounds="False" HorizontalAlignment="Center" Height="22" Margin="-1,0,0,0" Visibility="Hidden" VerticalAlignment="Center" Width="22">
                <Path x:Name="Glyph" 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" Height="11" Width="10"/>
            </Border>
            <ContentPresenter x:Name="menuHeaderContainer" ContentTemplate="TemplateBinding HeaderTemplate" Content="TemplateBinding Header" Grid.Column="2" ContentStringFormat="TemplateBinding HeaderStringFormat" ContentSource="Header" 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" Foreground="#FFD4D4D4"/>
        </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="SlateGray"/>
            <Setter Property="BorderBrush" TargetName="templateRoot" Value="SlateGray"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
            <Setter Property="Fill" TargetName="Glyph" Value="#FF707070"/>
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsHighlighted" Value="True"/>
                <Condition Property="IsEnabled" Value="False"/>
            </MultiTrigger.Conditions>
            <Setter Property="Background" TargetName="templateRoot" Value="#0A000000"/>
            <Setter Property="BorderBrush" TargetName="templateRoot" Value="#21000000"/>
        </MultiTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<SolidColorBrush x:Key="Menu.Static.Separator" Color="#FF747474"/>
<Style x:Key="MenuSeparator" TargetType="x:Type Separator">
    <Setter Property="Background" Value="StaticResource Menu.Static.Separator"/>
    <Setter Property="BorderBrush" Value="StaticResource Menu.Static.Separator"/>
    <Setter Property="MinHeight" Value="1"/>
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="x:Type Separator">
                <Border BorderBrush="TemplateBinding BorderBrush" BorderThickness="TemplateBinding BorderThickness" Background="#FF747474" Margin="30,0,0,0"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

同时添加菜单样式

    <ControlTemplate x:Key="MenuBarItem" TargetType="x:Type MenuItem">
    <Border x:Name="templateRoot" BorderBrush="TemplateBinding BorderBrush" BorderThickness="0" 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="TemplateBinding Foreground" 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"/>
            <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="SlateGray" BorderThickness="1" Background="#FF2D2D30" Padding="2">
                    <ScrollViewer x:Name="SubMenuScrollViewer" 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" Margin="29,2,0,2" 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="SlateGray"/>
            <Setter Property="BorderBrush" TargetName="templateRoot" Value="SlateGray"/>
        </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>

【问题讨论】：

你能分享完整的风格，包括菜单的风格吗？我认为问题不在于“MenuBarSubItem”，而在于为菜单定义的样式中的某处。

我也用菜单样式更新了原始帖子。对不起，我以为我最初也添加了。

【参考方案1】：

来自 cmets 的提示让我深入研究了原始菜单样式，并且有一个矩形导致了这个问题

<Rectangle Fill="#FFD7D7D7" HorizontalAlignment="Left" Margin="29,2,0,2" Width="1"/>

那是那个小盒子。

【讨论】：

是的，很抱歉，根据系统，我几天都无法接受答案。