覆盖 Material Design 复选框样式答案

【问题标题】：Override MaterialDesign check box style覆盖 Material Design 复选框样式
【发布时间】：2020-11-25 19:07:39
【问题描述】：

所以我有这个CheckBox Style 基于MaterialDesignActionCheckBox：

<Style x:Key="MaterialDesignActionAccentCheckBox2" TargetType="{x:Type CheckBox}" BasedOn="{StaticResource MaterialDesignActionCheckBox}">
   <Setter Property="Control.Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type CheckBox}">
            <Ellipse x:Name="ellipse"
                     Width="15"
                     Height="15"
                     Fill="#353535"/>
            <ControlTemplate.Triggers>
               <Trigger Property="IsChecked" Value="False">
                  <Setter TargetName="ellipse" Property="Visibility" Value="Collapsed"/>
               </Trigger>
               <Trigger Property="IsChecked" Value="True">
                  <Setter TargetName="ellipse" Property="Visibility" Value="Visible"/>
               </Trigger>
            </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
   <Style.Triggers>
      <Trigger Property="IsChecked" Value="True">
         <Setter Property="Background" Value="Transparent"/>
         <Setter Property="Foreground" Value="Transparent"/>
      </Trigger>
      <Trigger Property="IsChecked" Value="False">
         <Setter Property="Background" Value="Transparent"/>
         <Setter Property="BorderThickness" Value="1"/>
         <Setter Property="VerticalContentAlignment" Value="Center"/>
         <Setter Property="FontSize" Value="10"/>
      </Trigger>
   </Style.Triggers>
</Style>

当CheckBox 被选中时，我确实想要V 符号，所以我将它设为Transparent（在IsChecked 下）并输入Ellipse。添加此ControlTemplate.Triggers 后，我看不到我的Ellipse。我想做的就是在我的Checkbox 中显示这个Ellipse。

【问题讨论】：

标签： wpf checkbox styles material-design controltemplate

【解决方案1】：

控件模板定义了视觉外观、视觉状态、它们之间的转换以及控件所需的控件。缺少这些组件中的任何一个都将导致意外行为。您可以在 MSDN 上查找控件的所有必需部分和状态，例如对于CheckBox 控件：

CheckBox Styles and Templates

您的复选框样式缺少一些控件和状态，这就是它不起作用的原因。重要的是要注意，您不能像样式一样将控件模板基于另一个模板。因此，您必须复制和调整现有模板或从头开始创建自己的模板。对于Material Design，您可以找到样式和模板at GitHub。

好消息是您可以更轻松地实现目标，因为默认样式的某些部分（例如操作复选框的复选标记）可以被覆盖。

创建基于MaterialDesignActionCheckBox 样式的样式。将PackIcon 设置为ToggleButtonAssist.OnContent 属性的值。您可以通过Kind 属性指定您喜欢的图标。您可以查看PackIconKind enum 以查找所有可用图标。

<Style x:Key="EllipseMaterialDesignActionCheckBox" TargetType="{x:Type CheckBox}" BasedOn="{StaticResource MaterialDesignActionCheckBox}">
   <Setter Property="wpf:ToggleButtonAssist.OnContent">
      <Setter.Value>
         <wpf:PackIcon Kind="Circle" FlowDirection="LeftToRight" />
      </Setter.Value>
   </Setter>
</Style>

您当然可以设置椭圆而不是包图标，只需将包图标替换为下面的代码即可。 Fill 绑定确保椭圆将应用父CheckBox 的Foreground 颜色。

<Ellipse Fill="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type CheckBox}}}" Width="20" Height="20"/>

如果要更改复选标记的颜色，可以将颜色直接应用到样式中的Fill 属性，或者将设置器添加到设置Foreground 属性的CheckBox 样式。

<Setter Property="Foreground" Value="#353535"/>

要使用该样式，请将其引用为StaticResource（或DynamicResource，如果需要）。

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

为了将样式自动应用于范围内的所有CheckBoxes，请创建一个隐式样式。

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

这里放几张截图对比一下，我的原色和副色是DeepPurple和Lime，你的可能不一样。第一个框是默认框，第二个是使用圆形包图标（使用椭圆也是一样），最后一个应用了您的Foreground 颜色。

【讨论】：