WPF GroupBox Header 區域 RadioButton 滑鼠無回應 Bug 根因分析

將 RadioButton 放置於 GroupBox.Header 內容中時，滑鼠點擊或懸停於 RadioButton 某些空白區域完全無反應。本文透過 Visual Tree 分析，精確定位問題根因於 GroupBox 預設樣式中一個隱形 Border 元素覆蓋在 Header 區域上方，攔截滑鼠事件。

問題重現 XAML

<GroupBox>
    <GroupBox.Header>
        <RadioButton x:Name="targetRadioButton" Content="HeaderRadioButton" GroupName="header"/>
    </GroupBox.Header>
    <GroupBox.Content>
        <StackPanel>
            <RadioButton Content="CommonRadioButton"/>
            <RadioButton Content="CommonRadioButton"/>
        </StackPanel>
    </GroupBox.Content>
</GroupBox>

Visual Tree 揭露真相

使用 XAML Pad 或 Visual Studio Live Visual Tree 檢視，發現 targetRadioButton 的 Visual Tree 中藏有一個 Border：

• 位置：覆蓋 Header 區域上方
• 屬性：Background=Transparent、BorderBrush=White、BorderThickness=10、CornerRadius=4
• 行為：雖然視覺透明，但 HitTestVisible 預設為 true，攔截所有滑鼠事件

此 Border 來自 GroupBox 預設 ControlTemplate 中的 Header 區域裝飾邊框，設計上為了視覺效果，卻未將 IsHitTestVisible="False"。

驗證方法

1. 在 XAML Pad 載入上述片段
2. 開啟 Visual Tree 視窗
3. 展開 RadioButton 節點，找到該 Border
4. 在屬性視窗將其 Background 改為紅色、BorderBrush 改為綠色，立即可見覆蓋區域
5. 滑鼠移入該區域，RadioButton 無任何視覺狀態變化 (IsMouseOver 不觸發)

解決方案

方案一：重寫 GroupBox 樣式 (徹底修正)

<Style TargetType="GroupBox">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GroupBox">
                <!-- 關鍵：Header 區域的 Border 設定 IsHitTestVisible="False" -->
                <Border x:Name="headerBorder" IsHitTestVisible="False" ...>
                    <ContentPresenter ContentSource="Header"/>
                </Border>
                <!-- Content 區域保持正常 -->
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

方案二：附加行為移除 HitTest (快速修補)

public static class GroupBoxHeaderFix {
    public static void Apply(GroupBox groupBox) {
        groupBox.Loaded += (s, e) => {
            var headerBorder = FindVisualChild<Border>(groupBox, "headerBorder"); // 需知 Template 中名稱
            if (headerBorder != null) headerBorder.IsHitTestVisible = false;
        };
    }
}

方案三：避免將互動控件放入 Header (規避策略)

將 RadioButton 移至 Content 區域，或使用 HeaderTemplate 僅放置非互動元素 (TextBlock、Image)。

舉一反三

WPF 中類似「看不見的元素攔截事件」問題常見於：

• 透明背景的 Panel/Grid 覆蓋在按鈕上方
• Adorner 層級過高遮蔽互動元素
• ControlTemplate 中裝飾性 Border/Rectangle 未關閉 HitTest

診斷金鑰：遇到 UI 區域無故失效，優先檢查 Visual Tree 尋找透明但 HitTestVisible 的元素。