路径上的按钮 IsMouseOver 触发器不起作用答案

【问题标题】：Button IsMouseOver trigger on Path not working路径上的按钮 IsMouseOver 触发器不起作用
【发布时间】：2016-12-08 05:57:05
【问题描述】：

我有包含 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>

【问题讨论】：

标签： wpf xaml

【解决方案1】：

只需从Path 中删除属性Fill 并仅在Style 中设置橙色值。除了实现两个Trigger，您可以只使用一个并通过Setter 直接在Style 中设置False 值。如果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>

【讨论】：

【解决方案2】：

这是另一种方式

 <Button x:Name="btn"
                Grid.Row="0"
                Grid.Column="8"
                Width="100"
                Height="100"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                HorizontalContentAlignment="Center"
                VerticalContentAlignment="Center">
            <Path Width="50"
                  Height="50"
                  Margin="0,0,0,0"
                  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"
                  RenderTransformOrigin="0.5,0.5"
                  Stretch="Uniform">
                <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 ElementName=btn, Path=IsMouseOver}" Value="True">
                                <Setter Property="Fill" Value="#FF5733" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding ElementName=btn, Path=IsMouseOver}" Value="False">
                                <Setter Property="Fill" Value="Orange" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Path.Style>
            </Path>

        </Button>

【讨论】：