[WPF]RadioButton在Group的Header区部分不响应鼠标选择的bug分析

昨晚看到南柯之石的WPF BUG之四：点击RadioButton的空白没有反应，就做了简单的验证，之后发表了一些分析和看法，

但是那个分析不够准确和充分，会误导别人的想法。在此表示歉意。这里我会从头做分析。

由于南柯之石已经描述过bug，这里只是简单说一下：就是在GroupBox的Header上放一个RadioButton，此时鼠标点击RadioButton的某些空白区域没有反应。

下面言归正传，开始对这个bug的探索：

首先这里给出出现bug的xaml片段（这个从南柯之石的blog转帖过来的，我做了部分修改，方便重现bug）：

BUG in XAML
<Grid Margin="12" TextBlock.FontSize="36">
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="5*" />
<RowDefinition Height="4*" />
</Grid.RowDefinitions>
<TextBlock Margin="0,0,0,5" TextWrapping="Wrap">
<Run FontWeight="Bold">Bug Description:</Run>
</TextBlock>
<Border x:Name="dummyContainer" BorderBrush="Red" BorderThickness="1" Grid.Row="1">
<GroupBox x:Name="targetGroupBox" Padding="9" BorderBrush="CadetBlue" BorderThickness="10" Background="Red">
<GroupBox.Header>
<RadioButton x:Name="targetRadioButton" Content="Header RadioButton" GroupName="header"/>
</GroupBox.Header>
<GroupBox.Content>
<StackPanel>
<RadioButton Content="Common RadioButton"/>
<RadioButton Content="Common RadioButton"/>
</StackPanel>
</GroupBox.Content>
</GroupBox>
</Border>

<GroupBox Padding="9" Grid.Row="2">
<GroupBox.Header>
<RadioButton Content="Header RadioButton" GroupName="header"/>
</GroupBox.Header>
<GroupBox.Content>
<StackPanel>
<RadioButton Content="Common RadioButton"/>
<RadioButton Content="Common RadioButton"/>
</StackPanel>
</GroupBox.Content>
</GroupBox>
</Grid>
这里鼠标Click或者Hover GroupBox的Header区域上的RadioButton的某些地方，你会发现没有任何响应。在WPF中，UI出的问题，很多都是VisualTree上的，所以我拿XAMLPad看了看这个片段生成的VisualTree，如下图：



在这个图上，我标记了两个地方：
1、我为targetRadioButton的VisualTree里藏着的Border区域做了标记（采用黄色覆盖，然后和背景色的反色）在这个反色区域，鼠标都是不响应的。
2、在VisualTree上，我标记除了那个在targetRadioButton里隐藏的Border，下面的属性浏览器可以看到他的属性：背景是透明的，白色边框刷子，边框宽度每个边为10，圆角半径是4……

通过这个图，还有GroupBox的Theme样式可以得知，这个Border是在最上面的，界面不可见，但消息却不是透明，当鼠标响应在这些区域，消息就不会到达后面的RadioButton和其他控件了。

有兴趣的朋友可以自己试试看。

结论：

1、这个实际是GroupBox的bug，实际测试在这样的区域了，放置的UI都有问题。
2、在WPF下，很多的bug看起来很隐蔽，不妨看看它的VisualTree。