Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 284
Swooper Avatar asked Apr 28 '11 17:04

Swooper


1 Answers

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

like image 73
Fahad Avatar answered Dec 22 '22 19:12

Fahad