none
wpf 开发遇到问题 menu 控件 我把鼠标放在一级菜单上背景会发生改变,放到二级菜单上背景就没有变化(效果是鼠标移进移出背景颜色发生改变) RRS feed

  • 问题

  • 我现在的做法是这样子,二级菜单背景颜色没有变化,其它可以

    <Style x:Key="MenuItemChild" TargetType="{x:Type MenuItem}">
                <Style.Setters>
                    <Setter Property="Foreground" Value="black"></Setter>
                    <Setter Property="Cursor" Value="Hand"></Setter>
                </Style.Setters>
                <Style.Triggers>
                    <Trigger Property="MenuItem.IsMouseOver" Value="true">

                        <Setter Property="Background" Value="Orange" />
                        <Setter Property="Foreground" Value="red"></Setter>
                    </Trigger>
                    <Trigger Property="MenuItem.IsPressed" Value="true">
                        <Setter Property="Background" Value="Orange"></Setter>
                        <Setter Property="Foreground" Value="red"></Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>

    2012年5月22日 7:30

答案

  • 因为MenuItem本身默认的模板中,有一个Rectangle是用来显示其鼠标Over以及选中时候的背景色的,他默认的时候是TemplateBinding到背景色,但是触发器会修改器到一个Brush,失去绑定,所以你用 IsMouseOver 触发器来修改背景色会无效。

    下面是MenuItem的默认模板:

    <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>

    实现方法,用一个自己定义的Bursh去重载覆盖MenuItemSelectionFill这个画刷,即可:

      <SolidColorBrush x:Key="MenuItemSelectionFill" Color="Green"/>
      <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}">
          <!-- 复制上面的默认模板 -->
      </ControlTemplate>

    然后你系统中的MenuItem在鼠标Over时候是绿色显示。


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年5月23日 3:30
    版主