Question

标题几乎说明了一切。有没有办法让XAML代码中的图像可见，而不是可点击（我试图使其后面的元素接收到点击）并同时响应鼠标悬停事件？ IsHitTestVisible属性禁用鼠标悬停。这是一个供参考的代码片段（它实际上使用了多个额外的MultiDataTriggers，但这里不相关）。目前鼠标悬停工作但点击它不起作用（添加IsHitTestVisible="True"使其成为另一种方式）

<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

一种简单的方法是根据z顺序正确对齐元素。如果您可以将图像移动到背面，并且要在顶部单击要素，则可以轻松实现此功能。此外，让事情看起来有点透明，你看到的图像比顶部的元素更多，这将使UX无缝。

当然，您需要使用像Grid这样的容器，它可以在样本平面中添加多个元素。

-Fahad

制作图像点击，但仍然响应鼠标悬停？

1 个答案: