WPF数字滚动效果

分手后的思念是犯贱 2022-01-05 04:05 291阅读 0赞

和WPF数字滚动抽奖有区别，WPF数字滚动抽奖是随机的，而这里是确定的。

为了系统演示，这个效果通宵加班写了整整6个小时，中间就上了次厕所。

代码：

RollingNumberItemCtrl.xaml代码：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

RollingNumberItemCtrl.xaml.cs代码：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Linq;
    using System.Text;
    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 SunCreate.Common.Controls
    {
        /// <summary>
        /// NumCtrl.xaml 的交互逻辑
        /// </summary>
        public partial class RollingNumberItemCtrl : INotifyPropertyChanged
        {
            private Thickness _MarginTop = new Thickness(0, 0, 0, 0);
            /// <summary>
            /// Margin
            /// </summary>
            public Thickness MarginTop
            {
                get { return _MarginTop; }
                set
                {
                    _MarginTop = value;
                    OnPropertyChanged("MarginTop");
                }
            }
    
            private double _Num;
            /// <summary>
            /// 数字
            /// </summary>
            public double Num
            {
                get { return _Num; }
                set
                {
                    var ease = new ExponentialEase()
                    {
                        EasingMode = EasingMode.EaseOut,
                    };
    
                    ThicknessAnimation animation = new ThicknessAnimation();
                    animation.EasingFunction = ease;
                    animation.From = new Thickness(0, 0 - _Num * Height, 0, 0);
                    double top1 = MarginTop.Top;
    
                    double d = 0 - value * Height;
                    if (value < _Num)
                    {
                        d = 0 - (value + 10) * Height;
                    }
    
    
                    _Num = value;
                    OnPropertyChanged("Num");
    
    
                    MarginTop = new Thickness(0, d, 0, 0);
                    double top2 = MarginTop.Top;
    
                    animation.To = MarginTop;
    
                    //animation.Duration = TimeSpan.FromMilliseconds((top1 - top2) * 10);
                    if (top1 != top2)
                    {
                        animation.Duration = TimeSpan.FromMilliseconds(1500);
                        this.stackPanel.BeginAnimation(StackPanel.MarginProperty, animation);
                    }
    
                    MarginTop = new Thickness(0, 0 - value * Height, 0, 0);
                }
            }
    
            public RollingNumberItemCtrl()
            {
                InitializeComponent();
                this.DataContext = this;
            }
    
            #region INotifyPropertyChanged接口
            public event PropertyChangedEventHandler PropertyChanged;
    
            protected void OnPropertyChanged(string name)
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(name));
                }
            }
            #endregion
    
        }
    }

RollingNumberCtrl.xaml代码：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

RollingNumberCtrl.xaml.cs代码：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

using System;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using System.ComponentModel;
    using System.Linq;
    using System.Text;
    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.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;
    
    namespace SunCreate.Common.Controls
    {
        /// <summary>
        /// MyTextBlock.xaml 的交互逻辑
        /// </summary>
        public partial class RollingNumberCtrl : INotifyPropertyChanged
        {
            private bool _firstLoaded = true;
    
            public double ItemHeight
            {
                get { return (double)this.GetValue(RollingNumberCtrl.ItemHeightProperty); }
                set
                { this.SetValue(RollingNumberCtrl.ItemHeightProperty, value); }
            }
            private static DependencyProperty ItemHeightProperty = DependencyProperty.Register("ItemHeight", typeof(double), typeof(RollingNumberCtrl));
    
            public string NumStr
            {
                get { return (string)this.GetValue(RollingNumberCtrl.NumStrProperty); }
                set
                { this.SetValue(RollingNumberCtrl.NumStrProperty, value); }
            }
            private static DependencyProperty NumStrProperty = DependencyProperty.Register("NumStr", typeof(string), typeof(RollingNumberCtrl), new PropertyMetadata(null, new PropertyChangedCallback(NumStrChanged)));
    
            private static void NumStrChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
            {
                (sender as RollingNumberCtrl).UpdateNumStr((sender as RollingNumberCtrl).NumStr);
            }
    
            private void UpdateNumStr(string numStr)
            {
                Text = numStr;
            }
    
            private string _Text;
            /// <summary>
            /// 文本
            /// </summary>
            public string Text
            {
                get { return _Text; }
                set
                {
                    _Text = value;
                    OnPropertyChanged("Text");
    
                    if (!_firstLoaded)
                    {
                        RollingNumberItemCtrl[] numArr = new RollingNumberItemCtrl[stackPanel.Children.Count];
                        int index = 1;
                        foreach (RollingNumberItemCtrl num in stackPanel.Children)
                        {
                            numArr[numArr.Length - index++] = num;
                        }
    
                        if (_Text != null)
                        {
                            int i = 0;
                            foreach (char c in _Text.Reverse())
                            {
                                double d = Convert.ToInt32(c - 48); ;
    
                                numArr[i++].Num = d;
                            }
                            for (int k = 0; k < i; k++)
                            {
                                numArr[k].Visibility = Visibility.Visible;
                            }
                            for (int k = i; k < numArr.Length; k++)
                            {
                                numArr[k].Visibility = Visibility.Collapsed;
                            }
                        }
                    }
                }
            }
    
            public RollingNumberCtrl()
            {
                InitializeComponent();
            }
    
            #region INotifyPropertyChanged接口
            public event PropertyChangedEventHandler PropertyChanged;
    
            protected void OnPropertyChanged(string name)
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(name));
                }
            }
            #endregion
    
            private void UserControl_Loaded(object sender, RoutedEventArgs e)
            {
                if (_firstLoaded) _firstLoaded = false;
    
                foreach (RollingNumberItemCtrl num in stackPanel.Children)
                {
                    num.Height = this.ItemHeight;
                    num.Width = this.ItemHeight * 0.6;
                    num.FontWeight = this.FontWeight;
                }
    
                Text = NumStr;
            }
    
        }
    }

如何使用：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<controls:RollingNumberCtrl Margin="0 2 0 0" ItemHeight="20" NumStr="{Binding CarInOut}" Foreground="#fff" FontSize="20" FontWeight="Bold" ></controls:RollingNumberCtrl>

效果图：

![174862-20190402055122936-2088691778.gif][]

转载于:https://www.cnblogs.com/s0611163/p/10640275.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211230/b96db2cad4bc4040a95ce731bbabfea4.png
[174862-20190402055122936-2088691778.gif]: /images/20211230/03c0e22612ca4bd985fc4438c0545e8c.png