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

【问题标题】：Change Fill color of Path used as Button Template on MouseOver在 MouseOver 上更改用作按钮模板的路径的填充颜色
【发布时间】：2015-06-14 01:25:57
【问题描述】：

我有一个按钮，它的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 的Fill 属性绑定到Button 的Foreground 属性，使用RelativePath 作为recommend in another post。我基本上想实现与该线程中的原始海报想要的相同概念。不同之处在于我的路径在资源字典中，而不是我的 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>

我不确定如何解决此问题。任何帮助将不胜感激。

【问题讨论】：

标签： wpf xaml styles controltemplate

【解决方案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 比例使用适当的大小

【讨论】：