How to click on a click, but still respond to guidance?

Question

The name says a lot about everything. Is there a way to make the image in the XAML code visible and not clickable (I'm trying to get the element to receive a click after it) and respond to mouseover events at the same time? The IsHitTestVisible property disables mouse hovering. Here's a snippet of code for reference (it actually uses a few additional MultiDataTriggers, but that doesn't matter here). Mouseover currently works, but clicking on it fails (adding IsHitTestVisible="True" does the opposite)

 <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> 

Answer 1

One simple way is to correctly align elements based on z-order. If you can move the image to the background and have the item you want to click at the top, you can easily make it work. Also, make things a bit transparent, you see the image larger than the element on top, which will make UX seamless.

Of course, you need to use a container like Grid, which can add several elements in the plane of the sample.

-Fahad