Button IsMouseOver trigger on Path not working

Question

I have button with custom content containing a Path element. The Path's Fill property is wired with the button's IsMouseOver property.

Can any anybody point out whats wrong with the code & why the trigger is not firing.

Below is the complete sample code -

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Grid.Row="0"
                Grid.Column="8"
                VerticalAlignment="Center"
                HorizontalAlignment="Center"
                HorizontalContentAlignment="Center"
                VerticalContentAlignment="Center">
            <Path Width="10"
                Height="10"                      
                Margin="0,0,0,0"
                Fill="Orange"
                Stretch="Uniform"
                RenderTransformOrigin="0.5,0.5"
                Data="M7.1999998,0L16,8.7999997 24.799999,0 32,7.1999998 23.2,16 32,24.799999 24.799999,32 16,23.2 7.1999998,32 0,24.799999 8.7999997,16 0,7.1999998z">
                <Path.RenderTransform>
                    <TransformGroup>
                        <TransformGroup.Children>
                            <RotateTransform Angle="0" />
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                        </TransformGroup.Children>
                    </TransformGroup>
                </Path.RenderTransform>
                <Path.Style>
                    <Style TargetType="{x:Type Path}">
                        <Style.Triggers>
                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True" >
                                <Setter Property="Fill" Value="#FF5733" ></Setter>
                            </DataTrigger>
                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="False" >
                                <Setter Property="Fill" Value="Orange" ></Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Path.Style>
            </Path>
        </Button>
    </Grid>
</Window>

Answer 1

just remove the property Fill from Path and set the Orange value only in Style. Instead of implementing two Trigger, you can use only one and set the False value in Style by Setter directly. This default value will be set if Trigger doesn't match.

<Button Grid.Row="0"
        Grid.Column="8"
        VerticalAlignment="Center"
        HorizontalAlignment="Center"
        HorizontalContentAlignment="Center"
        VerticalContentAlignment="Center">
    <Path Width="10"
          Height="10"                      
          Margin="0,0,0,0"
          Stretch="Uniform"
          RenderTransformOrigin="0.5,0.5"
          Data="M7.1999998,0L16,8.7999997 24.799999,0 32,7.1999998 23.2,16 32,24.799999 24.799999,32 16,23.2 7.1999998,32 0,24.799999 8.7999997,16 0,7.1999998z">
        <Path.RenderTransform>
            <TransformGroup>
                <TransformGroup.Children>
                    <RotateTransform Angle="0" />
                        <ScaleTransform ScaleX="1" ScaleY="1" />
                </TransformGroup.Children>
            </TransformGroup>
        </Path.RenderTransform>
        <Path.Style>
            <Style TargetType="{x:Type Path}">
                <Setter Property="Fill" Value="Orange" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True" >
                        <Setter Property="Fill" Value="#FF5733" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Path.Style>
    </Path>
</Button>

Answer 2

Here is another way

 <Button x:Name="btn"
                Grid.Row="0"
                Grid.Column="8"
                Width="100"
                Height="100"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                HorizontalContentAlignment="Center"
                VerticalContentAlignment="Center">
            <Path Width="50"
                  Height="50"
                  Margin="0,0,0,0"
                  Data="M7.1999998,0L16,8.7999997 24.799999,0 32,7.1999998 23.2,16 32,24.799999 24.799999,32 16,23.2 7.1999998,32 0,24.799999 8.7999997,16 0,7.1999998z"
                  RenderTransformOrigin="0.5,0.5"
                  Stretch="Uniform">
                <Path.RenderTransform>
                    <TransformGroup>
                        <TransformGroup.Children>
                            <RotateTransform Angle="0" />
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                        </TransformGroup.Children>
                    </TransformGroup>
                </Path.RenderTransform>
                <Path.Style>
                    <Style TargetType="{x:Type Path}">

                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=btn, Path=IsMouseOver}" Value="True">
                                <Setter Property="Fill" Value="#FF5733" />
                            </DataTrigger>
                            <DataTrigger Binding="{Binding ElementName=btn, Path=IsMouseOver}" Value="False">
                                <Setter Property="Fill" Value="Orange" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Path.Style>
            </Path>

        </Button>