Change Fill color of Path used as Button Template on MouseOver

Question

I have a button that has it's Template setup to display a Path wrapped in a VisualBrush. The Path has its Fill assigned, but I want to change the Fill color when the button is moused over.

Visual Brush

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

Button Template

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

Do I need to have two different versions of my Path, one in each color? Or can this be achieved in a Style? I'd like to increase the size of the Path when moused over and change its color from grey to white, then decrease the size and change the color from white to grey when the mouse leaves.

I tried to bind the Path's Fill property to the Button's Foreground property, using RelativePath as recommend in another post. I basically wanted to achieve the same concept that the original poster in that thread wanted. The difference being that my Path is in a resource dictionary and not part of my Button itself.

Binding to Foreground attempt

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

I'm not sure how to resolve this issue. Any help would be appreciated.

score 0 · Answer 1 · answered Feb 24 '17 at 02:40

Use the IsMouseOver trigger:

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

You'll need to name your paths (e.g. <Path x:Name="NameOfPath" />) and substitute the appropriate colour in plus use an appropriate size for the RenderTransform scale

Can you show an example of the path name, please? My compiler says it can't recognise the name of my path although I've set it precisely with the `x:Name` attribute. — ygoe, Jan 24 '23 at 18:17

Change Fill color of Path used as Button Template on MouseOver

Visual Brush

Button Template

Binding to Foreground attempt

1 Answers1