wpf实现仿苹果水平滑动效果

wpf实现仿苹果水平滑动效果

cs：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp3
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        ///
        /// 完成缓冲效果
        ///
        /// 起始位置
        /// 目标位置
        /// 加速加速度
        /// 减速加速度
        /// 持续时间
        private void DoMove(DependencyProperty dp, double to, double ar, double dr, double duration)
        {
            DoubleAnimation doubleAnimation = new DoubleAnimation();//创建双精度动画对象

            doubleAnimation.To = to;//设置动画的结束值
            doubleAnimation.Duration = TimeSpan.FromSeconds(duration);//设置动画时间线长度
            doubleAnimation.AccelerationRatio = ar;//动画加速
            doubleAnimation.DecelerationRatio = dr;//动画减速
            doubleAnimation.FillBehavior = FillBehavior.HoldEnd;//设置动画完成后执行的操作

            grdTransfer.BeginAnimation(dp, doubleAnimation);//设置动画应用的属性并启动动画
        }



        private double pressedX;

        ///
        /// 点击鼠标，记录鼠标单击的位置
        ///
        ///
        ///
        private void grdTest_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            //获得鼠标点击的X坐标
            pressedX = e.GetPosition(cvsGround).X;

        }



       // 鼠标释放时的操作

            private void grdTest_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            double transferLeft = Convert.ToDouble(grdTransfer.GetValue(Canvas.LeftProperty));
            btn1.Content = transferLeft.ToString();
            if (transferLeft > 0)
            {
                transferLeft = 0;
            }
            if (this.Width - transferLeft > cvsGround.Width)
            {
                transferLeft = this.Width - cvsGround.Width;
            }

            //获得鼠标释放时的位置


                  double releasedX = e.GetPosition(cvsGround).X;

           // 获得距离间隔
                  double interval = releasedX - pressedX;
            pressedX = 0;
           // 计算出传送带要的目标位置
                  double to = transferLeft + interval;
           // 移动


                  btn1.Content = transferLeft.ToString() + " " + to.ToString();
            // btn1.Content = transferLeft.ToString() + " " + to.ToString();
            DoMove(Canvas.LeftProperty, to, 0.1, 0.5, 0.5);
        }

    }
}

xaml：

<Window x:Class="WpfApp3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp3" xmlns:Metro="clr-namespace:AduSkin.Controls.Metro;assembly=AduSkin"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        
            <Style x:Key="SwiperRadioStyle" TargetType="RadioButton">
                <Setter Property="Background" Value="#FF193D91"/>
                <Setter Property="BorderThickness" Value="10 0 0 0"/>
                <Setter Property="BorderBrush" Value="Red"/>
                <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="Foreground" Value="White"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="RadioButton">
                            <Grid>
                                <Border x:Name="border" Margin="-5"/>
                                <ContentPresenter x:Name="contentPresenter"  Focusable="False" 
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" 
                                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                        </Grid>
                            <ControlTemplate.Triggers>
                            
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter Property="Background" TargetName="border" Value="#FF176499"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="white"/>
                                <Setter Property="BorderThickness" TargetName="border" Value="4 0 0 0"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="False">
                                <Setter Property="Background" TargetName="border" Value="#FF193D91"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="gray"/>
                                <Setter Property="BorderThickness" TargetName="border" Value="2 0 0 0"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Background" TargetName="border" Value="#FF3386EC"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="gray"/>
                                <Setter Property="BorderThickness" TargetName="border" Value="4 0 0 0"/>
                            </Trigger>
                                
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Background" Value="#FF3386EC" TargetName="border"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="gray"/>
                                <Setter Property="BorderThickness" TargetName="border" Value="4 0 0 0"/>
                            </Trigger>

                            <Trigger Property="IsChecked" Value="False">
                                <Setter Property="Background" Value="#FF193D91"/>
                            </Trigger>

                        </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>

            </Style>
        
    </Window.Resources>
    <Grid>

        <Canvas Width="15000" x:Name="cvsGround">
            <StackPanel Width="1000" Height="35" x:Name="grdTransfer" Canvas.Left="0"
                        Background="Transparent" PreviewMouseLeftButtonDown="grdTest_PreviewMouseLeftButtonDown"
                        PreviewMouseLeftButtonUp="grdTest_PreviewMouseLeftButtonUp" Orientation="Horizontal" Margin="5">
                <RadioButton Background="Transparent" x:Name="btn1" Width="1">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock  Margin="10 0 0 0" VerticalAlignment="Center"/>
                    </StackPanel>
                </RadioButton>
                <RadioButton Style="{StaticResource SwiperRadioStyle}" x:Name="btn2" Width="100" Margin="10">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="2" Margin="10 0 0 0" VerticalAlignment="Center"/>
                    </StackPanel>
                </RadioButton>
                <RadioButton Style="{StaticResource SwiperRadioStyle}" x:Name="btn3"  Width="100" Margin="10">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="3" Margin="10 0 0 0" VerticalAlignment="Center"/>
                    </StackPanel>
                </RadioButton>
                <RadioButton Style="{StaticResource SwiperRadioStyle}" x:Name="btn4" Width="100" Margin="10">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="4" Margin="10 0 0 0" VerticalAlignment="Center"/>
                    </StackPanel>
                </RadioButton>
                <RadioButton Style="{StaticResource SwiperRadioStyle}" x:Name="btn5" Width="100" Margin="10">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="5" Margin="10 0 0 0" VerticalAlignment="Center"/>
                    </StackPanel>
                </RadioButton>
                <RadioButton Style="{StaticResource SwiperRadioStyle}" x:Name="btn6" Width="100" Margin="10">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="6" Margin="10 0 0 0" VerticalAlignment="Center"/>
                    </StackPanel>
                </RadioButton>
                <RadioButton Style="{StaticResource SwiperRadioStyle}" x:Name="btn7" Width="100" Margin="10">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="7" Margin="10 0 0 0" VerticalAlignment="Center"/>
                    </StackPanel>
                </RadioButton>
                <RadioButton Style="{StaticResource SwiperRadioStyle}" x:Name="btn8" Width="100" Margin="10">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="8" Margin="10 0 0 0" VerticalAlignment="Center"/>
                    </StackPanel>
                </RadioButton>
                <RadioButton Style="{StaticResource SwiperRadioStyle}" x:Name="btn9" Width="100" Margin="10">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="9" Margin="10 0 0 0" VerticalAlignment="Center"/>
                    </StackPanel>
                </RadioButton>
                <RadioButton Style="{StaticResource SwiperRadioStyle}" x:Name="btn10" Width="100" Margin="10">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="10" Margin="10 0 0 0" VerticalAlignment="Center"/>
                    </StackPanel>
                </RadioButton>
                <RadioButton Style="{StaticResource SwiperRadioStyle}" x:Name="btn11" Width="100" Margin="10">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="11" Margin="10 0 0 0" VerticalAlignment="Center"/>
                    </StackPanel>
                </RadioButton>
                <RadioButton Style="{StaticResource SwiperRadioStyle}" x:Name="btn12" Width="100" Margin="10">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="12" Margin="10 0 0 0" VerticalAlignment="Center"/>
                    </StackPanel>
                </RadioButton>
                <RadioButton Style="{StaticResource SwiperRadioStyle}" x:Name="btn13" Width="100" Margin="10">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="13" Margin="10 0 0 0" VerticalAlignment="Center"/>
                    </StackPanel>
                </RadioButton>
                <RadioButton Style="{StaticResource SwiperRadioStyle}" x:Name="btn14" Width="100" Margin="10">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="14" Margin="10 0 0 0" VerticalAlignment="Center"/>
                    </StackPanel>
                </RadioButton>
                <RadioButton Style="{StaticResource SwiperRadioStyle}" x:Name="btn15" Width="100" Margin="10">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="15" Margin="10 0 0 0" VerticalAlignment="Center"/>
                    </StackPanel>
                </RadioButton>
                <RadioButton Style="{StaticResource SwiperRadioStyle}" x:Name="btn16" Width="100" Margin="10">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="16" Margin="10 0 0 0" VerticalAlignment="Center"/>
                    </StackPanel>
                </RadioButton>
                </StackPanel>

        </Canvas>

    </Grid>
</Window>

实现如图：

参考博文：https://blog.csdn.net/lassewang/article/details/7173407