ps或美图秀秀做吧 可以找专门的美工

我直接写成CheckBox了，悬浮那个粉色圈的渐变没有做，感觉并不好看。

  <Window.Resources>
        <Style x:Key="CHECKBOX" TargetType="{x:Type CheckBox}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <Border Width="80" Height="40" CornerRadius="20" Background="LightGray" BorderBrush="LightGray">
                            <Grid>
                                <Border Width="80" Height="40" CornerRadius="20" Margin="0,0,0,0" Background="White" RenderTransformOrigin="0.5 0.5">
                                    <Border.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform x:Name="scale" ScaleX="0.95" ScaleY="0.95"/>
                                        </TransformGroup>
                                    </Border.RenderTransform>
                                </Border>
                                <Border x:Name="btn" Width="40" Height="40" CornerRadius="20" Margin="0,0,0,0" HorizontalAlignment="Left" Background="#FF9E9E9E" >
                                </Border>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard >
                                        <Storyboard>
                                            <DoubleAnimation To="0.4"  Duration="0:0:0.4" Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleX" />
                                            <DoubleAnimation To="0.4"  Duration="0:0:0.4" Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleY" />
                                            <ThicknessAnimation To="40,0,0,0" Storyboard.TargetName="btn" Storyboard.TargetProperty="Margin" Duration="0:0:0.7">
                                                <ThicknessAnimation.EasingFunction>
                                                    <CubicEase EasingMode="EaseOut"></CubicEase>
                                                </ThicknessAnimation.EasingFunction>
                                            </ThicknessAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard >
                                        <Storyboard>
                                            <DoubleAnimation To="0.95"  Duration="0:0:0.4" Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleX" />
                                            <DoubleAnimation To="0.95"  Duration="0:0:0.4" Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleY" />
                                            <ThicknessAnimation To="0,0,0,0" Storyboard.TargetName="btn" Storyboard.TargetProperty="Margin" Duration="0:0:0.7">
                                                <ThicknessAnimation.EasingFunction>
                                                    <CubicEase EasingMode="EaseOut"></CubicEase>
                                                </ThicknessAnimation.EasingFunction>
                                            </ThicknessAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>
    <Grid >
        <CheckBox Style="{StaticResource CHECKBOX}" Width="100" Height="40"></CheckBox>
    </Grid>