Files
ShrlAlgoToolkit/Melskin/Controls/ToggleSwitch.xaml
2026-02-20 15:31:44 +08:00

523 lines
30 KiB
XML

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:assists="clr-namespace:Melskin.Assists"
xmlns:controls="clr-namespace:Melskin.Controls"
xmlns:converters="clr-namespace:Melskin.Converters"
xmlns:decorations="clr-namespace:Melskin.Controls.Decorations"
xmlns:internal="clr-namespace:Melskin.Converters.Internal">
<Style x:Key="FloatToggleSwitchStyle" TargetType="{x:Type controls:ToggleSwitch}">
<!-- 资源区:定义开关动画 Storyboard -->
<Style.Resources>
<!-- 开关打开动画:圆点滑动到右侧,背景切换为“开”状态 -->
<Storyboard x:Key="ToggleSwitchOn">
<!-- 圆点容器 Margin 动画:从左侧滑到右侧 -->
<ThicknessAnimationUsingKeyFrames
Storyboard.TargetName="circleBox"
Storyboard.TargetProperty="Margin"
Duration="0:0:0.2">
<LinearThicknessKeyFrame KeyTime="0" Value="0,0,19,0" />
<SplineThicknessKeyFrame
KeySpline="0.8,1 0.8,1"
KeyTime="0:0:0.2"
Value="0,0,1,0" />
</ThicknessAnimationUsingKeyFrames>
<!-- “关”状态背景渐变消失 -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="borderOff"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.2">
<LinearDoubleKeyFrame KeyTime="0" Value="1" />
<SplineDoubleKeyFrame
KeySpline="0.8,1 0.8,1"
KeyTime="0:0:0.2"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<!-- “开”状态背景渐变出现 -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="borderOn"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.2">
<LinearDoubleKeyFrame KeyTime="0" Value="0" />
<SplineDoubleKeyFrame
KeySpline="0.8,1 0.8,1"
KeyTime="0:0:0.2"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<!-- 开关关闭动画:圆点滑动到左侧,背景切换为“关”状态 -->
<Storyboard x:Key="ToggleSwitchOff">
<!-- 圆点容器 Margin 动画:从右侧滑到左侧 -->
<ThicknessAnimationUsingKeyFrames
Storyboard.TargetName="circleBox"
Storyboard.TargetProperty="Margin"
Duration="0:0:0.2">
<LinearThicknessKeyFrame KeyTime="0" Value="19,0,0,0" />
<SplineThicknessKeyFrame
KeySpline="0.8,1 0.8,1"
KeyTime="0:0:0.2"
Value="1,0,0,0" />
</ThicknessAnimationUsingKeyFrames>
<!-- “关”状态背景渐变出现 -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="borderOff"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.2">
<LinearDoubleKeyFrame KeyTime="0" Value="0" />
<SplineDoubleKeyFrame
KeySpline="0.8,1 0.8,1"
KeyTime="0:0:0.2"
Value="1" />
</DoubleAnimationUsingKeyFrames>
<!-- “开”状态背景渐变消失 -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="borderOn"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.2">
<LinearDoubleKeyFrame KeyTime="0" Value="1" />
<SplineDoubleKeyFrame
KeySpline="0.8,1 0.8,1"
KeyTime="0:0:0.2"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Style.Resources>
<!-- 基础属性设置 -->
<Setter Property="FocusVisualStyle" Value="{DynamicResource FocusVisual}" />
<Setter Property="Background" Value="{DynamicResource ControlBackgroundNormalBrush}" />
<Setter Property="Foreground" Value="{DynamicResource PrimaryGradientBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource BorderNormalBrush}" />
<Setter Property="Margin" Value="4" />
<!--<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />-->
<!-- 控件模板定义 -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<!-- 主容器,固定高度和宽度 -->
<Grid Width="42" Height="24">
<!-- “开”状态背景,初始不可见 -->
<Border
x:Name="borderOn"
Background="{TemplateBinding Foreground}"
CornerRadius="12"
Opacity="0" />
<!-- “关”状态背景,初始可见 -->
<Border
x:Name="borderOff"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="1"
CornerRadius="12"
Opacity="1" />
<!-- 圆点容器,初始在左侧 -->
<Grid
x:Name="circleBox"
Width="20"
Height="20"
Margin="1,0,0,0"
HorizontalAlignment="Left">
<!-- 内部圆点,带阴影效果 -->
<Border
x:Name="circle"
Margin="2"
Background="{DynamicResource TextAccentBrush}"
CornerRadius="8">
<Border.Effect>
<DropShadowEffect
BlurRadius="6"
Opacity="0.6"
ShadowDepth="2"
Color="{DynamicResource DarkShadowColor}" />
</Border.Effect>
</Border>
</Grid>
</Grid>
<!-- 状态触发器区 -->
<ControlTemplate.Triggers>
<!-- 默认按钮状态(无特殊效果) -->
<Trigger Property="Button.IsDefaulted" Value="True" />
<!-- 鼠标悬停时,圆点变大并微调边距 -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="circle" Property="Margin" Value="1" />
<Setter TargetName="circle" Property="CornerRadius" Value="9" />
</Trigger>
<!-- 按下时,圆点容器变宽,模拟按压效果 -->
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="circleBox" Property="Width" Value="24" />
</Trigger>
<!-- 选中时,圆点滑到右侧并启动“开”动画,取消选中时启动“关”动画 -->
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="circleBox" Property="HorizontalAlignment" Value="Right" />
<Setter TargetName="circleBox" Property="Margin" Value="0,0,11,0" />
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource ToggleSwitchOn}" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource ToggleSwitchOff}" />
</Trigger.ExitActions>
</Trigger>
<!-- 禁用时,圆点和背景变灰,去除阴影 -->
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="circle" Property="Background" Value="{DynamicResource TextDisabledBrush}" />
<Setter TargetName="circle" Property="Effect" Value="{x:Null}" />
<Setter TargetName="borderOn" Property="Background" Value="{DynamicResource PrimaryDisabledBrush}" />
<Setter TargetName="borderOff" Property="Background" Value="{DynamicResource ControlBackgroundDisabledBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type controls:ToggleSwitch}">
<!-- 资源区:定义开关动画 Storyboard -->
<Style.Resources>
<!-- 开关打开动画:圆点滑动到右侧,背景切换为“开”状态 -->
<Storyboard x:Key="ToggleSwitchOn">
<!-- 圆点容器 Margin 动画:从左侧滑到右侧 -->
<ThicknessAnimationUsingKeyFrames
Storyboard.TargetName="circleBox"
Storyboard.TargetProperty="Margin"
Duration="0:0:0.2">
<LinearThicknessKeyFrame KeyTime="0" Value="0,0,19,0" />
<SplineThicknessKeyFrame
KeySpline="0.8,1 0.8,1"
KeyTime="0:0:0.2"
Value="0,0,1,0" />
</ThicknessAnimationUsingKeyFrames>
<!-- “关”状态背景渐变消失 -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="borderOff"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.2">
<LinearDoubleKeyFrame KeyTime="0" Value="1" />
<SplineDoubleKeyFrame
KeySpline="0.8,1 0.8,1"
KeyTime="0:0:0.2"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<!-- “开”状态背景渐变出现 -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="borderOn"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.2">
<LinearDoubleKeyFrame KeyTime="0" Value="0" />
<SplineDoubleKeyFrame
KeySpline="0.8,1 0.8,1"
KeyTime="0:0:0.2"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<!-- 开关关闭动画:圆点滑动到左侧,背景切换为“关”状态 -->
<Storyboard x:Key="ToggleSwitchOff">
<!-- 圆点容器 Margin 动画:从右侧滑到左侧 -->
<ThicknessAnimationUsingKeyFrames
Storyboard.TargetName="circleBox"
Storyboard.TargetProperty="Margin"
Duration="0:0:0.2">
<LinearThicknessKeyFrame KeyTime="0" Value="19,0,0,0" />
<SplineThicknessKeyFrame
KeySpline="0.8,1 0.8,1"
KeyTime="0:0:0.2"
Value="1,0,0,0" />
</ThicknessAnimationUsingKeyFrames>
<!-- “关”状态背景渐变出现 -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="borderOff"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.2">
<LinearDoubleKeyFrame KeyTime="0" Value="0" />
<SplineDoubleKeyFrame
KeySpline="0.8,1 0.8,1"
KeyTime="0:0:0.2"
Value="1" />
</DoubleAnimationUsingKeyFrames>
<!-- “开”状态背景渐变消失 -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="borderOn"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.2">
<LinearDoubleKeyFrame KeyTime="0" Value="1" />
<SplineDoubleKeyFrame
KeySpline="0.8,1 0.8,1"
KeyTime="0:0:0.2"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Style.Resources>
<!-- 基础属性设置 -->
<Setter Property="FocusVisualStyle" Value="{DynamicResource FocusVisual}" />
<Setter Property="Background" Value="{DynamicResource ControlBackgroundNormalBrush}" />
<Setter Property="Foreground" Value="{DynamicResource PrimaryNormalBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource BorderNormalBrush}" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Margin" Value="4" />
<!--<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />-->
<!-- 控件模板定义 -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<!-- 主容器,固定高度和宽度 -->
<Grid Width="42" Height="24">
<!-- “开”状态背景,初始不可见 -->
<Border
x:Name="borderOn"
Background="{TemplateBinding Foreground}"
CornerRadius="12"
Opacity="0" />
<!-- “关”状态背景,初始可见 -->
<Border
x:Name="borderOff"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="1"
CornerRadius="12"
Opacity="1" />
<!-- 圆点容器,初始在左侧 -->
<Grid
x:Name="circleBox"
Width="20"
Height="20"
Margin="1,0,0,0"
HorizontalAlignment="Left">
<!-- 内部圆点,带阴影效果 -->
<Border
x:Name="circle"
Margin="2"
Background="{DynamicResource TextAccentBrush}"
CornerRadius="8" />
</Grid>
</Grid>
<!-- 状态触发器区 -->
<ControlTemplate.Triggers>
<!-- 默认按钮状态(无特殊效果) -->
<Trigger Property="Button.IsDefaulted" Value="True" />
<!-- 鼠标悬停时,圆点变大并微调边距 -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="circle" Property="Margin" Value="1" />
<Setter TargetName="circle" Property="CornerRadius" Value="9" />
</Trigger>
<!-- 按下时,圆点容器变宽,模拟按压效果 -->
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="circleBox" Property="Width" Value="24" />
</Trigger>
<!--<Trigger Property="IsChecked" Value="False">
<Setter TargetName="circle" Property="Background" Value="{DynamicResource ControlBackgroundHoverBrush}" />
</Trigger>-->
<!-- 选中时,圆点滑到右侧并启动“开”动画,取消选中时启动“关”动画 -->
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="circleBox" Property="HorizontalAlignment" Value="Right" />
<Setter TargetName="circleBox" Property="Margin" Value="0,0,11,0" />
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource ToggleSwitchOn}" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource ToggleSwitchOff}" />
</Trigger.ExitActions>
</Trigger>
<!-- 禁用时,圆点和背景变灰,去除阴影 -->
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="circle" Property="Background" Value="{DynamicResource TextDisabledBrush}" />
<Setter TargetName="borderOn" Property="Background" Value="{DynamicResource PrimaryDisabledBrush}" />
<Setter TargetName="borderOff" Property="Background" Value="{DynamicResource ControlBackgroundDisabledBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SlotToggleSwitch" TargetType="{x:Type controls:ToggleSwitch}">
<!-- 基础属性设置 -->
<Setter Property="FocusVisualStyle" Value="{DynamicResource FocusVisual}" />
<Setter Property="Background" Value="{DynamicResource ControlBackgroundNormalBrush}" />
<Setter Property="Foreground" Value="{DynamicResource TextSecondaryBrush}" />
<Setter Property="Margin" Value="4" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<!-- 默认的开关图形尺寸 -->
<Setter Property="MinHeight" Value="24" />
<Setter Property="MinWidth" Value="48" />
<Setter Property="ClipToBounds" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid x:Name="templateRoot" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid
x:Name="SwitchContainer"
Grid.Column="0"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Border
x:Name="AnimationProxy"
Opacity="0"
Visibility="Collapsed" />
<!-- 背景层 -->
<decorations:SlotBorder
x:Name="slot"
Margin="-4"
Padding="0"
Background="{TemplateBinding Background}"
CornerRadius="{Binding Path=ActualHeight, ElementName=SwitchContainer, Converter={x:Static converters:DivideByTwoConverter.Instance}}"
Intensity="0.3" />
<!-- 内容层 -->
<ContentPresenter
x:Name="OffContentPresenter"
Margin="0,0,6,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Content="{Binding Path=(assists:ControlAssist.OffContent), RelativeSource={RelativeSource TemplatedParent}}">
<ContentPresenter.Opacity>
<Binding
Converter="{x:Static internal:InverseOpacityConverter.Instance}"
ElementName="AnimationProxy"
Path="Opacity" />
</ContentPresenter.Opacity>
</ContentPresenter>
<ContentPresenter
x:Name="OnContentPresenter"
Margin="6,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Content="{Binding Path=(assists:ControlAssist.OnContent), RelativeSource={RelativeSource TemplatedParent}}"
Opacity="{Binding Path=Opacity, ElementName=AnimationProxy}" />
<!--<Border
x:Name="borderOff"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="1"
CornerRadius="{Binding Path=ActualHeight, ElementName=SwitchContainer, Converter={x:Static converters:DivideByTwoConverter.Instance}}" />
<Border
x:Name="borderOn"
Background="{TemplateBinding Foreground}"
CornerRadius="{Binding Path=ActualHeight, ElementName=SwitchContainer, Converter={x:Static converters:DivideByTwoConverter.Instance}}"
Opacity="{Binding Path=Opacity, ElementName=AnimationProxy}" />-->
</Grid>
<!-- 滑块层 -->
<Grid
x:Name="circleBox"
Grid.Column="0"
Width="{Binding Path=ActualHeight, ElementName=SwitchContainer}"
Height="{Binding Path=ActualHeight, ElementName=SwitchContainer}"
HorizontalAlignment="Left">
<Grid.RenderTransform>
<TranslateTransform x:Name="circleTranslate">
<TranslateTransform.X>
<MultiBinding Converter="{x:Static internal:ThumbPositionConverter.Instance}">
<Binding ElementName="AnimationProxy" Path="Opacity" />
<Binding ElementName="SwitchContainer" Path="ActualWidth" />
<Binding ElementName="SwitchContainer" Path="ActualHeight" />
</MultiBinding>
</TranslateTransform.X>
</TranslateTransform>
</Grid.RenderTransform>
<decorations:EmbossBorder
x:Name="circle"
Margin="-3"
Padding="0"
Background="{DynamicResource PrimaryNormalBrush}"
CornerRadius="{Binding Path=ActualHeight, ElementName=SwitchContainer, Converter={x:Static converters:DivideByTwoConverter.Instance}}"
Intensity="0.5">
<!--<Ellipse x:Name="optionMark" Fill="{DynamicResource PrimaryNormalBrush}" />-->
</decorations:EmbossBorder>
</Grid>
<TextBlock
x:Name="StateTextBlock"
Grid.Column="1"
Margin="4,0,0,0"
VerticalAlignment="Center"
Foreground="{DynamicResource TextPrimaryBrush}"
Visibility="Collapsed">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}}" Value="True">
<Setter Property="Text" Value="{Binding Path=(assists:ControlAssist.OnText), RelativeSource={RelativeSource TemplatedParent}}" />
</DataTrigger>
<DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}}" Value="False">
<Setter Property="Text" Value="{Binding Path=(assists:ControlAssist.OffText), RelativeSource={RelativeSource TemplatedParent}}" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="circle" Property="Effect">
<Setter.Value>
<DropShadowEffect
BlurRadius="6"
Opacity="0.25"
ShadowDepth="1"
Color="#33000000" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="circle" Property="Background" Value="{DynamicResource PrimaryDisabledBrush}" />
<Setter TargetName="circle" Property="ShaderEnabled" Value="False" />
<Setter TargetName="circle" Property="Effect" Value="{x:Null}" />
<Setter TargetName="StateTextBlock" Property="Foreground" Value="{DynamicResource TextDisabledBrush}" />
<Setter TargetName="OffContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource TextDisabledBrush}" />
<Setter TargetName="OnContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource TextDisabledBrush}" />
<Setter TargetName="slot" Property="Background" Value="{DynamicResource ControlBackgroundDisabledBrush}" />
<Setter TargetName="slot" Property="ShaderEnabled" Value="False" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<!--<Setter Property="Opacity" TargetName="AnimationProxy" Value="1.0" />-->
<!--<Setter TargetName="circle" Property="Background" Value="{DynamicResource PrimaryNormalBrush}" />-->
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="AnimationProxy"
Storyboard.TargetProperty="Opacity"
To="1.0"
Duration="0:0:0.25" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="AnimationProxy"
Storyboard.TargetProperty="Opacity"
To="0.0"
Duration="0:0:0.25" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="assists:ControlAssist.OnContent" Value="{x:Null}">
<Setter TargetName="OnContentPresenter" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="assists:ControlAssist.ShowText" Value="True">
<Setter TargetName="StateTextBlock" Property="Visibility" Value="Visible" />
<Setter Property="MinWidth" Value="64" />
</Trigger>
<Trigger Property="assists:ControlAssist.OffContent" Value="{x:Null}">
<Setter TargetName="OffContentPresenter" Property="Visibility" Value="Collapsed" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>