更改鼠标悬停时用作按钮模板的路径的填充颜色

Question

我有一个按钮，它的Template设置用于显示包裹在VisualBrush中的Path。Path分配了Fill，但我想在鼠标悬停在按钮上时更改Fill的颜色。

视觉画笔

<VisualBrush x:Key="EditIconBrush" Stretch="Uniform">
    <VisualBrush.Visual>
        <Canvas Width="24" Height="24">
            <Path Fill="White" Data="M20.71,4.04C21.1,3.65 21.1,3 20.71,2.63L18.37,0.29C18,-0.1 17.35,-0.1 16.96,0.29L15,2.25L18.75,6M17.75,7L14,3.25L4,13.25V17H7.75L17.75,7Z" />
        </Canvas>
    </VisualBrush.Visual>
</VisualBrush>

按钮模板

<ControlTemplate x:Key="ButtonIconTemplate" 
                 TargetType="Button">
    <Grid>
        <Rectangle Fill="Transparent" />
        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            Content="{TemplateBinding Content}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
    </Grid>
</ControlTemplate>
<Button DockPanel.Dock="Right" Margin="0 0 10 0" 
        Command="{Binding RelativeSource={RelativeSource AncestorType=Expander}, Path=DataContext.AddFieldCommand}"
        Template="{StaticResource ButtonIconTemplate}">                                        
    <Rectangle Width="20" Height="20" Fill="{DynamicResource EditIconBrush}" />
</Button>

我需要有两个不同版本的Path，每种颜色一个吗？或者这可以用一种风格来实现吗？我想在鼠标悬停时增加Path的大小并将其颜色从灰色更改为白色，然后在鼠标离开时减小大小并将颜色从白色更改为灰色。

我尝试将Path的Fill属性绑定到Button的Foreground属性，在另一篇文章中建议使用RelativePath。我基本上想实现与该帖子中的原始海报相同的概念。不同的是，我的Path在资源字典中，而不是Button本身的一部分。

绑定到前景尝试

<Button DockPanel.Dock="Right" Margin="0 0 10 0" 
        Foreground="White"
        Command="{Binding RelativeSource={RelativeSource AncestorType=Expander}, Path=DataContext.AddFieldCommand}"
        Template="{DynamicResource ButtonIconTemplate}">                                        
    <Rectangle Width="20" Height="20" Fill="{DynamicResource EditIconBrush}" />
</Button>
<VisualBrush x:Key="EditIconBrush" Stretch="Uniform">
    <VisualBrush.Visual>
        <Canvas Width="24" Height="24">
            <Path Fill="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" 
                  Data="M20.71,4.04C21.1,3.65 21.1,3 20.71,2.63L18.37,0.29C18,-0.1 17.35,-0.1 16.96,0.29L15,2.25L18.75,6M17.75,7L14,3.25L4,13.25V17H7.75L17.75,7Z" />
        </Canvas>
    </VisualBrush.Visual>
</VisualBrush>

我不知道如何解决这个问题。如有任何帮助，我们将不胜感激。

Answer 1

使用IsMouseOver触发器：

<ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter TargetName="NameOfPath" Property="Fill" Value="Colour" />
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform ScaleX="2" ScaleY="2" />
            </Setter.Value>
        </Setter>
        <Setter Property="RenderTransformOrigin" Value="0.5, 0.5" />
    </Trigger>
</ControlTemplate.Triggers>

您需要命名您的路径（例如<Path x:Name="NameOfPath" />），并在中替换适当的颜色，再加上使用适当大小的RenderTransform比例