目录

WPF-滑块checkbox

目录
<Style x:Key="ToggleSwitchCheckBox" TargetType="CheckBox">
    <Setter Property="Width" Value="46" />
    <Setter Property="Height" Value="22" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="CheckBox">
                <Grid>
                    <!-- 背景 -->
                    <Border
                        x:Name="SwitchBackground"
                        Background="#3A3A3A"
                        CornerRadius="11" />

                    <!-- 滑块 -->
                    <Ellipse
                        x:Name="SwitchThumb"
                        Width="18"
                        Height="18"
                        Margin="2"
                        HorizontalAlignment="Left"
                        Fill="White">
                        <!-- 添加变换以便动画移动 -->
                        <Ellipse.RenderTransform>
                            <TranslateTransform x:Name="ThumbTransform" X="0" />
                        </Ellipse.RenderTransform>
                    </Ellipse>
                </Grid>

                <ControlTemplate.Triggers>
                    <!-- 1. 打开状态 (IsChecked = True) -->
                    <Trigger Property="IsChecked" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <!-- 背景颜色渐变 -->
                                    <ColorAnimation
                                        Storyboard.TargetName="SwitchBackground"
                                        Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                        To="#4CAF50"
                                        Duration="0:0:0.2">
                                        <ColorAnimation.EasingFunction>
                                            <QuadraticEase EasingMode="EaseInOut" />
                                        </ColorAnimation.EasingFunction>
                                    </ColorAnimation>
                                    <!-- 滑块移动动画 (46 - 18 - 2 - 2 = 24) -->
                                    <DoubleAnimation
                                        Storyboard.TargetName="ThumbTransform"
                                        Storyboard.TargetProperty="X"
                                        To="24"
                                        Duration="0:0:0.2">
                                        <DoubleAnimation.EasingFunction>
                                            <QuadraticEase EasingMode="EaseInOut" />
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <!-- 关闭状态回退动画 (IsChecked = False 时触发) -->
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation
                                        Storyboard.TargetName="SwitchBackground"
                                        Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                        To="#3A3A3A"
                                        Duration="0:0:0.2">
                                        <ColorAnimation.EasingFunction>
                                            <QuadraticEase EasingMode="EaseInOut" />
                                        </ColorAnimation.EasingFunction>
                                    </ColorAnimation>
                                    <DoubleAnimation
                                        Storyboard.TargetName="ThumbTransform"
                                        Storyboard.TargetProperty="X"
                                        To="0"
                                        Duration="0:0:0.2">
                                        <DoubleAnimation.EasingFunction>
                                            <QuadraticEase EasingMode="EaseInOut" />
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>

                    <!-- 2. 禁用状态 -->
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Opacity" Value="0.5" />
                    </Trigger>

                    <!-- 3. 鼠标悬停效果 (可选,增加交互感) -->
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="SwitchThumb" Property="Opacity" Value="0.9" />
                    </Trigger>
                    
                    <!-- 4. 鼠标按下效果 (可选,增加点击感) -->
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="SwitchThumb" Property="Width" Value="22" />
                        <Setter TargetName="SwitchThumb" Property="Height" Value="14" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>