I have a button with a path as icon,i want to change the fill of the path when the mouse is over the whole button (not only the path). Thanks.
<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>
You may bind Path.Fill
to the Foreground property of the Button and modify the Foreground in a Button Style:
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With