wpf - 在 MouseOver 上更改用作按钮模板的路径的填充颜色

Question

我有一个按钮，它的 Template 设置显示 Path 包裹在 VisualBrush 中。 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，每种颜色各一个？或者这可以通过 Style 实现吗？我想在鼠标悬停时增加路径的大小并将其颜色从灰色更改为白色，然后在鼠标离开时减小大小并将颜色从白色更改为灰色。

我尝试将 Path 的 Fill 属性绑定(bind)到 Button 的 Foreground 属性，使用RelativePath 作为 recommend in another post 。我基本上想实现与该线程中的原始发布者想要的相同概念。不同之处在于我的 Path 在资源字典中而不是我的 Button 本身的一部分。

绑定(bind)到前台尝试

<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 比例使用适当的大小