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

问题描述 投票：0回答：2

我想将 WPF 

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

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

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

c# wpf xaml controltemplate
2个回答
7
投票

您可以从 MSDN 服务器复制整个复选框样式，但由于在任何 WPF 项目开始时使用它都非常令人困惑，因此我将（在我看来）必要的位编译成一种更容易理解的样式：

enter image description here

<Style TargetType="{x:Type CheckBox}">
    <Setter Property="Background" Value="White" />
    <Setter Property="BorderBrush" Value="#FF262E34"/>
    <!--                           your color here -->
    <Setter Property="Foreground" Value="HotPink"/>
    <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">
                        <Grid>
                            <Grid Background="{TemplateBinding Foreground}" Margin="1" Visibility="Collapsed" Name="nullBlock"/>
                            <Path Stretch="Uniform" Width="15" Height="10" Fill="{TemplateBinding Foreground}" 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"/>
                        </Grid>
                    </Border>
                    <TextBlock Margin="5,0,0,0"  VerticalAlignment="Center" Foreground="White" 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>
                    <Trigger Property="IsChecked" Value="{x:Null}">
                        <Setter TargetName="nullBlock" Property="Visibility" Value="Visible"></Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

enter image description here

只需将此样式复制到 Window.Resources 或您认为合适的任何其他位置即可，或者直接将其粘贴到复选框样式属性中。

3
投票

CheckBox
控件具有各种视觉状态，背景、边框和选项标记字形具有不同的颜色。您可以参考文档了解所需的部件和视觉状态。

如果要编辑颜色，则必须更改默认样式和控件模板。您可以使用 Blend 或 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 和 Disabled 状态有不同的颜色，您可能必须从背景、边框和前景色中派生一个小的调色板。
为了使用适配的复选框样式，您可以通过 key 显式引用它：


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



您还可以在其他资源之后定义如下隐式样式，因此该样式将自动应用于包含资源字典范围内的所有
CheckBox
。
<Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource CheckBoxStyle}"/>



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


<CheckBox />


    
	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.