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

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

设置Background在外部StackPanel上,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>