OnmouseOver on hyperlink showing image in mvvm mvvm light wpf

Question

Hi,

I want to use hyperlink in wpf xaml. Whenever mouse comes over the hyperlink, it should show image related to that hyperlink and when mouse gets away the image should disappear. How to go about this using bindings. I am using mvvm light.

Kindly Suggest.

Thanks

Answer 1

The basic framework of what you will need, if you want to accomplish this in an MVVM style is...

You will need to start by setting up a Behavior to Command the Hyperlinks MouseEnter MouseLeave events.

<Hyperlink NavigateUri="Uri">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseEnter">
            <Command:EventToCommand Command="HoverCommand" PassEventArgs="True" />
        </i:EventTrigger>
    <i:Interaction.Triggers>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseLeave">
            <Command:EventToCommand Command="HoverCommand" PassEventArgs="True" />
        </i:EventTrigger>
    <i:Interaction.Triggers>
    Link text.
</Hyperlink>

Now setup a control that will hover when the its DataContext is not null

Use the command to set the controls DataContext on hover to the Uri of the image, on Leave set the datacontext to null.