堆棧內存溢出
  簡體   English   中英

如何更改 WPF 復選框勾選的顏色？

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

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

問題描述

我想將 WPF CheckBox中的勾號顏色從黑色更改為白色。 我試圖在CheckBox聲明中這樣做：

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

背景和邊框成功改變，但不是刻度本身。

2 個解決方案

解決方案1
 2 已采納  2021-01-08 14:07:00

也許有一種更簡單的方法，但我使用這樣的自定義復選框樣式實現了這一點： 在此處輸入圖像描述

<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

CheckBox控件具有各種視覺狀態，具有不同的 colors 用於背景、邊框和選項標記字形。 您可以參考文檔了解所需的部件和視覺狀態。

如果要編輯 colors，則必須更改默認樣式和控件模板。 您可以使用 Blend 或 Visual Studio提取它。 下面是默認模板。 您需要做的是將這些資源復制到 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>

由於Static 、 MouseOver 、 Pressed和Disabled狀態有不同的 colors ，因此您可能需要從背景、邊框和前景 Z62848E3CE5804AA987B2513A7922ZFF8 派生一個小的調色板。

為了使用適應的復選框樣式，您可以通過鍵顯式引用它：

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

您還可以在其他資源之后定義如下所示的隱式樣式，因此該樣式將自動應用於包含資源字典的 scope 中的所有CheckBox es。

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

在這種情況下，您不再明確引用樣式。

<CheckBox />

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在LongListMultiSelector中更改CheckBox和CheckBox刻度的顏色？ WP8 如何更改DataGridCheckBoxColumn復選框復選標記顏色 如何在 WPF 中更改 listviewitems 突出顯示的顏色 如何更改復選框的形狀？ 如何同步更改標簽頁和標簽的顏色 如何在 UWP 的 NavigationView 中更改 Reveal Highlight 的顏色？ 如何更改 Winforms 中選項卡控件的背景顏色？ CheckedListBox：如何增加復選框的大小並更改刻度線的顏色 如何在WPF中動態添加和定位CheckBox元素？ 如何在WPF MenuItem復選框中設置IsThreeState = True？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM