wpf switch button style
程序员文章站
2022-07-13 22:54:49
...
发现一个好玩的东西 ,也忘了是从哪里找到了
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="ToggleButtonSwitchBaseStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}"/>
<Setter Property="Background" Value="{DynamicResource PrimaryBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="0 1 0 0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<ControlTemplate.Resources>
<SineEase x:Key="RippleEasingFunction" EasingMode="EaseInOut"/>
<Storyboard x:Key="ShowRipple">
<DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="Opacity"
EasingFunction="{StaticResource RippleEasingFunction}"
To="0.26" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
EasingFunction="{StaticResource RippleEasingFunction}"
From="1" To="2.5" Duration="0:0:0.2"/>
<DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
EasingFunction="{StaticResource RippleEasingFunction}"
From="1" To="2.5" Duration="0:0:0.2"/>
</Storyboard>
<Storyboard x:Key="HideRipple">
<DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="Opacity"
EasingFunction="{StaticResource RippleEasingFunction}"
To="0" Duration="0:0:0.3"/>
</Storyboard>
</ControlTemplate.Resources>
<Viewbox Width="34" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition From="*" To="Checked">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="23.5">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition From="Checked" To="Unchecked">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder">
<EasingDoubleKeyFrame KeyTime="0" Value="23.5"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder"
Duration="0" To="23.5" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder"
Duration="0" To="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Rectangle x:Name="Track" Fill="Black" HorizontalAlignment="Left" Height="15" Margin="4.211,5,4.211,0" Stroke="{x:Null}" VerticalAlignment="Top" Width="40" RadiusY="7.5" RadiusX="7.5" Opacity="0.26"/>
<Grid x:Name="ThumbHolder"
HorizontalAlignment="Left" VerticalAlignment="Top">
<Ellipse x:Name="RippleThumb"
Fill="{DynamicResource LightPrimaryBrush}"
Height="25" Width="25"
IsHitTestVisible="False"
Opacity="0.26"
Margin="0"
HorizontalAlignment="Center" VerticalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1"/>
</Ellipse.RenderTransform>
</Ellipse>
<AdornerDecorator>
<Ellipse x:Name="Thumb"
Fill="#FFFAFAFA" Stroke="{x:Null}"
HorizontalAlignment="Center" VerticalAlignment="Center"
Width="25" Height="25"
Margin="0,0,0,0"
RenderTransformOrigin="0.5,0.5"
Effect="{DynamicResource EffectShadow1}">
</Ellipse>
</AdornerDecorator>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
Margin="{TemplateBinding Padding}"
x:Name="ContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
FlowDirection="LeftToRight"/>
<Grid.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Grid.RenderTransform>
</Grid>
</Grid>
</Viewbox>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="Thumb" Property="Fill" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
<Setter TargetName="Track" Property="Fill" Value="{DynamicResource LightPrimaryBrush}" />
<Setter Property="Foreground" Value="{DynamicResource SecondaryTextBrush}"/>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Foreground" Value="{DynamicResource PrimaryBrush}"/>
</Trigger>
<Trigger Property="Button.IsDefaulted" Value="true"/>
<Trigger Property="IsMouseOver" Value="true"/>
<Trigger Property="IsPressed" Value="true">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource ShowRipple}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource HideRipple}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" Value=".2" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
上一篇: WPF样式