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>