Showing different image on mouse over in WPF Image

Question

I have a datatemplate used for datagridtemplatecolumn
I am trying to show different image on mouse over in Image.
On mouse over, the cursor is changing but image is not changing.

 <DataTemplate x:Key="MyDataTemplate" DataType="DataRowView">
        <StackPanel Orientation="Horizontal" Background="Transparent">
            <Image Margin="0,0,0,0"   Width="50" Height="50" Source="{Binding Converter={StaticResource SetImgToDG}}" ToolTip="{Binding}" >
                <Image.Resources>
                    <Style TargetType="{x:Type Image}">
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <!-- Hover image -->
                                <Setter Property="Cursor" Value="Hand"/>
                                <Setter Property="Source" Value="C:\Images\Coil3.png"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Image.Resources>
            </Image>
        </StackPanel>
    </DataTemplate>  

Is that binding creates the problem??
How to resolve it??

Answer 1

Your problem is that the initial source of the image is defined directly on the Source property of the image instance.

When there are multiple things that try to set the value of a dependency property, the framework has to decide which value to use.

In your case the value is being set directly on the image instance (locally) and also by a Trigger.
The local value will always win in this case, so nothing happens when the Trigger is activated.

If you set the initial value in the style instead, the Trigger will win when it tries to change the image source, and that will make the image change when the mouse hovers over it.

You can read more about how the value of a Dependency Property is being resolved on MSDN.

<Image.Resources>
    <Style TargetType="{x:Type Image}">
        <!-- Set the initial source in the style so the trigger can change it -->
        <Setter Property="Source" Value="{Binding Converter={StaticResource SetImgToDG}}" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <!-- Hover image -->
                <Setter Property="Cursor" Value="Hand"/>
                <Setter Property="Source" Value="C:\Images\Coil3.png"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Image.Resources>