WPF C# 如何实现鼠标悬停时更改CheckBox的复选框颜色？

核心原因 #

你之前直接在CheckBox标签上设置的Background、BorderBrush等属性，无法修改复选框内部小方块的颜色。因为WPF默认的CheckBox控件模板，会把右侧文本、左侧的选择小方块拆成独立的元素分别渲染，系统内置的悬停、选中状态的颜色写死在默认模板内部，直接改外层属性根本触不到内部元素的样式逻辑，这也是你改了属性没效果的根本原因。

可直接复用的原生实现 #

不需要引入第三方控件库，通过自定义控件样式重写内部小方块的视觉状态即可实现效果，步骤如下：

1. 在你的窗体资源节点（Window.Resources）中插入下面的自定义样式，已经匹配了你原本设置的深色主题基础配色：

<Window.Resources>
    <Style TargetType="CheckBox" x:Key="CustomCheckBoxStyle">
        <!-- 匹配原控件的基础外观配置 -->
        <Setter Property="Background" Value="#1F1F24"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="#1F1F24"/>
        <Setter Property="Foreground" Value="#C95959"/>
        <Setter Property="FontFamily" Value="Source Code Pro"/>
        <Setter Property="Cursor" Value="Hand"/>
        <!-- 重写控件模板，接管内部复选框元素的渲染逻辑 -->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                    <Grid Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="20"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <!-- 之前无法修改样式的「复选框小方块区域」 -->
                        <Border 
                            x:Name="CheckBoxBox"
                            Width="16" 
                            Height="16"
                            VerticalAlignment="Center"
                            Background="#2D2D33"
                            BorderThickness="1"
                            BorderBrush="#3E3E45"
                            CornerRadius="2">
                            <!-- 选中状态显示的对勾图形 -->
                            <Path 
                                x:Name="CheckMark"
                                Data="M 2 7 L 6 11 L 13 3"
                                Stroke="#C95959"
                                StrokeThickness="2"
                                Visibility="Collapsed"/>
                        </Border>
                        <!-- 右侧文本内容渲染区域 -->
                        <ContentPresenter 
                            Grid.Column="1"
                            VerticalAlignment="Center"
                            Margin="8,0,0,0"
                            TextBlock.Foreground="{TemplateBinding Foreground}"/>
                        <!-- 定义控件所有交互状态的颜色变化逻辑 -->
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames 
                                            Storyboard.TargetName="CheckMark" 
                                            Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CommonStates">
                                <!-- 鼠标悬停状态：自定义复选框区域的高亮颜色 -->
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimation 
                                            Storyboard.TargetName="CheckBoxBox" 
                                            Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
                                            To="#3C3C45"
                                            Duration="0:0:0.1"/>
                                        <ColorAnimation 
                                            Storyboard.TargetName="CheckBoxBox" 
                                            Storyboard.TargetProperty="(BorderBrush).(SolidColorBrush.Color)"
                                            To="#C95959"
                                            Duration="0:0:0.1"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

2. 修改你原有的CheckBox代码，引用这个自定义样式，其他原有位置、大小、文本属性完全保留不需要改动：

<CheckBox x:Name="TopMostCheckBox" 
            Content="TopMost" 
            Style="{StaticResource CustomCheckBoxStyle}"
            HorizontalAlignment="Left" 
            IsChecked="True"  
            Margin="493,325,0,0" 
            VerticalAlignment="Top"/>

快速调整参数说明 #

所有自定义效果都可以通过修改对应色值实现，不需要改动整体结构：

• 默认状态下小方块的底色：修改模板内名为CheckBoxBox的Background、BorderBrush属性值
• 鼠标悬停时的小方块颜色：找到MouseOver视觉状态下两个ColorAnimation的To属性值，替换成你需要的悬停高亮色即可
• 选中状态下对勾的颜色：修改名为CheckMark的Stroke属性值
• 小方块的尺寸：调整CheckBoxBox的Width、Height值即可适配不同大小需求
• 如果想让整个应用的所有CheckBox都自动应用这套样式，删掉样式的x:Key属性，把样式放到App.xaml的全局资源中即可，不需要每个CheckBox手动加Style引用。

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