WPF - MenuItem突出显示具有不需要的辅助突出显示

时间：2013-06-03 16:38:26

标签： wpf button wpf-controls contextmenu highlighting

我在ContextMenu上有一个Button，当显示时会显示一个菜单项列表，这很好。如果我将鼠标移到菜单中的某个项目上，它会突出显示，但当我将鼠标悬停在文本上方和周围时，我也会得到次要突出显示，请参阅下面的图片。

incorrect-image

如何删除此内容？我已经尝试了所有类型的样式，触发器和各种其他模板来删除突出显示，但似乎无法正常工作或显示。

我的上下文菜单按钮也没有什么特别之处，请参阅下面的wpf。

<Button.ContextMenu>
    <ContextMenu ItemsSource="{Binding SelectedTreeItem.MetaTargets}">
        <ContextMenu.ItemTemplate>
            <DataTemplate >
                <MenuItem Header="{Binding Name}"
                          Command="{Binding Path=SelectedTreeItem.AddTargetCommandRelay, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"
                          CommandParameter="{Binding}"
                 />
            </DataTemplate>
        </ContextMenu.ItemTemplate>
    </ContextMenu>
</Button.ContextMenu>

理想情况下，我希望它在突出显示时看起来像这样，无论鼠标位于突出显示项目的范围内，请参见下图。

enter image description here

4 个答案:

答案 0 :(得分：1)

我对ContextMenu实例使用以下样式。显然你可以改变颜色以适应。

<Style x:Key="ContextMenuStyle"  TargetType="{x:Type ContextMenu}">
    <Setter Property="Background" Value="LightBlue"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ContextMenu}">
                <Border BorderThickness="1"
                        BorderBrush="LightBlue">
                    <StackPanel IsItemsHost="True"
                                Background="{TemplateBinding Background}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

编辑：

如果这不起作用，您可以沿着重新设置MenuItem的路线走下去。这是一个例子：

    <ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}"
                     TargetType="MenuItem">
        <Border Name="Border" >
            <Grid>
                <ContentPresenter  Margin="6,3,6,3" 
                                   ContentSource="Header"
                                   RecognizesAccessKey="True" />
                <Popup Name="Popup"
                       Placement="Bottom"
                       IsOpen="{TemplateBinding IsSubmenuOpen}"
                       AllowsTransparency="True" 
                       Focusable="False"
                       PopupAnimation="Fade">
                    <Border Name="SubmenuBorder"
                            SnapsToDevicePixels="True"
                            Background="#FF2D2D30"
                            BorderBrush="#FF2D2D30"
                            BorderThickness="1" >
                        <StackPanel IsItemsHost="True" 
                                    KeyboardNavigation.DirectionalNavigation="Cycle" />
                    </Border>
                </Popup>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsSuspendingPopupAnimation" Value="true">
                <Setter TargetName="Popup" Property="PopupAnimation" Value="None"/>
            </Trigger>
            <Trigger Property="IsHighlighted" Value="true">
                <Setter TargetName="Border" Property="Background" Value="DimGray"/>
                <Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
            </Trigger>
            <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
                <Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4"/>
                <Setter TargetName="SubmenuBorder" Property="Padding" Value="0,0,0,3"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Foreground" Value="LightSlateGray"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <ControlTemplate x:Key="{x:Static MenuItem.TopLevelItemTemplateKey}" TargetType="MenuItem">
        <Border Name="Border" >
            <Grid>
                <ContentPresenter Margin="6,3,6,3" 
                                  ContentSource="Header"
                                  RecognizesAccessKey="True" />
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsHighlighted" Value="true">
                <Setter TargetName="Border" Property="Background" Value="DimGray"/>
                <Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Foreground" Value="LightSlateGray"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <ControlTemplate x:Key="{x:Static MenuItem.SubmenuItemTemplateKey}" TargetType="MenuItem">
        <Border Name="Border" >
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Icon"/>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Shortcut"/>
                    <ColumnDefinition Width="13"/>
                </Grid.ColumnDefinitions>
                <ContentPresenter Name="Icon"
                                  Margin="6,0,6,0"
                                  VerticalAlignment="Center"
                                  ContentSource="Icon"/>
                <Border Name="Check"  
                        Width="13" Height="13" 
                        Visibility="Collapsed"
                        Margin="6,0,6,0" 
                        Background="#FF2D2D30"
                        BorderThickness="1"
                        BorderBrush="#FF2D2D30">
                    <Path Name="CheckMark"
                          Width="7" Height="7" 
                          Visibility="Hidden" 
                          SnapsToDevicePixels="False" 
                          Stroke="DodgerBlue"
                          StrokeThickness="2"
                          Data="M 0 0 L 7 7 M 0 7 L 7 0" />
                </Border>
                <ContentPresenter Name="HeaderHost"
                                  Grid.Column="1"
                                  ContentSource="Header"
                                  RecognizesAccessKey="True"/>
                <TextBlock x:Name="InputGestureText"
                           Grid.Column="2"
                           Text="{TemplateBinding InputGestureText}"
                           Margin="5,2,0,2"
                           DockPanel.Dock="Right" />
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="Icon" Value="{x:Null}">
                <Setter TargetName="Icon" Property="Visibility" Value="Hidden"/>
            </Trigger>
            <Trigger Property="IsChecked" Value="true">
                <Setter TargetName="CheckMark" Property="Visibility" Value="Visible"/>
            </Trigger>
            <Trigger Property="IsCheckable" Value="true">
                <Setter TargetName="Check" Property="Visibility" Value="Visible"/>
                <Setter TargetName="Icon" Property="Visibility" Value="Hidden"/>
            </Trigger>
            <Trigger Property="IsHighlighted" Value="true">
                <Setter TargetName="Border" Property="Background" Value="DimGray"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Foreground" Value="LightSlateGray"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <ControlTemplate x:Key="{x:Static MenuItem.SubmenuHeaderTemplateKey}"  TargetType="MenuItem">
        <Border Name="Border" >
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="13" SharedSizeGroup="Icon"/>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Shortcut"/>
                    <ColumnDefinition Width="13"/>
                </Grid.ColumnDefinitions>
                <ContentPresenter Name="Icon"
                                  Margin="6,0,6,0"
                                  VerticalAlignment="Center"
                                  ContentSource="Icon"/>
                <ContentPresenter Name="HeaderHost"
                                  Grid.Column="1"
                                  ContentSource="Header"
                                  RecognizesAccessKey="True"/>
                <TextBlock x:Name="InputGestureText"
                           Grid.Column="2"
                           Text="{TemplateBinding InputGestureText}"
                           Margin="5,2,2,2"
                           DockPanel.Dock="Right"/>
                <Path Grid.Column="3"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Center"
                      Data="M 0 0 L 0 7 L 4 3.5 Z" 
                      Fill="DodgerBlue" />
                <Popup Name="Popup"
                       Placement="Right"
                       HorizontalOffset="-4" 
                       IsOpen="{TemplateBinding IsSubmenuOpen}"
                       AllowsTransparency="True" 
                       Focusable="False"
                       PopupAnimation="Fade">
                    <Border Name="SubmenuBorder"
                            SnapsToDevicePixels="True"
                            Background="#FF2D2D30"
                            BorderBrush="#FF2D2D30"
                            BorderThickness="1" >
                        <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
                    </Border>
                </Popup>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="Icon" Value="{x:Null}">
                <Setter TargetName="Icon" Property="Visibility" Value="Collapsed"/>
            </Trigger>
            <Trigger Property="IsHighlighted" Value="true">
                <Setter TargetName="Border" Property="Background" Value="DimGray"/>
            </Trigger>
            <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
                <Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="4"/>
                <Setter TargetName="SubmenuBorder" Property="Padding" Value="0,3,0,3"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Foreground" Value="LightSlateGray"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style x:Key="MenuItemStyle" TargetType="MenuItem">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Style.Triggers>
            <Trigger Property="Role" Value="TopLevelHeader">
                <Setter Property="Template" Value="{StaticResource {x:Static MenuItem.TopLevelHeaderTemplateKey}}"/>
                <Setter Property="Grid.IsSharedSizeScope" Value="true"/>
            </Trigger>
            <Trigger Property="Role" Value="TopLevelItem">
                <Setter Property="Template" Value="{StaticResource {x:Static MenuItem.TopLevelItemTemplateKey}}"/>
            </Trigger>
            <Trigger Property="Role" Value="SubmenuHeader">
                <Setter Property="Template" Value="{StaticResource {x:Static MenuItem.SubmenuHeaderTemplateKey}}"/>
            </Trigger>
            <Trigger Property="Role" Value="SubmenuItem">
                <Setter Property="Template" Value="{StaticResource {x:Static MenuItem.SubmenuItemTemplateKey}}"/>
            </Trigger>
        </Style.Triggers>
    </Style>

答案 1 :(得分：1)

这是一个非常晚的答案，但也许它可以帮助某人。

第二个亮点就在那里，因为你在原版内部实际上有一个额外的MenuItem。

这有点违反直觉，但是当您在WPF中绑定菜单的ItemsSource时，它会自动创建MenuItem而不给它一个DataTemplate。您提供的DataTemplate实际上是在最初创建的MenuItem中的ContentPresenter内。

所以你应该使用ItemContainerStyle来设置MenuItem的样式，而不是给它一个DataTemplate。

我现在没有机会尝试以下代码，但它应该解决问题：

<Button.ContextMenu>
    <ContextMenu ItemsSource="{Binding SelectedTreeItem.MetaTargets}">
        <ContextMenu.ItemContainerStyle>
            <Style TargetType="MenuItem">
                <Style.Setters>
                    <Setter Property="Header" Value="{Binding Name}"/>
                    <Setter Property="Command" Value="{Binding Path=SelectedTreeItem.AddTargetCommandRelay, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"/>
                    <Setter Property="CommandParameter" Value="{Binding}"/>
                </Style.Setters>
            </Style>
        </ContextMenu.ItemContainerStyle>
    </ContextMenu>
</Button.ContextMenu>

答案 2 :(得分：0)

我遇到了同样的问题，并使用仅包含Label的自定义MenuItem模板解决了这个问题：

<ContextMenu ItemsSource="{Binding ReportLayouts}" x:Name="CtxReportsMenu">
   <ContextMenu.ItemTemplate>
       <DataTemplate>
          <MenuItem Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}, Path=DataContext.ReportCmd}"
                    CommandParameter="{Binding }">
             <MenuItem.Template>
                <ControlTemplate>
                   <Label Content="{Binding Report_Description}"/>
                </ControlTemplate>
             </MenuItem.Template>
           </MenuItem>
       </DataTemplate>
   </ContextMenu.ItemTemplate>

答案 3 :(得分：0)

只需从默认的MenuItem模板中删除Property="IsHighlighted"触发器：

<ControlTemplate 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" Content="{TemplateBinding Icon}" ContentSource="Icon" Margin="1" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
            <Border x:Name="GlyphPanel" BorderBrush="#FFCDD3E6" BorderThickness="1" Background="#FFE6EFF4" CornerRadius="3" Height="22" Margin="1" Visibility="Hidden" Width="22">
                <Path x:Name="Glyph" Data="M0,5.1L1.7,5.2 3.4,7.1 8,0.4 9.2,0 3.3,10.8z" Fill="#FF0C12A1" FlowDirection="LeftToRight" Height="11" Width="9"/>
            </Border>
            <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="2" ContentStringFormat="{TemplateBinding HeaderStringFormat}" 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">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                        <GradientStop Color="#34C5EBFF" Offset="0"/>
                        <GradientStop Color="#3481D8FF" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <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="#FFEEE9E9"/>
            <Setter Property="BorderBrush" TargetName="GlyphPanel" Value="#FFDBD6D6"/>
            <Setter Property="Fill" TargetName="Glyph" Value="#FF848589"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
相关问题
最新问题