Question

我有一个标签项，标题格式如下：image_margin_textblock。

当鼠标光标在图像上方时，以及在文本块上方，触发器IsMouseOver正常工作。但是，当鼠标光标位于Image和Textblock之间的边距上时，不会触发IsMouseOver触发器。这会产生恼人的闪烁效果。

您是否有任何想法如何实现鼠标悬停触发？

以下是代码：

<TabItem.Header>
<ContentControl>
    <ContentControl.Template>
        <ControlTemplate>
            <StackPanel x:Name="sp0" Orientation="Horizontal">
                <StackPanel x:Name="sp1" Orientation="Horizontal" Background="Blue">
                    <Image VerticalAlignment="Center" HorizontalAlignment="Center" Source="tab1.png"/>
                </StackPanel>
                <TextBlock Margin="10,0,0,0" Text="Tab1" VerticalAlignment="Center"/>
            </StackPanel>
            <ControlTemplate.Triggers>
                <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}" Value="True">
                    <Setter TargetName="sp1" Property="StackPanel.Background" Value="Green"/>
                </DataTrigger>
                <Trigger SourceName="sp0" Property="IsMouseOver" Value="True">
                    <Setter TargetName="sp1" Property="StackPanel.Background" Value="Green"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ContentControl.Template>
</ContentControl>

谢谢。

Answer 1

将外部StackPanel上的Background设置为Transparent，以便该边距也参与HitTest（即响应鼠标事件）。

现在只有image和TextBlock区域响应MouseOver事件。将背景设置为透明将起作用。

<StackPanel x:Name="sp0" Orientation="Horizontal" Background="Transparent">

Answer 2

将StackPanel的背景设置为Transparent。这使得它可以进行测试。

    <StackPanel x:Name="sp0" Orientation="Horizontal" Background="Transparent">
            <StackPanel x:Name="sp1" Orientation="Horizontal" Background="Blue">
                <Image VerticalAlignment="Center" HorizontalAlignment="Center" Source="tab1.png"/>
            </StackPanel>
            <TextBlock Margin="10,0,0,0" Text="Tab1" VerticalAlignment="Center"/>
    </StackPanel>

堆栈面板中的wpf鼠标悬停边距

2 个答案: