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>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With