WPF数字滚动效果

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

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

代码：

RollingNumberItemCtrl.xaml代码：

<UserControl x:Class="SunCreate.Common.Controls.RollingNumberCtrl"
             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" 
             xmlns:local="clr-namespace:SunCreate.Common.Controls"
             d:DesignHeight="30" d:DesignWidth="300" Loaded="UserControl_Loaded">
    <Grid>
        <StackPanel x:Name="stackPanel" Orientation="Horizontal" >
            <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
            <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
            <Border x:Name="separator2" Height="30" Width="18" Visibility="Collapsed">
                <TextBlock FontSize="30" Text="," VerticalAlignment="Bottom" HorizontalAlignment="Center" ></TextBlock>
            </Border>
            <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
            <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
            <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
            <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
            <Border x:Name="separator1" Height="30" Width="18" Visibility="Collapsed">
                <TextBlock FontSize="30" Text="," VerticalAlignment="Bottom" HorizontalAlignment="Center" ></TextBlock>
            </Border>
            <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
            <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
            <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
            <local:RollingNumberItemCtrl Height="30" Width="18" Num="0"></local:RollingNumberItemCtrl>
        </StackPanel>
    </Grid>
</UserControl>

RollingNumberItemCtrl.xaml.cs代码：

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)));

        public bool ShowSeparator
        {
            get { return (bool)this.GetValue(RollingNumberCtrl.ShowSeparatorProperty); }
            set
            { this.SetValue(RollingNumberCtrl.ShowSeparatorProperty, value); }
        }
        private static DependencyProperty ShowSeparatorProperty = DependencyProperty.Register("ShowSeparator", typeof(bool), typeof(RollingNumberCtrl));

        private static void NumStrChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            (sender as RollingNumberCtrl).UpdateNumStr((sender as RollingNumberCtrl).NumStr);
        }

        private void UpdateNumStr(string numStr)
        {
            Text = numStr;
            if (numStr.Length > 4 && ShowSeparator) separator1.Visibility = Visibility.Visible;
            if (numStr.Length > 8 && ShowSeparator) separator2.Visibility = Visibility.Visible;
        }

        private string _Text;
        /// <summary>
        /// 文本
        /// </summary>
        public string Text
        {
            get { return _Text; }
            set
            {
                _Text = value;
                OnPropertyChanged("Text");

                if (!_firstLoaded)
                {
                    List<RollingNumberItemCtrl> numCtrlList = new List<RollingNumberItemCtrl>();
                    foreach (FrameworkElement element in stackPanel.Children)
                    {
                        if (element is RollingNumberItemCtrl)
                        {
                            RollingNumberItemCtrl num = element as RollingNumberItemCtrl;
                            numCtrlList.Add(num);
                        }
                    }

                    RollingNumberItemCtrl[] numArr = new RollingNumberItemCtrl[numCtrlList.Count];
                    int index = 1;
                    foreach (RollingNumberItemCtrl num in numCtrlList)
                    {
                        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 (FrameworkElement element in stackPanel.Children)
            {
                element.Height = this.ItemHeight;
                element.Width = this.ItemHeight * 0.6;

                if (element is RollingNumberItemCtrl)
                {
                    RollingNumberItemCtrl num = element as RollingNumberItemCtrl;
                    num.FontWeight = this.FontWeight;
                }

                if (element is Border)
                {
                    Border border = element as Border;
                    TextBlock txt = border.Child as TextBlock;
                    txt.FontSize = this.ItemHeight;
                    txt.FontWeight = this.FontWeight;
                }
            }

            Text = NumStr;
        }

    }
}

RollingNumberCtrl.xaml代码：

<UserControl x:Class="SunCreate.Common.Controls.RollingNumberCtrl"
             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" 
             xmlns:local="clr-namespace:SunCreate.Common.Controls"
             d:DesignHeight="30" d:DesignWidth="300" Loaded="UserControl_Loaded">
    <Grid>
        <StackPanel x:Name="stackPanel" Orientation="Horizontal" >
            <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
            <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
            <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
            <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
            <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
            <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
            <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
            <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
            <local:RollingNumberItemCtrl Height="30" Width="18" Num="0"></local:RollingNumberItemCtrl>
        </StackPanel>
    </Grid>
</UserControl>

RollingNumberCtrl.xaml.cs代码：

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;
        }

    }
}

如何使用：

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

效果图：