ControlTemplate in WPF —— Checkbox

这篇博客详细介绍了如何使用ControlTemplate在WPF中定制Checkbox的样式,包括FocusVisual、Border和不同状态下的视觉表现,如正常、鼠标悬停、按下和禁用状态,以及Checked、Unchecked和Indeterminate三种检查状态的动画效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                    mc:Ignorable="d">

  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Shared.xaml" />
  </ResourceDictionary.MergedDictionaries>

  <!-- Focus Visual -->
  <Style x:Key="CheckBoxFocusVisual">
    <Setter Property="Control.Template">
      <Setter.Value>
        <ControlTemplate>
          <Border>
            <Rectangle Margin="15,0,0,0"
                       StrokeThickness="1"
                       Stroke="#60000000"
                       StrokeDashArray="1 2" />
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

  <!-- SimpleStyles: CheckBox -->
  <Style x:Key="{x:Type CheckBox}"
         TargetType="{x:Type CheckBox}">
    <Setter Property="SnapsToDevicePixels"
            Value="true" />
    <Setter Property="OverridesDefaultStyle"
            Value="true" />
    <Setter Property="FocusVisualStyle"
            Value="{DynamicResource CheckBoxFocusVisual}" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type CheckBox}">
          <BulletDecorator Background="Transparent">
            <BulletDecorator.Bullet>
              <Border x:Name="Border"
                      Width="13"
                      Height="13"
                      CornerRadius="0"
                      BorderThickness="1">
                <Border.BorderBrush>
                  <LinearGradientBrush StartPoint="0,0"
                                       EndPoint="0,1">
                    <LinearGradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="{DynamicResource BorderLightColor}"
                                      Offset="0.0" />
                        <GradientStop Color="{DynamicResource BorderDarkColor}"
                                      Offset="1.0" />
                      </GradientStopCollection>
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
                </Border.BorderBrush>
                <Border.Background>
                  <LinearGradientBrush StartPoint="0,0"
                                       EndPoint="0,1">
                    <LinearGradientBrush.GradientStops>
                      <GradientStopCollection>
                        <GradientStop Color="{DynamicResource ControlLightColor}" />
                        <GradientStop Color="{DynamicResource ControlMediumColor}"
                                      Offset="1.0" />
                      </GradientStopCollection>
                    </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>

                </Border.Background>
                <Grid>
                  <Path Visibility="Collapsed"
                        Width="7"
                        Height="7"
                        x:Name="CheckMark"
                        SnapsToDevicePixels="False"
                        StrokeThickness="2"
                        Data="M 0 0 L 7 7 M 0 7 L 7 0">
                    <Path.Stroke>
                      <SolidColorBrush Color="{DynamicResource GlyphColor}" />
                    </Path.Stroke>
                  </Path>
                  <Path Visibility="Collapsed"
                        Width="7"
                        Height="7"
                        x:Name="InderminateMark"
                        SnapsToDevicePixels="False"
                        StrokeThickness="2"
                        Data="M 0 7 L 7 0">
                    <Path.Stroke>
                      <SolidColorBrush Color="{DynamicResource GlyphColor}" />
                    </Path.Stroke>
                  </Path>
                </Grid>
              </Border>
            </BulletDecorator.Bullet>
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="MouseOver">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlMouseOverColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                  <Storyboard>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                  Storyboard.TargetProperty="(Panel.Background).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource ControlPressedColor}" />
                    </ColorAnimationUsingKeyFrames>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                  Storyboard.TargetProperty="(Border.BorderBrush).
                        (GradientBrush.GradientStops)[0].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource PressedBorderDarkColor}" />
                    </ColorAnimationUsingKeyFrames>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                  Storyboard.TargetProperty="(Border.BorderBrush).
                        (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                      <EasingColorKeyFrame KeyTime="0"
                                           Value="{StaticResource PressedBorderLightColor}" />
                    </ColorAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Disabled" />
              </VisualStateGroup>
              <VisualStateGroup x:Name="CheckStates">
                <VisualState x:Name="Checked">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                   Storyboard.TargetName="CheckMark">
                      <DiscreteObjectKeyFrame KeyTime="0"
                                              Value="{x:Static Visibility.Visible}" />
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Unchecked" />
                <VisualState x:Name="Indeterminate">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                   Storyboard.TargetName="InderminateMark">
                      <DiscreteObjectKeyFrame KeyTime="0"
                                              Value="{x:Static Visibility.Visible}" />
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <ContentPresenter Margin="4,0,0,0"
                              VerticalAlignment="Center"
                              HorizontalAlignment="Left"
                              RecognizesAccessKey="True" />
          </BulletDecorator>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</ResourceDictionary>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值