WPF 的CheckBox的一种样式

旧城等待， 2022-10-02 10:41 356阅读 0赞

<Style x:Key="CheckRadioFocusVisual">  
            <Setter Property="Control.Template">  
                <Setter.Value>  
                    <ControlTemplate>  
                        <Rectangle Margin="14,0,0,0" SnapsToDevicePixels="true" Stroke="\{DynamicResource \{x:Static SystemColors.ControlTextBrushKey\}\}" StrokeThickness="1" StrokeDashArray="1 2"/>  
                    </ControlTemplate>  
                </Setter.Value>  
            </Setter>  
        </Style>  
        <Style x:Key="SwitchCheckBox" TargetType="\{x:Type CheckBox\}">  
            <Setter Property="Foreground" Value="\{DynamicResource \{x:Static SystemColors.ControlTextBrushKey\}\}"/>  
            <Setter Property="BorderThickness" Value="1"/>  
            <Setter Property="Cursor" Value="Hand" />  
            <Setter Property="Template">  
                <Setter.Value>  
                    <ControlTemplate TargetType="\{x:Type CheckBox\}">  
                        <ControlTemplate.Resources>  
                            <Storyboard x:Key="StoryboardIsChecked">  
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)\[3\].(TranslateTransform.X)" Storyboard.TargetName="CheckFlag">  
                                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>  
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="14"/>  
                                </DoubleAnimationUsingKeyFrames>  
                            </Storyboard>  
                            <Storyboard x:Key="StoryboardIsCheckedOff">  
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)\[3\].(TranslateTransform.X)" Storyboard.TargetName="CheckFlag">  
                                    <EasingDoubleKeyFrame KeyTime="0" Value="14"/>  
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>  
                                </DoubleAnimationUsingKeyFrames>  
                            </Storyboard>  
                        </ControlTemplate.Resources>  
                        <BulletDecorator Background="Transparent" SnapsToDevicePixels="true">  
                            <BulletDecorator.Bullet>  
                                <Border x:Name="ForegroundPanel" BorderThickness="1" Width="35" Height="20" CornerRadius="10">  
                                    <Canvas>  
                                        <Border Background="White" x:Name="CheckFlag" CornerRadius="10" VerticalAlignment="Center" BorderThickness="1" Width="19" Height="18" RenderTransformOrigin="0.5,0.5">  
                                            <Border.RenderTransform>  
                                                <TransformGroup>  
                                                    <ScaleTransform/>  
                                                    <SkewTransform/>  
                                                    <RotateTransform/>  
                                                    <TranslateTransform/>  
                                                </TransformGroup>  
                                            </Border.RenderTransform>  
                                            <Border.Effect>  
                                                <DropShadowEffect ShadowDepth="1" Direction="180" />  
                                            </Border.Effect>  
                                        </Border>  
                                    </Canvas>  
                                </Border>  
                            </BulletDecorator.Bullet>  
                            <ContentPresenter HorizontalAlignment="\{TemplateBinding HorizontalContentAlignment\}" Margin="\{TemplateBinding Padding\}" RecognizesAccessKey="True" SnapsToDevicePixels="\{TemplateBinding SnapsToDevicePixels\}" VerticalAlignment="Center"/>  
                        </BulletDecorator>  
                        <ControlTemplate.Triggers>  
                            <Trigger Property="HasContent" Value="true">  
                                <Setter Property="FocusVisualStyle" Value="\{StaticResource CheckRadioFocusVisual\}"/>  
                                <Setter Property="Padding" Value="4,0,0,0"/>  
                            </Trigger>  
                            <Trigger Property="IsEnabled" Value="false">  
                                <Setter Property="Foreground" Value="\{DynamicResource \{x:Static SystemColors.GrayTextBrushKey\}\}"/>  
                            </Trigger>  
                            <Trigger Property="IsChecked" Value="True">  
                                  
                                <Setter TargetName="ForegroundPanel" Property="Background" Value="Green" />  
                                <Trigger.EnterActions>  
                                    <BeginStoryboard x:Name="BeginStoryboardCheckedTrue" Storyboard="\{StaticResource StoryboardIsChecked\}" />  
                                    <RemoveStoryboard BeginStoryboardName="BeginStoryboardCheckedFalse" />  
                                </Trigger.EnterActions>  
                            </Trigger>  
                            <Trigger Property="IsChecked" Value="False">  
                                <Setter TargetName="ForegroundPanel" Property="Background" Value="Gray" />  
                                <Trigger.EnterActions>  
                                    <BeginStoryboard x:Name="BeginStoryboardCheckedFalse" Storyboard="\{StaticResource StoryboardIsCheckedOff\}" />  
                                    <RemoveStoryboard BeginStoryboardName="BeginStoryboardCheckedTrue" />  
                                </Trigger.EnterActions>  
                            </Trigger>  
                        </ControlTemplate.Triggers>  
                    </ControlTemplate>  
                </Setter.Value>  
            </Setter>  
        </Style>

具体的效果用户可以通过调整样式中的参数值达到想要的效果