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

只需从Fill移除属性Path，然后仅在Style中设置橙色值。您可以直接使用Trigger False中的Style值，而不是实现两个Setter。如果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>

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

Path上的按钮IsMouseOver触发器无法正常工作

2 个答案: