自定义ToggleButton鼠标悬停出现蓝色矩形的原因及解决咨询

你看到的蓝色矩形是内部嵌套的Button控件的默认悬停样式——你给ToggleButton自定义了样式，但里面的Button仍使用系统默认样式，鼠标悬停时就会触发系统自带的蓝色高亮效果。

推荐两种处理思路，第一种更简洁合理：

方法一：移除内部嵌套Button，直接用ToggleButton自带的内容展示 #

ToggleButton本身具备显示内容的能力，没必要嵌套Button，既简化结构又避免样式/事件冲突：

修改后的完整样式代码：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style BasedOn="{StaticResource {x:Type ToggleButton}}"
           TargetType="{x:Type ToggleButton}"
           x:Key="ControlButtonToggle">
        <Style.Setters>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Border x:Name="RootBorder"
                                CornerRadius="10"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentPresenter HorizontalAlignment="Center"
                                              VerticalAlignment="Center"
                                              Margin="5"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="RootBorder" Property="Opacity" Value="0.8"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Background" Value="LightGreen"/>
                                <Setter Property="BorderBrush" Value="Green"/>
                                <Setter Property="Content" Value="Enabled"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="False">
                                <Setter Property="Background" Value="#FFFF5454"/>
                                <Setter Property="BorderBrush" Value="Red"/>
                                <Setter Property="Content" Value="Disabled"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>
    </Style>
</ResourceDictionary>

方法二：给内部Button自定义样式，禁用默认悬停效果 #

如果一定要保留内部Button，需要给它设置OverridesDefaultStyle="True"，并定义无高亮的极简样式：

以IsChecked=True模板内的Button为例，修改如下：

<Button Margin="1"
        Content="Enabled"
        BorderThickness="0"
        Background="Transparent"
        VerticalContentAlignment="Center"
        Padding="5"
        Foreground="Black"
        BorderBrush="Green"
        OverridesDefaultStyle="True">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>
</Button>

IsChecked=False模板内的Button需要做完全相同的修改。

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