Question

I need to show different image on mousehover of Image.
Presently i am doing like this

 <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <!-- Hover image -->
                                <Setter Property="Cursor" Value="Hand"/>
                                <Setter Property="Source" Value="C:\Users\Images\Hi.png"/>
                            </Trigger>
 </Style.Triggers>  

It is working fine. But i need to check the tag property of the Image before showing different picture.
That is, if Tag value is 1 i need show Hi1.png if its is 2 i need to show hi2.png.
I know this can be achieved through code behind by handling MouseEnter and MouseLeave events of image.
But i want to do it in XAML. Any clue?

Answer 1

You can use MultiDataTrigger.

Since DataTrigger operates on associated DataContext/Binding, you need to use Image control.

    <Style.Triggers> 
       <MultiDataTrigger>
        <MultiDataTrigger.Conditions>
            <Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsMouseOver}" Value="True"/>
            <Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag}" Value="1"/>

        </MultiDataTrigger.Conditions>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Source" Value="C:\Users\Images\Hi1.png"/>
        </MultiDataTrigger>

        <MultiDataTrigger>
        <MultiDataTrigger.Conditions>
            <Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsMouseOver}" Value="True"/>
            <Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag}" Value="2"/>

        </MultiDataTrigger.Conditions>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Source" Value="C:\Users\Images\Hi2.png"/>
        </MultiDataTrigger>
    </Style.Triggers>