How to change a path fill (on a button) with triggers in XAML

Question

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>

can't you set the style trigger on the `Canvas`, rather than the `Path`? — paul, Jan 28 '13 at 12:42
What about trying `MouseEnter` and `MouseLeave` instead of `IsMouseOver`? — paul, Jan 28 '13 at 13:00
This will apply ONLY for the path, i want to to set the trigger for the whole button. — Yasi, Jan 28 '13 at 13:01

score 22 · Accepted Answer · answered Jan 28 '13 at 13:15

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>

Big Thanks, this what exactly i was looking for, (Binding the foreground with the button as ancestor. Thank you again! — Yasi, Jan 28 '13 at 13:20
@NeelamPrajapati You would typically do that in a ControlTemplate. Search StackOverflow for appropriate question. This was certainly already asked. — Clemens, Jul 13 '16 at 14:37
@NeelamPrajapati It's generally not a good idea to ask a question in a comment to an old one. Better write a new regular StackOverflow question. Then you may also want to delete your comments here. — Clemens, Jul 13 '16 at 14:44

How to change a path fill (on a button) with triggers in XAML

1 Answers1

Linked