wpf - 路径上的按钮 IsMouseOver 触发器不起作用

Question

我有一个带有包含 Path 元素的自定义内容的按钮。 Path 的 Fill 属性与按钮的 IsMouseOver 属性关联。

任何人都可以指出代码有什么问题以及触发器没有触发的原因。

下面是完整的示例代码-

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Grid.Row="0"
                Grid.Column="8"
                VerticalAlignment="Center"
                HorizontalAlignment="Center"
                HorizontalContentAlignment="Center"
                VerticalContentAlignment="Center">
            <Path Width="10"
                Height="10"                      
                Margin="0,0,0,0"
                Fill="Orange"
                Stretch="Uniform"
                RenderTransformOrigin="0.5,0.5"
                Data="M7.1999998,0L16,8.7999997 24.799999,0 32,7.1999998 23.2,16 32,24.799999 24.799999,32 16,23.2 7.1999998,32 0,24.799999 8.7999997,16 0,7.1999998z">
                <Path.RenderTransform>
                    <TransformGroup>
                        <TransformGroup.Children>
                            <RotateTransform Angle="0" />
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                        </TransformGroup.Children>
                    </TransformGroup>
                </Path.RenderTransform>
                <Path.Style>
                    <Style TargetType="{x:Type Path}">
                        <Style.Triggers>
                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True" >
                                <Setter Property="Fill" Value="#FF5733" ></Setter>
                            </DataTrigger>
                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="False" >
                                <Setter Property="Fill" Value="Orange" ></Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Path.Style>
            </Path>
        </Button>
    </Grid>
</Window>

Answer 1

只需从 Path 中删除属性 Fill 并仅在 Style 中设置 Orange 值。 您可以只使用一个并通过 Setter 直接在 Style 中设置 False 值，而不是实现两个 Trigger。如果 Trigger 不匹配，将设置此默认值。

<Button Grid.Row="0"
        Grid.Column="8"
        VerticalAlignment="Center"
        HorizontalAlignment="Center"
        HorizontalContentAlignment="Center"
        VerticalContentAlignment="Center">
    <Path Width="10"
          Height="10"                      
          Margin="0,0,0,0"
          Stretch="Uniform"
          RenderTransformOrigin="0.5,0.5"
          Data="M7.1999998,0L16,8.7999997 24.799999,0 32,7.1999998 23.2,16 32,24.799999 24.799999,32 16,23.2 7.1999998,32 0,24.799999 8.7999997,16 0,7.1999998z">
        <Path.RenderTransform>
            <TransformGroup>
                <TransformGroup.Children>
                    <RotateTransform Angle="0" />
                        <ScaleTransform ScaleX="1" ScaleY="1" />
                </TransformGroup.Children>
            </TransformGroup>
        </Path.RenderTransform>
        <Path.Style>
            <Style TargetType="{x:Type Path}">
                <Setter Property="Fill" Value="Orange" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True" >
                        <Setter Property="Fill" Value="#FF5733" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Path.Style>
    </Path>
</Button>