Change Image when mouse is over with Binding c# WPF

Question

I am doing a program in WPF that has different rectangles disposed inside a grid. They all have an imagesource binding that makes the image change dynamically throughout the program. It's similar to the 2048. The thing is that now I want to make this rectangle change its imagesource when the mouse is over it. Like I already did an imagesource binding I cant figure out how to do it.

<ListBox Grid.Row="1" ItemsSource="{Binding Tiles}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Border  Background="{Binding Converter={StaticResource BackgroundColor2048Converter}}" Width="106.25px" Height="106.25px" CornerRadius="3"  BorderThickness="1" VerticalAlignment="Stretch" Focusable="False" HorizontalAlignment="Stretch" Margin="7">
                        <Rectangle Width="104.25px" Height="104.25px" MouseEnter="Rectangle_MouseEnter" MouseLeave="Rectangle_MouseLeave" >
                            <Rectangle.Fill>
                                <ImageBrush ImageSource="{Binding Converter={StaticResource ImageBackgroundColor2048Converter}, Mode=OneWay}"/>
                            </Rectangle.Fill>
                        </Rectangle>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

That's the xaml code regarding the rectangle. The imagesource converter works and is used to change the image during the game. But now I want to change that image too when the mouseenter event triggers. And thats where I am completely lost to, on how to do it.

Answer 1

You do this through a trigger:

 <Rectangle Width="104.25px" Height="104.25px" MouseEnter="Rectangle_MouseEnter" MouseLeave="Rectangle_MouseLeave" >
    <Rectangle.Style>
        <Style TargetType="{x:Type Rectangle}">
            <Setter Property="Fill" >
                <Setter.Value>
                        <ImageBrush ImageSource="{Binding Converter={StaticResource ImageBackgroundColor2048Converter}, Mode=OneWay}"/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="Rectangle.IsMouseOver" Value="True">
                    <Setter Property="Fill" >
                        <Setter.Value>
                             <!-- Whatever you want here -->
                            <ImageBrush ImageSource="{Binding MouseOverImageUri}" /> 
                        </Setter.Value>
                    </Setter>
                </Trigger>
        </Style>
    </Rectangle.Style>
</Rectangle>

Note that you have to set the default value through a style. The reason for this is that triggers override styles, but directly applied attributes override triggers. In this case, you want the trigger to win.