Making an image click-through but still respond to mouseover?

Question

The title pretty much says it all. Is there a way to make an image in XAML code visible, not clickable (I'm trying to make the element behind it receive the click) and responsive to mouseover events at the same time? The IsHitTestVisible property disables the mouseover. Here's a code snippet for reference (it's actually using multiple additional MultiDataTriggers, but that's not relevant here). Currently mouseover works but clicking through it doesn't (adding IsHitTestVisible="True" makes it the other way around)

<Image Name="AutoUpdateStatus"
       Stretch="UniformToFill"
       Grid.Column="2" Grid.Row="0"
       Height="32" Width="32"
       HorizontalAlignment="Center"
       Margin="68,2,61,2"
       VerticalAlignment="Center">
    <Image.Style>
        <Style>
            <Setter Property="Image.Source">
                <Setter.Value>
                    <Binding Source="{x:Static res:AppResources.ok}">
                        <Binding.Converter>
                            <Helpers:IconToImageSourceConverter />
                        </Binding.Converter>
                    </Binding>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}" Value="True" />
                        <Condition Binding="{Binding Path=AutoUpdateStatusIcon}" Value="ok" />
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Image.Source">
                        <Setter.Value>
                            <Binding Source="{x:Static res:AppResources.ok_glow}">
                                <Binding.Converter>
                                    <Helpers:IconToImageSourceConverter />
                                </Binding.Converter>
                            </Binding>
                        </Setter.Value>
                     </Setter>
                 </MultiDataTrigger>
             </Style.Triggers>
         </Style>
     </Image.Style>
 </Image>

Good question, and I don't have the answer, but I'm thinking that there is no easy way to do what you're asking. If you know what will be behind the image, you could have it catch a preview event for mouse clicks. Otherwise, I would recommend catching the click on the image, and then using code, fire another event, possibly a simple custom event rather than the same mouse click. — Dale Barnard, Apr 28 '11 at 19:15

score 1 · Answer 1 · answered May 12 '11 at 18:52

One easy way is to properly align the elements based on z-order. If you can move the Image to the back, and have the element that you want to click on the top, You can easily get this working. Also, make things a bit transparent you see the image more than the element on the top, that would make the UX seamless.

Of course, you need to use a container like Grid that can add multiple elements in the sample plane.

-Fahad

Making an image click-through but still respond to mouseover?

1 Answers1