WPF数字滚动效果

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

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

 

代码:

RollingNumberItemCtrl.xaml代码:

<UserControl x:Class="SunCreate.Common.Controls.RollingNumberItemCtrl"
             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" 
             d:DesignHeight="50" d:DesignWidth="300">
    <Grid>
        <Grid Height="{Binding Height}" Width="{Binding Width}" ClipToBounds="True">
            <StackPanel x:Name="stackPanel" Width="{Binding Width}" HorizontalAlignment="Center" Margin="{Binding MarginTop}" >
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="0" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="1" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="2" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="3" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="4" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="5" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="6" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="7" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="8" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="9" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="0" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="1" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="2" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="3" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="4" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="5" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="6" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="7" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="8" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
                <Border Width="{Binding Width}" Height="{Binding Height}">
                    <TextBlock FontSize="{Binding Height}" Text="9" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
                </Border>
            </StackPanel>
        </Grid>
    </Grid>
</UserControl>
View Code

RollingNumberItemCtrl.xaml.cs代码:

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

    }
}
View Code

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>
View Code

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

    }
}
View Code

如何使用:

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

 

效果图:

 

posted @ 2019-04-02 05:07  0611163  阅读(1575)  评论(5编辑  收藏  举报