CODEWITHSUNDEEP
wpfxaml
ironhide391
ironhide391

Reputation: 595

Button IsMouseOver trigger on Path not working

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>

Upvotes: 3

Views: 947

Answers (2)

WPFGermany
WPFGermany

Reputation: 1649

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>

Upvotes: 3

Vijay
Vijay

Reputation: 673

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>

Upvotes: 2

Related Questions