wpf switch button style

发现一个好玩的东西 ,也忘了是从哪里找到了

<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>

在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值