欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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 switch button style
wpf switch button style

相关标签: wpf