简易的DragDropCarousel 拖拽轮播控件

上一篇文章有写到 自动轮播的控件  简易的AutoPlayCarousel 轮播控件 - 黄高林 - 博客园 (cnblogs.com)

本章是基于自动轮播的一种衍生，通过拖拽鼠标进切换

直接上代码

DragDropCarousel核心代码

[ContentProperty(nameof(ItemSources))]
    [TemplatePart(Name = "PART_StackPanel", Type = typeof(StackPanel))]
    public class DragDropCarousel : Control
    {
        #region 字段
        private StackPanel _stkMain;
        /// <summary>
        /// 标记是否点击
        /// </summary>
        private bool _isMouseDown;
        /// <summary>
        /// 标记是否动画中，动画过程中不允许操作
        /// </summary>
        private bool _isAnimating;
        /// <summary>
        /// 最后一次点击的位置
        /// </summary>
        private Point _lastDownPoint;
        /// <summary>
        /// 移动中
        /// </summary>
        private bool _isMoving;
        #endregion

        #region 构造
        static DragDropCarousel()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(DragDropCarousel), new FrameworkPropertyMetadata(typeof(DragDropCarousel)));
        }
        public DragDropCarousel()
        {
            Loaded += Carousel_Loaded;
            SizeChanged += Carousel_SizeChanged;
        }
        #endregion

        #region 属性
        /// <summary>
        /// 子控件集合
        /// </summary>
        public ObservableCollection<FrameworkElement> ItemSources
        {
            get => (ObservableCollection<FrameworkElement>)GetValue(ItemSourcesProperty);
            private set => SetValue(ItemSourcesProperty, value);
        }

        public static readonly DependencyProperty ItemSourcesProperty =
            DependencyProperty.Register("ItemSources", typeof(ObservableCollection<FrameworkElement>), typeof(DragDropCarousel), new PropertyMetadata(new ObservableCollection<FrameworkElement>()));
        /// <summary>
        /// 方向
        /// </summary>
        public Orientation Orientation
        {
            get => (Orientation)GetValue(OrientationProperty);
            set => SetValue(OrientationProperty, value);
        }

        public static readonly DependencyProperty OrientationProperty =
            DependencyProperty.Register("Orientation", typeof(Orientation), typeof(DragDropCarousel), new PropertyMetadata(Orientation.Horizontal));

        /// <summary>
        /// 下标
        /// </summary>
        public int Index
        {
            get => (int)GetValue(IndexProperty);
            set => SetValue(IndexProperty, value);
        }

        public static readonly DependencyProperty IndexProperty =
            DependencyProperty.Register("Index", typeof(int), typeof(DragDropCarousel), new PropertyMetadata(0));

        /// <summary>
        /// 抬起手时，滑动切页动画持续时间
        /// </summary>
        public TimeSpan AnimateDuration
        {
            get => (TimeSpan)GetValue(AnimateDurationProperty);
            set => SetValue(AnimateDurationProperty, value);
        }

        public static readonly DependencyProperty AnimateDurationProperty =
            DependencyProperty.Register("AnimateDuration", typeof(TimeSpan), typeof(DragDropCarousel), new PropertyMetadata(TimeSpan.FromSeconds(0.5)));

        /// <summary>
        /// 移动阈值
        /// </summary>
        public double MoveThreshold
        {
            get => (double)GetValue(MoveThresholdProperty);
            set => SetValue(MoveThresholdProperty, value);
        }

        // Using a DependencyProperty as the backing store for MoveThreshold.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty MoveThresholdProperty =
            DependencyProperty.Register("MoveThreshold", typeof(double), typeof(DragDropCarousel), new PropertyMetadata(10d));

        #endregion

        #region 对外方法
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            _stkMain = GetTemplateChild("PART_StackPanel") as StackPanel;
        }
        #endregion

        #region Event Handler

        private void Carousel_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            foreach (FrameworkElement children in ItemSources)
            {
                children.Width = ActualWidth;
                children.Height = ActualHeight;
                UnRegisterMouseEvent(children);
                RegisterMouseEvent(children);
            }
        }
        private void UnRegisterMouseEvent(FrameworkElement children)
        {
            children.MouseDown -= Children_MouseDown;
            children.MouseMove -= Children_MouseMove;
            children.MouseUp -= Children_MouseUp;
        }
        private void RegisterMouseEvent(FrameworkElement children)
        {
            children.MouseDown += Children_MouseDown;
            children.MouseMove += Children_MouseMove;
            children.MouseUp += Children_MouseUp;
        }

        private void Children_MouseUp(object sender, MouseButtonEventArgs e)
        {
            if (!_isMouseDown || _isAnimating||!_isMoving)
            {

_isMoving = false;
            _isMouseDown = false;

return;

            }
             _isMoving=false;
            _isMouseDown = false;
            var targetIndex = GetTargetIndex(e, _lastDownPoint);
            Index = targetIndex;
            var newThickness = new Thickness(-1 * ActualWidth * targetIndex, 0, 0, 0);
            var oldThickness = _stkMain.Margin;
            var thicknessAnimation = new ThicknessAnimation()
            {
                From = oldThickness,
                To = newThickness,
                Duration = AnimateDuration,
                EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseOut },
                FillBehavior = FillBehavior.Stop,
            };
            thicknessAnimation.Completed += (s, args) =>
            {
                _isAnimating = false;
                _stkMain.Margin = newThickness;
            };
            _isAnimating = true;
            _stkMain.BeginAnimation(MarginProperty, thicknessAnimation);
        }

        private int GetTargetIndex(MouseButtonEventArgs e, Point lastDownPoint)
        {
            var position = e.GetPosition(this);
            var vector = position - lastDownPoint;
            int targetIndex;
            if (vector.X < 0)
            {
                targetIndex = Index + 1 > (ItemSources.Count - 1) ? Index : Index + 1;
            }
            else
            {
                targetIndex = Index - 1 >= 0 ? Index - 1 : 0;
            }
            return targetIndex;
        }

        private void Children_MouseMove(object sender, MouseEventArgs e)
        {

            var position = e.GetPosition(this);
            if (!IsCanMove(_lastDownPoint, position))
            {
                _stkMain.Margin = new Thickness((-1 * ActualWidth * Index), 0, 0, 0);
                return;
            }
            var moveLength = _lastDownPoint.X - position.X;
            _stkMain.Margin = new Thickness((-1 * ActualWidth * Index - moveLength), 0, 0, 0);
        }

        private bool IsCanMove(Point lastPoint, Point currentPoint)
        {
            if (!_isMouseDown)
            {
                return false;
            }

            //以下控制不允许超出边界，想要回弹效果，可以去掉这部分代码
            var vector = currentPoint - lastPoint;
            if (!_isMoving && Math.Abs(vector.X) <= MoveThreshold)
            {
                return false;
            }

            _isMoving = true;
            if (vector.X < 0)
            {
                return Index != ItemSources.Count - 1;
            }

            return Index != 0;

        }

        private void Children_MouseDown(object sender, MouseButtonEventArgs e)
        {
            if (!(MoveElementAttach.GetAllowMove(e.Source as UIElement) ?? false) || _isAnimating)
            {
                _isMouseDown = false;
                return;
            }
            _isMouseDown = true;
            _lastDownPoint = e.GetPosition(this);
        }

        private void Carousel_Loaded(object sender, RoutedEventArgs e)
        {
            if (ItemSources == null)
                return;
            Loaded -= Carousel_Loaded;
            foreach (FrameworkElement child in ItemSources)
            {
                child.Width = ActualWidth;
                child.Height = ActualHeight;
            }
        }
        #endregion

    }

　　一些辅助的代码

public class IndexChangedEventArgs : RoutedEventArgs
    {
        public IndexChangedEventArgs(int currentIndex, RoutedEvent routedEvent) : base(routedEvent)
        {
            CurrentIndex = currentIndex;
        }

        public int CurrentIndex { get; set; }
    }

    public delegate void IndexChangedEventHandler(object sender, IndexChangedEventArgs e);

　　

/// <summary>
    /// 移动附加属性
    /// </summary>
    public class MoveElementAttach : DependencyObject
    {
        /// <summary>允许操作</summary>
        public static readonly DependencyProperty AllowMoveProperty = DependencyProperty.RegisterAttached("AllowMove", typeof(bool), typeof(MoveElementAttach), new PropertyMetadata((PropertyChangedCallback)null));

        public static bool? GetAllowMove(DependencyObject obj) => (bool?)obj?.GetValue(MoveElementAttach.AllowMoveProperty);

        public static void SetAllowMove(DependencyObject obj, bool? value) => obj.SetValue(MoveElementAttach.AllowMoveProperty, (object)value);
    }

　　

默认样式

<sys:Double x:Key="DefaultFontSize">14</sys:Double>
    <sys:Boolean x:Key="DefaultSnapsToDevicePixels">false</sys:Boolean>

    <Style TargetType="{x:Type local:DragDropCarousel}">
        <Setter Property="SnapsToDevicePixels" Value="{StaticResource DefaultSnapsToDevicePixels}" />
        <Setter Property="FontSize" Value="{StaticResource DefaultFontSize}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:DragDropCarousel}">
                    <StackPanel x:Name="PART_StackPanel" Orientation="Horizontal">
                        <ItemsControl x:Name="PART_ItemsControl"   ItemsSource="{TemplateBinding ItemSources}"
                                          VerticalAlignment="Stretch"
                                          HorizontalAlignment="Stretch">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Orientation="{Binding Orientation,RelativeSource={RelativeSource AncestorType=local:DragDropCarousel}}"/>
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                        </ItemsControl>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

　　

界面的使用

 <customControl:DragDropCarousel  x:Name="Carousel"
                                 Height="1080">
            <Grid Background="Red" customControl:MoveElementAttach.AllowMove="True" >
                <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="500" Width="500" Background="Black">

                    <TextBlock Text="1" FontSize="20" Foreground="Wheat" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                </Grid>
            </Grid>
            <Grid Background="Green" customControl:MoveElementAttach.AllowMove="True" >

                <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="500" Width="500" Background="Black">

                    <TextBlock Text="2" FontSize="20" Foreground="Wheat" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                </Grid>

            </Grid>
            <Grid Background="Yellow" customControl:MoveElementAttach.AllowMove="True"  >
                <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="500" Width="500" Background="Black">

                    <TextBlock Text="3" FontSize="20" Foreground="Wheat" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                </Grid>
            </Grid>
            <Grid Background="Blue" customControl:MoveElementAttach.AllowMove="True"  >
                <Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="500" Width="500" Background="Black">

                    <TextBlock Text="4" FontSize="20" Foreground="Wheat" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
                </Grid>
            </Grid>
        </customControl:DragDropCarousel>

　　

通过 customControl:MoveElementAttach.AllowMove="True" 来标记那些控件支持拖拽，哪些不支持拖拽,这种只是临时解决方案，其实还有其他的解决方案。后续我如果要用到再持续更新