WPF滑动按钮控件

效果图片

前台代码

<UserControl x:Class="Demo.SildButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d" 
             d:DesignHeight="40" d:DesignWidth="95" Foreground="White">
    <Grid MouseLeftButtonDown="Grid_MouseLeftButtonDown" Tag="0" x:Name="grid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="618*"/>
            <ColumnDefinition Width="1000*"/>
        </Grid.ColumnDefinitions>
        <Rectangle RadiusX="20" RadiusY="25" Grid.ColumnSpan="2" x:Name="rectangle">
            <Rectangle.Fill>
                <SolidColorBrush Color="LimeGreen" />
            </Rectangle.Fill>
        </Rectangle>
        <Canvas Grid.Column="0" Grid.ColumnSpan="2" x:Name="canvas">
            <Ellipse x:Name="ellipse" Height="36" Width="36" HorizontalAlignment="Left" Margin="2" Grid.ColumnSpan="2">
                <Ellipse.Fill>
                    <SolidColorBrush Color="White"/>
                </Ellipse.Fill>
            </Ellipse>
            <Label x:Name="label" Content="ON" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1" FontSize="20" Canvas.Top="2.5" Canvas.Right="6"/>
        </Canvas>
    </Grid>
</UserControl>

后台代码（if和else中基本上是重的，懒得重写方法了直接修改了一下复制粘贴过去的）

private void Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (this.grid.Tag.ToString() == "0")
            {
                EllipseWidthChange();

                //椭圆移动动画
                Storyboard ellipse_Move = new Storyboard();

                DoubleAnimation ellipse_MoveAniamtion = new DoubleAnimation();
                ellipse_MoveAniamtion.From = 0;
                ellipse_MoveAniamtion.To = 55;
                ellipse_MoveAniamtion.Duration = new TimeSpan(0, 0, 0, 0, 400);

                Storyboard.SetTarget(ellipse_MoveAniamtion, ellipse);
                Storyboard.SetTargetProperty(ellipse_MoveAniamtion, new PropertyPath("(Canvas.Left)"));
                ellipse_Move.Children.Add(ellipse_MoveAniamtion);
                ellipse_Move.Begin();

                //文字移动
                label.Content = "OFF";

                Storyboard label_Move = new Storyboard();

                DoubleAnimation label_MoveAnimation = new DoubleAnimation();
                label_MoveAnimation.From = 6;
                label_MoveAnimation.To = 40;
                label_MoveAnimation.Duration = new TimeSpan(0, 0, 0, 0, 400);

                Storyboard.SetTarget(label_MoveAnimation, label);
                Storyboard.SetTargetProperty(label_MoveAnimation, new PropertyPath("(Canvas.Right)"));
                label_Move.Children.Add(label_MoveAnimation);
                label_Move.Begin();

                //颜色变化
                Storyboard background_Change = new Storyboard();

                ColorAnimation background_ChangeAnimation = new ColorAnimation();
                background_ChangeAnimation.From = Colors.LimeGreen;
                background_ChangeAnimation.To = Colors.IndianRed;
                background_ChangeAnimation.Duration = new TimeSpan(0, 0, 0, 0, 4);

                Storyboard.SetTarget(background_ChangeAnimation, rectangle);
                Storyboard.SetTargetProperty(background_ChangeAnimation, new PropertyPath("(Rectangle.Fill).(SolidColorBrush.Color)"));
                background_Change.Children.Add(background_ChangeAnimation);
                background_Change.Begin();

                this.grid.Tag = 1;
            }
            else
            {
                EllipseWidthChange();

                //椭圆移动动画
                Storyboard ellipse_Move = new Storyboard();

                DoubleAnimation ellipse_MoveAnimation = new DoubleAnimation();
                ellipse_MoveAnimation.From = 55;
                ellipse_MoveAnimation.To = 0;
                ellipse_MoveAnimation.Duration = new TimeSpan(0, 0, 0, 0, 400);

                Storyboard.SetTarget(ellipse_MoveAnimation, ellipse);
                Storyboard.SetTargetProperty(ellipse_MoveAnimation, new PropertyPath("(Canvas.Left)"));
                ellipse_Move.Children.Add(ellipse_MoveAnimation);
                ellipse_Move.Begin();


                //文字移动
                label.Content = "ON";

                Storyboard label_Move = new Storyboard();

                DoubleAnimation label_MoveAnimation = new DoubleAnimation();
                label_MoveAnimation.From = 49;
                label_MoveAnimation.To = 6;
                label_MoveAnimation.Duration = new TimeSpan(0, 0, 0, 0, 400);

                Storyboard.SetTarget(label_MoveAnimation, label);
                Storyboard.SetTargetProperty(label_MoveAnimation, new PropertyPath("(Canvas.Right)"));
                label_Move.Children.Add(label_MoveAnimation);
                label_Move.Begin();

                //颜色变化
                Storyboard background_Change = new Storyboard();

                ColorAnimation background_ChangeAnimation = new ColorAnimation();
                background_ChangeAnimation.From = Colors.IndianRed;
                background_ChangeAnimation.To = Colors.LimeGreen;
                background_ChangeAnimation.Duration = new TimeSpan(0, 0, 0, 0, 4);

                Storyboard.SetTarget(background_ChangeAnimation, rectangle);
                Storyboard.SetTargetProperty(background_ChangeAnimation, new PropertyPath("(Rectangle.Fill).(SolidColorBrush.Color)"));
                background_Change.Children.Add(background_ChangeAnimation);
                background_Change.Begin();

                this.grid.Tag = 0;
            }
        }

        /// <summary>
        /// 椭圆缩放动画
        /// </summary>
        private void EllipseWidthChange()
        {
            Storyboard ellipse_Width = new Storyboard();

            DoubleAnimation ellipse_WidthAniamtion = new DoubleAnimation();
            ellipse_WidthAniamtion.From = 36;
            ellipse_WidthAniamtion.To = 50;
            ellipse_WidthAniamtion.Duration = new TimeSpan(0, 0, 0, 0, 200);
            ellipse_WidthAniamtion.AutoReverse = true;

            Storyboard.SetTarget(ellipse_WidthAniamtion, ellipse);
            Storyboard.SetTargetProperty(ellipse_WidthAniamtion, new PropertyPath("Width"));
            ellipse_Width.Children.Add(ellipse_WidthAniamtion);
            ellipse_Width.Begin();
        }

如果有不恰当的地方欢迎大家留言。