鼠标事件被后面的元素搞砸了？

Question

我正在覆盖GroupBox标头的模板，如下所示：

  <Style x:Key="styleScoreComp" TargetType="{x:Type GroupBox}">
                <Setter Property="HeaderTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Grid >
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0" Text="{Binding}" Foreground="Black" FontWeight="Bold" FontSize="20" VerticalAlignment="Center"/>
                                <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center" >
                                    <Composer:AddElementButton Type="Composite"/>
                                    <Composer:AddElementButton Type="Calculation"/>
                                    <Composer:AddElementButton Type="SimulationValue"/>
                                </StackPanel>
                            </Grid>    
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

AddElementButton

<Border x:Name="borderButton" BorderThickness="1" BorderBrush="Silver" CornerRadius="4" Cursor="Hand" Margin="5"  Background="White" Width="50" Height="45"  MouseEnter="Border_MouseEnter" MouseLeave="Border_MouseLeave"  MouseLeftButtonUp="borderButton_MouseLeftButtonUp">
        <Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Image x:Name="imgType" Source="{Binding TypeImage, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" 
                   Cursor="Hand" Stretch="Uniform"  Width="24" Height="24" Canvas.Top="3" Canvas.Left="13"    />                
            <Image Canvas.Top="30" Canvas.Left="7" Source="add.png" Cursor="Hand" Stretch="Uniform"  Width="36" Height="9" VerticalAlignment="Bottom"   />                
        </Canvas>       
    </Border>

基本上，它可以工作，但当你将鼠标放在按钮中间时，它会认为鼠标已离开Border控件。当鼠标悬停在GroupBox边框的位置时，似乎就会发生这种情况。看到这张图片：

这里发生了什么？

Answer 1

事实证明，问题在于绘制组框边框的顺序。我找到了一个描述问题的网站：http://wpf-mettyz.blogspot.com/2011/02/sample-posting.html

我通过将GroupBox样式设置为以下来修复它：

>  <Style TargetType="{x:Type GroupBox}" x:Key="styleTest">
>                 <Setter Property="BorderBrush" Value="#D5DFE5"/>
>                 <Setter Property="BorderThickness" Value="1"/>
>                 <Setter Property="Template">
>                     <Setter.Value>
>                         <ControlTemplate TargetType="{x:Type GroupBox}">
>                             <Grid SnapsToDevicePixels="true">
>                                 <Grid.ColumnDefinitions>
>                                     <ColumnDefinition Width="6"/>
>                                     <ColumnDefinition Width="Auto"/>
>                                     <ColumnDefinition Width="*"/>
>                                     <ColumnDefinition Width="6"/>
>                                 </Grid.ColumnDefinitions>
>                                 <Grid.RowDefinitions>
>                                     <RowDefinition Height="Auto"/>
>                                     <RowDefinition Height="Auto"/>
>                                     <RowDefinition Height="*"/>
>                                     <RowDefinition Height="6"/>
>                                 </Grid.RowDefinitions>
>                                 <Border Background="{TemplateBinding Background}" BorderBrush="Silver"
>                                         BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4"
> Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3"/>   
> 
>                                 <ContentPresenter Margin="{TemplateBinding Padding}"
> SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
> Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="2"/>                    
> 
>                                 <Border x:Name="Header" Padding="3,1,3,0" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2">
>                                     <ContentPresenter DataContext="{Binding}" SnapsToDevicePixels="{TemplateBinding
> SnapsToDevicePixels}" ContentSource="Header"
> RecognizesAccessKey="True"/>
>                                 </Border>
>                             </Grid>
>                         </ControlTemplate>
>                     </Setter.Value>
>                 </Setter>
>             </Style>

然后将标题设置为包含按钮。