如何在XAML中使用触发器更改按钮路径填充

Question

我有一个带路径图标的按钮，当鼠标悬停在整个按钮上（而不仅仅是路径上）时，我希望改变路径的填充颜色。谢谢。

        <Button Name="Test_Button"
            Width="220"
            Height="80"
            Padding="2">

        <Canvas Width="76"
                Height="76"
                Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">

            <Path Canvas.Left="19"
                  Canvas.Top="19"
                  Width="38"
                  Height="38"
                  Data="F1 M 35,19L 41,19L 41,35L 57,35L 57,41L 41,41L 41,57L 35,57L 35,41L 19,41L 19,35L 35,35L 35,19 Z "
                  Stretch="Fill">
                <Path.Style>
                    <Style TargetType="{x:Type Path}">
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Path.Fill" Value="Red" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="False">
                                <Setter Property="Path.Fill" Value="Gray" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Path.Style>
            </Path>
        </Canvas>
    </Button>

- Yasi

---

你不能在Canvas上设置样式触发器，而不是在Path上吗？ - paul

不，我遇到了一个错误：等待类型：UIElement（VS2012） - Yasi

е°ќиЇ•дЅїз”ЁMouseEnterе’ЊMouseLeaveд»Јж›їIsMouseOverжЂЋд№€ж ·пјџ - paul

这仅适用于路径，我想为整个按钮设置触发器。 - Yasi

Answer 1

你可以将Path.Fill绑定到的Foreground属性，并在Button样式中修改Foreground：

<Button Name="Test_Button" Width="220" Height="80" Padding="2">
    <Canvas Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
        <Path Canvas.Left="19" Canvas.Top="19" Width="38" Height="38" Stretch="Fill"
              Fill="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}"
              Data="F1 M 35,19L 41,19L 41,35L 57,35L 57,41L 41,41L 41,57L 35,57L 35,41L 19,41L 19,35L 35,35L 35,19 Z">
        </Path>
    </Canvas>
    <Button.Style>
        <Style TargetType="Button">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="Red" />
                </Trigger>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="Foreground" Value="Gray" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

- Clemens

---

非常感谢，这正是我正在寻找的（将前景与按钮作为祖先绑定）。再次感谢！ - Yasi

@NeelamPrajapati 你通常会在ControlTemplate中完成这个操作。在StackOverflow上搜索适当的问题。这肯定已经被问过了。 - Clemens

@NeelamPrajapati 通常在旧评论中提出问题并不是一个好主意。最好写一个新的常规StackOverflow问题。然后您可能还想删除此处的评论。 - Clemens