Question

So I was trying to make a button that will change image when mouse over/out/down/up….

And came up with the following:

<Image>
    <Image.Style>
        <Style TargetType="{x:Type Image}">
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="True">
                    <Setter Property="Source" Value="/MyWPF;component/Resources/MediaPlayer/Play-Normal-icon.png"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Source" Value="/MyWPF;component/Resources/MediaPlayer/Play-Pressed-icon.png"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="Source" Value="/MyWPF;component/Resources/MediaPlayer/Play-Normal-icon.png"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Source" Value="/MyWPF;component/Resources/MediaPlayer/Play-Disabled-icon.png"/>
                </Trigger>
                <EventTrigger RoutedEvent="MouseDown">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Source" Duration="00:00:00.5">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                        <DiscreteObjectKeyFrame.Value>
                                            <BitmapImage UriSource="/MyWPF;component/Resources/MediaPlayer/Play-Hot-icon.png"/>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseUp">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Source" Duration="00:00:00.5">
                                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                        <DiscreteObjectKeyFrame.Value>
                                            <BitmapImage UriSource="/MyWPF;component/Resources/MediaPlayer/Play-Normal-icon.png"/>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>

The mouse over/out works prefectly.

But once I do a mouse click (down), the EventTriggers fired, I can see the image changed.

Release the mouse click (up), the EventTriggers fired again, I can see the image changed back to the way suppose to be.

Now I mouse over/out the image. It doens’t change image anymore….

But when I do mouse down/up is still working…

So I am gussing somehow the EventTrigger overrided the IsMouseOver triggers?

Does the EventTrigger will override the other triggers?

P.S.: For those whose read my previous question, sorry I didn’t know the problem was caused because the Button got disabled from the databinding.

Answer 1

This is because of dependency property value precedence, either change the other triggers to cause single frame animations or make the animations not hold their value.