WPF change Image when mouse hover on button

Question

I'm trying to change the image when mouse is over a button, but it's not working here is what am trying to do :

<Button x:Name="Play" Content="" ClickMode="Press" BorderThickness="0" UseLayoutRounding="True" Height="120" Width="224">
    <Button.Background>
        <ImageBrush ImageSource="Resources/Play 1.gif"/>
    </Button.Background>
    <Button.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="ImageBrush.ImageSource" Value="Resources/Play 2.gif"></Setter>
        </Trigger>
    </Button.Triggers>
</Button>

But this gives me this error : Triggers collection members must be of type EventTrigger.

How would I make it work?

Answer 1

It's correct - you can only put EventTriggers in there. You need to move your Trigger into the button's Style:

<Button x:Name="Play" Content="" ClickMode="Press" BorderThickness="0" UseLayoutRounding="True" Height="120" Width="224">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="..\Resources\Play 1.gif"/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background">
                        <Setter.Value>
                            <ImageBrush ImageSource="..\Resources\Play 2.gif"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
         </Style>
    </Button.Style>
</Button>

Something like that, I think (haven't tested it).

EDIT: This switches between the correct images, but it doesn't work correctly (it starts off with Play 1.gif, transitions to Play 2.gif, but then transitions to the button's underlying colour). I think you'll have to override the button's ControlTemplate to prevent this from happening, as suggested in the comments.