如何让ToggleButton控件模板的部分区域不触发切换事件？

为ToggleButton创建了一个ControlTemplate，希望点击模板中的矩形区域时切换ToggleButton的IsChecked状态，点击ContentPresenter区域时不触发切换。直接给ContentPresenter设置IsHitTestVisible="False"会禁用其点击交互，但这是复用样式库的一部分，未来开发者可能会在ContentPresenter中放置带有自身点击行为的嵌套控件，因此不想采用这种方法。

简化后的代码示例：

<ToggleButton Content="Example Toggle Button">
    <ToggleButton.Template>
        <ControlTemplate TargetType="ToggleButton">
            <StackPanel Orientation="Horizontal">
                <!-- 点击此区域需触发ToggleButton的IsChecked切换 -->
                <Rectangle Width="20"
                           Height="20"
                           Fill="{TemplateBinding Background}"/>
                <!-- 点击此区域不触发ToggleButton的IsChecked切换 -->
                <ContentPresenter/>
            </StackPanel>
        </ControlTemplate>
    </ToggleButton.Template>
    <ToggleButton.Style>
        <Style TargetType="ToggleButton">
            <Setter Property="Background" Value="Blue"/>
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ToggleButton.Style>
</ToggleButton>

解决方案 #

方法1：拦截Content区域的预览点击事件 #

给ContentPresenter外层套一个Border（设置Background="Transparent"保证HitTest可见），通过PreviewMouseLeftButtonDown事件拦截点击，阻止事件冒泡到ToggleButton，同时不影响Content内部控件的交互。

修改后的ControlTemplate：

<ControlTemplate TargetType="ToggleButton">
    <StackPanel Orientation="Horizontal">
        <Rectangle Width="20"
                   Height="20"
                   Fill="{TemplateBinding Background}"/>
        <!-- 外层Border拦截点击事件，确保Content内控件可正常交互 -->
        <Border Background="Transparent"
                PreviewMouseLeftButtonDown="Border_PreviewMouseLeftButtonDown">
            <ContentPresenter/>
        </Border>
    </StackPanel>
</ControlTemplate>

对应的后台事件处理代码：

private void Border_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    // 标记事件已处理，ToggleButton不会响应此次点击
    e.Handled = true;
}

方法2：自定义ToggleButton重写HitTest逻辑 #

创建自定义ToggleButton子类，重写HitTestCore方法，仅当点击点落在矩形区域内时，才让ToggleButton响应点击操作。

自定义控件代码：

public class CustomToggleButton : ToggleButton
{
    protected override HitTestResult HitTestCore(PointHitTestParameters hitTestParameters)
    {
        var toggleRect = Template.FindName("ToggleRect", this) as Rectangle;
        if (toggleRect != null)
        {
            // 将点击点转换为矩形的局部坐标
            var localPoint = toggleRect.TransformToAncestor(this).Transform(hitTestParameters.HitPoint);
            if (toggleRect.InputHitTest(localPoint) != null)
            {
                // 点击在矩形范围内，返回自身作为HitTest结果
                return new PointHitTestResult(this, hitTestParameters.HitPoint);
            }
        }
        // 点击不在矩形范围内，返回null，ToggleButton不响应点击
        return null;
    }
}

修改XAML中的控件引用，并给矩形命名：

<local:CustomToggleButton Content="Example Toggle Button">
    <local:CustomToggleButton.Template>
        <ControlTemplate TargetType="local:CustomToggleButton">
            <StackPanel Orientation="Horizontal">
                <Rectangle x:Name="ToggleRect"
                           Width="20"
                           Height="20"
                           Fill="{TemplateBinding Background}"/>
                <ContentPresenter/>
            </StackPanel>
        </ControlTemplate>
    </local:CustomToggleButton.Template>
    <!-- 样式部分保持不变 -->
</local:CustomToggleButton>

方法3：用附加行为实现无后台代码拦截 #

如果希望保持XAML的独立性，可使用Blend附加行为封装拦截逻辑，便于样式库复用。

首先创建附加行为类：

public class BlockToggleOnContentClickBehavior : Behavior<FrameworkElement>
{
    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.PreviewMouseLeftButtonDown += OnPreviewMouseLeftButtonDown;
    }

    protected override void OnDetaching()
    {
        AssociatedObject.PreviewMouseLeftButtonDown -= OnPreviewMouseLeftButtonDown;
        base.OnDetaching();
    }

    private void OnPreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        e.Handled = true;
    }
}

然后在XAML中引用行为并添加到ContentPresenter的容器上：

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

<ControlTemplate TargetType="ToggleButton">
    <StackPanel Orientation="Horizontal">
        <Rectangle Width="20"
                   Height="20"
                   Fill="{TemplateBinding Background}"/>
        <Border Background="Transparent">
            <i:Interaction.Behaviors>
                <local:BlockToggleOnContentClickBehavior/>
            </i:Interaction.Behaviors>
            <ContentPresenter/>
        </Border>
    </StackPanel>
</ControlTemplate>

内容的提问来源于stack exchange，提问作者AdamWritesCode