WPF自定义控件之列表滑动特效 PowerListBox

清疚 2021-11-05 11:12 762阅读 0赞

[WPF自定义控件之列表滑动特效 PowerListBox][WPF_ PowerListBox]

原文: [WPF自定义控件之列表滑动特效 PowerListBox][WPF_ PowerListBox 1]

列表控件是应用程序中常见的控件之一，对其做一些绚丽的视觉特效，可以让软件增色不少。

本人网上看过一个视频，是windows phone 7系统上的一个App的列表滚动效果，效果非常炫

现在在WPF上用ListBox重现此效果

首先我们来分析一下，这种实时滚动的效果是如何实现的，有哪些步骤

1.获取ListBox模板内部的ScrollViewer和ItemsPanel

2.监听ScrollViewer的滚动事件ScrollChange, 获取ItemsPanel的布局方向

3.在滚动事件发生时计算当前可视化区域中的第一项和最后一项，这是此滑动效果的核心算法所在，算法的效率决定了滑动效果的流畅性

4.根据滚动的方向和布局的方向依次对指定的Item做动画效果。

重写ListBoxItem

public class PowerListBoxItem : ListBoxItem

声明构造函数并赋初始值

static PowerListBoxItem()
            {
                DefaultStyleKeyProperty.OverrideMetadata(typeof(PowerListBoxItem), new FrameworkPropertyMetadata(typeof(PowerListBoxItem)));
            }
    
            public PowerListBoxItem()
            {
                ItemStatus = ItemStatusEnum.Out;  //默认Item状态为"退出"
                duration = new TimeSpan(0, 0, 0, 0, 300);
                //easingFunction = new PowerEase() { EasingMode = EasingMode.EaseIn, Power = 4 };
                easingFunction = new CircleEase() { EasingMode = EasingMode.EaseInOut };
            }

定义PowerListBoxItem的成员属性

/// <summary>
            /// PowerListBoxItem模板中的内容控件
            /// </summary>
            private FrameworkElement contentControl;
    
            /// <summary>
            /// 动画间隔时间
            /// </summary>
            private TimeSpan duration;
    
            private IEasingFunction easingFunction;   //动画缓动函数
    
            private IList<AnimationModel> DownInAnimationList;  //定义Item从下往上运动的动画内容集合
    
            private IList<AnimationModel> UpInAnimationList;    //定义Item从上往下运动的动画内容集合
    
            /// <summary>
            /// 项枚举状态，指明Item运动的方向
            /// </summary>
            internal enum ItemStatusEnum
            {
                UpIn, DownIn, RightIn, LeftIn, Out
            }
    
            private ItemStatusEnum _itemStatus;
    
            internal ItemStatusEnum ItemStatus
            {
                get { return _itemStatus; }
                set
                {
                    if (_itemStatus == value)   //状态相同时不再刷新状态
                        return;
                    _itemStatus = value;
                    PlayAnimation(); //执行动画
                }
            }

重写ListBox

[StyleTypedProperty(Property = "ItemContainerStyle", StyleTargetType = typeof(PowerListBoxItem))]
        public class PowerListBox : ListBox
        {
            static PowerListBox()
            {
                DefaultStyleKeyProperty.OverrideMetadata(typeof(PowerListBox), new FrameworkPropertyMetadata(typeof(PowerListBox)));
            }
    
            public PowerListBox()
            {
                DefaultStyleKey = typeof(PowerListBox);
            }
        }
    
         protected override DependencyObject GetContainerForItemOverride()
         {
           return new PowerListBoxItem();  //指定PowerListBox的项为PowerListBoxItem
         }
    
         protected override bool IsItemItsOwnContainerOverride(object item)
         {
            return item is PowerListBoxItem;
         }

定义PowerList的成员属性

/// <summary>
            /// ListBox内部的滚动试图
            /// </summary>
            private ScrollViewer _scrollView;
    
            /// <summary>
            /// 容器的布局方向
            /// </summary>
            private Orientation _panelOrientation;
    
            /// <summary>
            /// 当前可视化视图的第一项
            /// </summary>
            private int firstVisibleIndex;
    
            /// <summary>
            /// 当前可视化视图的最后一项
            /// </summary>
            private int lastVisibleIndex;
    
            /// <summary>
            /// 上次滚动时可视化视图的第一项
            /// </summary>
            private int oldFirstVisibleIndex;
    
            /// <summary>
            /// 上次滚动时可视化视图的最后一项
            /// </summary>
            private int oldLastVisibleIndex;
    
            /// <summary>
            /// 标识，是否已找到第一项
            /// </summary>
            private bool isFindFirst;
    
            /// <summary>
            /// 当前累计已遍历过的Item高度或宽度的值，用于寻找第一项和最后一项
            /// </summary>
            private double cumulativeNum;

获取PowerListBox内部的ScrollViewer和ItemsPanel，并监听滚动事件

public override void OnApplyTemplate()
            {
                _scrollView = VisualHelper.FindFirstVisualChild<ScrollViewer>(this);
                if (_scrollView == null)
                    return;
                _scrollView.CanContentScroll = false;  //不按Item为步长滚动
                _scrollView.PanningMode = PanningMode.Both;
                _scrollView.ScrollChanged += _scrollView_ScrollChanged;  //监听滚动事件
    
                var panel = this.ItemsPanel.LoadContent();  //读取布局容器
                if (panel is StackPanel)
                    _panelOrientation = (panel as StackPanel).Orientation;
                else if (panel is VirtualizingPanel)
                    _panelOrientation = (panel as VirtualizingStackPanel).Orientation;
    
                base.OnApplyTemplate();
            }
    
            private void _scrollView_ScrollChanged(object sender, ScrollChangedEventArgs e)
            {
                //Console.WriteLine("itemCount:{0}  VerticalOffset:{1}  ViewportHeight:{2}   ContentVerticalOffset:{3}",
                //Items.Count, _scrollView.VerticalOffset, _scrollView.ViewportHeight, _scrollView.ContentVerticalOffset);
                //每次滚动时都计算当前可视化区域的首尾项
                calculationIndex(); 
                refreshItemStatus(); //刷新Item状态
            }

计算可视化区域的第一项和最后一项

private void calculationIndex()
            {
                oldFirstVisibleIndex = firstVisibleIndex;
                oldLastVisibleIndex = lastVisibleIndex;
                isFindFirst = false;
                if (_panelOrientation == Orientation.Vertical)
                {
                    cumulativeNum = 0.0;
                    for (int i = 0; i < Items.Count; i++)
                    {
                        var _item = this.ItemContainerGenerator.ContainerFromIndex(i) as PowerListBoxItem;
                        cumulativeNum += _item.ActualHeight + _item.Margin.Top + _item.Margin.Bottom;
                        //遍历Items, 累计Item高度，第一个超过滚动条垂直偏移量的Item就是当前可视化区域中的第一项
                        if (!isFindFirst && cumulativeNum >= _scrollView.VerticalOffset)
                        {
                            firstVisibleIndex = i;
                            isFindFirst = true;
                        }
    
                        //累计Item高度超过滚动条垂直偏移量和滚动区显示高度的和，就是当前可视化区域的最后一项
                        if (cumulativeNum >= (_scrollView.VerticalOffset + _scrollView.ViewportHeight))
                        {
                            lastVisibleIndex = i;
                            break;
                        }
                    }
                }
            }

确定当前可视化区域的首尾项之后，刷新Item的状态

private void refreshItemStatus()
            {
                Console.WriteLine("firstIndex: {0}  lastIndex: {1}  oldFirstIndex: {2}  oldLastIndex: {3}  {4}",
                    firstVisibleIndex, lastVisibleIndex, oldFirstVisibleIndex, oldLastVisibleIndex, firstVisibleIndex > oldFirstVisibleIndex ? "Down In" : firstVisibleIndex < oldFirstVisibleIndex ? "UpIn" : "normal");
                if ((firstVisibleIndex == oldFirstVisibleIndex && lastVisibleIndex == oldLastVisibleIndex) || oldFirstVisibleIndex == 0 && oldLastVisibleIndex == 0)
                    return;
                //Console.WriteLine("firstVisibleIndex:{0} oldFirstVisibleIndex:{1}", firstVisibleIndex, oldFirstVisibleIndex);
                //判断滚动方向
                if (firstVisibleIndex > oldFirstVisibleIndex)
                {
                    //垂直  滚动条往下，内容网上
                    //水平  滚动条往右，内容往左
                    for (var i = oldLastVisibleIndex; i <= lastVisibleIndex; i++)
                    {
                        var _item = this.ItemContainerGenerator.ContainerFromIndex(i) as PowerListBoxItem;
                        _item.ItemStatus = _panelOrientation == Orientation.Vertical ? PowerListBoxItem.ItemStatusEnum.DownIn : PowerListBoxItem.ItemStatusEnum.RightIn;
                        //Console.WriteLine("DownIn {0}", i);
                    }
                }
                else if (lastVisibleIndex < oldLastVisibleIndex)
                {
                    //垂直  滚动条往上，内容网下
                    //水平  滚动条往左，内容往右
                    for (var i = oldFirstVisibleIndex; i >= firstVisibleIndex; i--)
                    {
                        var _item = this.ItemContainerGenerator.ContainerFromIndex(i) as PowerListBoxItem;
                        _item.ItemStatus = _panelOrientation == Orientation.Vertical ? PowerListBoxItem.ItemStatusEnum.UpIn : PowerListBoxItem.ItemStatusEnum.LeftIn;
                        //Console.WriteLine("UpIn {0}", i);
                    }
                }
            }

定义PowerListBox的默认外观

调用 PowerListBox

<local:PowerListBox ItemsSource="{Binding TestModelList}" >
              <local:PowerListBox.ItemTemplate>
                      <DataTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="150"/>
                                        <ColumnDefinition/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="{Binding Name}" VerticalAlignment="Center" FontSize="20"/>
                                    <Border Width="100" Height="120" Background="#FF4949D3" Grid.Column="1" HorizontalAlignment="Left">
                                        <TextBlock Text="{Binding Id}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="40" Foreground="Black"/>
                                    </Border>
                                </Grid>
                     </DataTemplate>
            </local:PowerListBox.ItemTemplate>
    </local:PowerListBox>

效果图

![378510-20161202102116037-1936177057.gif][]

由于gif录制帧数的原因，效果图不是很流畅，但实际运行情况动画效果是非常流畅的

posted on 2019-06-03 08:44 [NET未来之路][NET] 阅读( ...) 评论( ...) [编辑][Link 1] 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/10965640.html

[WPF_ PowerListBox]: https://www.cnblogs.com/lonelyxmas/p/10965640.html
[WPF_ PowerListBox 1]: https://www.cnblogs.com/ShenNan/p/4993374.html
[378510-20161202102116037-1936177057.gif]: /images/20211105/872e9743d5b3466cafe916bcaf0ab304.png
[NET]: https://www.cnblogs.com/lonelyxmas/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=10965640