如何更改 WPF 复选框勾号的颜色？

Question

我想将 WPF CheckBox 中勾号的颜色从黑色更改为白色。我试图在 CheckBox 声明中这样做：

<CheckBox Background="black" Foreground="White" BorderBrush="#262626"/>

背景和边框成功更改，但刻度本身没有更改。

Answer 1

您可以从 MSDN 服务器复制整个复选框样式，但是因为在任何 WPF 职业生涯的开始使用它都非常混乱，我将（在我看来）必要的位编译成一种更容易使用的样式了解：

<Style TargetType="{x:Type CheckBox}">
    <Setter Property="Background" Value="White" />
    <Setter Property="BorderBrush" Value="#FF262E34"/>
    <Setter Property="Foreground" Value="#FF262E34"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" >
                    <Border BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" Width="15" Height="15">
                        <!--                                   your color here -->
                        <Path Stretch="Uniform" Width="15" Height="10" Fill="HotPink" Name="eliCheck" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " Visibility="Collapsed"/>
                    </Border>
                    <TextBlock Margin="5,0,0,0"  VerticalAlignment="Center" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Content}"></TextBlock>
                </StackPanel>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="LightGray" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="#FF9C9E9F" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Background" Value="LightGray" />
                        <Setter Property="Foreground" Value="Gray" />
                        <Setter Property="BorderBrush" Value="Gray"/>
                        <Setter TargetName="eliCheck" Property="Opacity" Value="0.5" />
                    </Trigger>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="eliCheck" Property="Visibility" Value="Visible"></Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 2

CheckBox 控件具有多种视觉状态，具有不同颜色的背景、边框和选项标记字形。需要的部分和视觉状态可以参考documentation

如果要编辑颜色，则必须更改默认样式和控件模板。你可以提取它using Blend or Visual Studio。以下是默认模板。您需要做的是将这些资源复制到范围内的资源字典中，例如应用程序资源并调整 SolidColorBurshes.

<SolidColorBrush x:Key="OptionMark.Static.Background" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="OptionMark.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="OptionMark.Static.Glyph" Color="#FF212121"/>
<SolidColorBrush x:Key="OptionMark.MouseOver.Background" Color="#FFF3F9FF"/>
<SolidColorBrush x:Key="OptionMark.MouseOver.Border" Color="#FF5593FF"/>
<SolidColorBrush x:Key="OptionMark.MouseOver.Glyph" Color="#FF212121"/>
<SolidColorBrush x:Key="OptionMark.Pressed.Background" Color="#FFD9ECFF"/>
<SolidColorBrush x:Key="OptionMark.Pressed.Border" Color="#FF3C77DD"/>
<SolidColorBrush x:Key="OptionMark.Pressed.Glyph" Color="#FF212121"/>
<SolidColorBrush x:Key="OptionMark.Disabled.Background" Color="#FFE6E6E6"/>
<SolidColorBrush x:Key="OptionMark.Disabled.Border" Color="#FFBCBCBC"/>
<SolidColorBrush x:Key="OptionMark.Disabled.Glyph" Color="#FF707070"/>

<Style x:Key="FocusVisual">
   <Setter Property="Control.Template">
      <Setter.Value>
         <ControlTemplate>
            <Rectangle Margin="2"
                       SnapsToDevicePixels="true"
                       Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
                       StrokeDashArray="1 2"
                       StrokeThickness="1" />
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>
<Style x:Key="OptionMarkFocusVisual">
   <Setter Property="Control.Template">
      <Setter.Value>
         <ControlTemplate>
            <Rectangle Margin="14,0,0,0"
                       SnapsToDevicePixels="true"
                       Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
                       StrokeDashArray="1 2"
                       StrokeThickness="1" />
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>
<Style x:Key="CheckBoxStyle"
       TargetType="{x:Type CheckBox}">
   <Setter Property="FocusVisualStyle"
           Value="{StaticResource FocusVisual}" />
   <Setter Property="Background"
           Value="{StaticResource OptionMark.Static.Background}" />
   <Setter Property="BorderBrush"
           Value="{StaticResource OptionMark.Static.Border}" />
   <Setter Property="Foreground"
           Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
   <Setter Property="BorderThickness"
           Value="1" />
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type CheckBox}">
            <Grid x:Name="templateRoot"
                  Background="Transparent"
                  SnapsToDevicePixels="True">
               <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto" />
                  <ColumnDefinition Width="*" />
               </Grid.ColumnDefinitions>
               <Border x:Name="checkBoxBorder"
                       Margin="1"
                       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                       Background="{TemplateBinding Background}"
                       BorderBrush="{TemplateBinding BorderBrush}"
                       BorderThickness="{TemplateBinding BorderThickness}">
                  <Grid x:Name="markGrid">
                     <Path x:Name="optionMark"
                           Margin="1"
                           Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z "
                           Fill="{StaticResource OptionMark.Static.Glyph}"
                           Opacity="0"
                           Stretch="None" />
                     <Rectangle x:Name="indeterminateMark"
                                Margin="2"
                                Fill="{StaticResource OptionMark.Static.Glyph}"
                                Opacity="0" />
                  </Grid>
               </Border>
               <ContentPresenter x:Name="contentPresenter"
                                 Grid.Column="1"
                                 Margin="{TemplateBinding Padding}"
                                 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                 Focusable="False"
                                 RecognizesAccessKey="True"
                                 SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
            </Grid>
            <ControlTemplate.Triggers>
               <Trigger Property="HasContent"
                        Value="true">
                  <Setter Property="FocusVisualStyle"
                          Value="{StaticResource OptionMarkFocusVisual}" />
                  <Setter Property="Padding"
                          Value="4,-1,0,0" />
               </Trigger>
               <Trigger Property="IsMouseOver"
                        Value="true">
                  <Setter TargetName="checkBoxBorder"
                          Property="Background"
                          Value="{StaticResource OptionMark.MouseOver.Background}" />
                  <Setter TargetName="checkBoxBorder"
                          Property="BorderBrush"
                          Value="{StaticResource OptionMark.MouseOver.Border}" />
                  <Setter TargetName="optionMark"
                          Property="Fill"
                          Value="{StaticResource OptionMark.MouseOver.Glyph}" />
                  <Setter TargetName="indeterminateMark"
                          Property="Fill"
                          Value="{StaticResource OptionMark.MouseOver.Glyph}" />
               </Trigger>
               <Trigger Property="IsEnabled"
                        Value="false">
                  <Setter TargetName="checkBoxBorder"
                          Property="Background"
                          Value="{StaticResource OptionMark.Disabled.Background}" />
                  <Setter TargetName="checkBoxBorder"
                          Property="BorderBrush"
                          Value="{StaticResource OptionMark.Disabled.Border}" />
                  <Setter TargetName="optionMark"
                          Property="Fill"
                          Value="{StaticResource OptionMark.Disabled.Glyph}" />
                  <Setter TargetName="indeterminateMark"
                          Property="Fill"
                          Value="{StaticResource OptionMark.Disabled.Glyph}" />
               </Trigger>
               <Trigger Property="IsPressed"
                        Value="true">
                  <Setter TargetName="checkBoxBorder"
                          Property="Background"
                          Value="{StaticResource OptionMark.Pressed.Background}" />
                  <Setter TargetName="checkBoxBorder"
                          Property="BorderBrush"
                          Value="{StaticResource OptionMark.Pressed.Border}" />
                  <Setter TargetName="optionMark"
                          Property="Fill"
                          Value="{StaticResource OptionMark.Pressed.Glyph}" />
                  <Setter TargetName="indeterminateMark"
                          Property="Fill"
                          Value="{StaticResource OptionMark.Pressed.Glyph}" />
               </Trigger>
               <Trigger Property="IsChecked"
                        Value="true">
                  <Setter TargetName="optionMark"
                          Property="Opacity"
                          Value="1" />
                  <Setter TargetName="indeterminateMark"
                          Property="Opacity"
                          Value="0" />
               </Trigger>
               <Trigger Property="IsChecked"
                        Value="{x:Null}">
                  <Setter TargetName="optionMark"
                          Property="Opacity"
                          Value="0" />
                  <Setter TargetName="indeterminateMark"
                          Property="Opacity"
                          Value="1" />
               </Trigger>
            </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>

因为 Static、MouseOver、Pressed 和 已禁用 状态，您可能必须从背景、边框和前景色中派生出一个小调色板。

为了使用适配的复选框样式，可以通过key显式引用：

<CheckBox Style="{StaticResource CheckBoxStyle}" />

您还可以在其他资源之后定义如下所示的隐式样式，这样该样式将自动应用于包含资源字典范围内的所有 CheckBoxes。

<Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource CheckBoxStyle}"/>

在这种情况下，您不再明确引用样式。

<CheckBox />

如何更改 WPF 复选框勾号的颜色？

How do I change the colour of a WPF Checkbox tick?

c#

wpf

xaml

controltemplate