堆栈内存溢出
  简体   繁体   English

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

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

 原文  2021-01-08 13:42:36  1   2    c#/ wpf/ xaml/ controltemplate

问题描述

I would like to change the colour of the tick in my WPF CheckBox from black to white.我想将 WPF CheckBox中的勾号颜色从黑色更改为白色。 I have tried to do this in the CheckBox declaration as such:我试图在CheckBox声明中这样做：

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

The background and border successfully change, but not the tick itself.背景和边框成功改变，但不是刻度本身。

2 个解决方案

解决方案1
 2 已采纳  2021-01-08 14:07:00

Maybe there is an easier way, but i achieved this with a custom checkbox style like this:也许有一种更简单的方法，但我使用这样的自定义复选框样式实现了这一点： 在此处输入图像描述

<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 Width="15" Height="10"  Stroke="HotPink" StrokeThickness="3" Name="eliCheck" Data="M 2,4 C 2,4 3,5 5,13 C 5,13 5,3 12,0" 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>

在此处输入图像描述

解决方案2
 2  2021-01-08 15:44:50

The CheckBox control has various visual states with different colors for background, border and option mark glyph. CheckBox控件具有各种视觉状态，具有不同的 colors 用于背景、边框和选项标记字形。 You can refer to the documentation for the required parts and visual states.您可以参考文档了解所需的部件和视觉状态。

If you want to edit the colors, you have to change the default style and control template.如果要编辑 colors，则必须更改默认样式和控件模板。 You can extract it using Blend or Visual Studio .您可以使用 Blend 或 Visual Studio提取它。 Below is the default template.下面是默认模板。 What you need to do is copy these resources to a resource dictionary in scope, eg the application resources and adapt the SolidColorBursh es.您需要做的是将这些资源复制到 scope 中的资源字典中，例如应用程序资源并调整SolidColorBursh es。

<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>

Since there are different colors for the Static , MouseOver , Pressed and Disabled states, you might have to derive a small color palette from your background, border and foreground colors.由于Static 、 MouseOver 、 Pressed和Disabled状态有不同的 colors ，因此您可能需要从背景、边框和前景 Z62848E3CE5804AA987B2513A7922ZFF8 派生一个小的调色板。

In order to use the adapted check box style, you can reference it explicitly by key:为了使用适应的复选框样式，您可以通过键显式引用它：

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

You can also define an implicit style like below after the other resources, so the style will automatically be applied to all CheckBox es in scope of the containing resource dictionary.您还可以在其他资源之后定义如下所示的隐式样式，因此该样式将自动应用于包含资源字典的 scope 中的所有CheckBox es。

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

In this case you do not reference the style explicitly anymore.在这种情况下，您不再明确引用样式。

<CheckBox />

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在LongListMultiSelector中更改CheckBox和CheckBox刻度的颜色？ WP8 - How to change the CheckBox and CheckBox tick's color in LongListMultiSelector? WP8 如何更改DataGridCheckBoxColumn复选框复选标记颜色 - How to change DataGridCheckBoxColumn checkbox check mark colour 如何在 WPF 中更改 listviewitems 突出显示的颜色 - How to change a listviewitems highlighted colour in WPF 如何更改复选框的形状？ - How do I change the shape of a checkbox? 如何同步更改标签页和标签的颜色 - How do i change the colour of a tabpage and label in sync 如何在 UWP 的 NavigationView 中更改 Reveal Highlight 的颜色？ - How do I change colour of Reveal Highlight in NavigationView in UWP? 如何更改 Winforms 中选项卡控件的背景颜色？ - How do I change background colour of tab control in Winforms? CheckedListBox：如何增加复选框的大小并更改刻度线的颜色 - CheckedListBox: How to increase size of checkbox and change color of tick mark 如何在WPF中动态添加和定位CheckBox元素？ - How do I dynamically add and position CheckBox elements in WPF? 如何在WPF MenuItem复选框中设置IsThreeState = True？ - How do I set IsThreeState=True in WPF MenuItem Checkbox?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM