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 >  && ShowSeparator) separator1.Visibility = Visibility.Visible;

            if (numStr.Length >  && 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 = ;

                    foreach (RollingNumberItemCtrl num in numCtrlList)

                    {

                        numArr[numArr.Length - index++] = num;

                    }

                    if (_Text != null)

                    {

                        int i = ;

                        foreach (char c in _Text.Reverse())

                        {

                            double d = Convert.ToInt32(c - ); ;

                            numArr[i++].Num = d;

                        }

                        for (int k = ; 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 = ;

                    foreach (RollingNumberItemCtrl num in stackPanel.Children)

                    {

                        numArr[numArr.Length - index++] = num;

                    }

                    if (_Text != null)

                    {

                        int i = ;

                        foreach (char c in _Text.Reverse())

                        {

                            double d = Convert.ToInt32(c - ); ;

                            numArr[i++].Num = d;

                        }

                        for (int k = ; 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>

效果图：

WPF数字滚动效果的更多相关文章

采用cocos2d－x lua 制作数字滚动效果样例
require "Cocos2d"require "Cocos2dConstants"local testscene = class("testsce ...
Wpf自动滚动效果
一.思路 1.使用ScrollView的Scroll.ScrollToVerticalOffset(offset)方法进行滚动 2.ScrollView中放置2个ListView,第一个滚动出边界后, ...
WPF 文本滚动效果渐变效果
<DockPanel> <StackPanel DockPanel.Dock="Bottom" VerticalAlignment="Bottom&qu ...
用jQuery实现数字滚动效果
html 部分 <div class="js-box box"></div> css 部分 .statistic .box{ display: inline ...
ajax异步请求获取数据，实现滚动数字的效果。
BackgroundPositionAnimate.js下载需要导入的js: <script type="text/javascript" src="js/jqu ...
Vue.js大屏数字滚动翻转效果
================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...
让数字变化炫酷起来，数字滚动Text组件[Unity]
让数字滚动起来上周我的策划又提了样需求,当玩家评分发生变动时,屏幕出现人物评分浮层UI,播放评分数字滚动动画.这类数字滚动需求非常常见,我就按一般思路,将startvalue与endvalue每隔一 ...
jQuery数字滚动（模拟网站人气、访问量递增）原创
插件描述:实现数字上下滚动,模拟网站人气.访问量递增的动画效果,兼容性如下: 使用方法 $(el).runNum(val,params); 参数详解 val:数值型(默认70225800): pa ...
JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果在谈组件之前来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

随机推荐

a.vim 插件
引用自 https://blog.csdn.net/zhangsming/article/details/42652695 vim插件之快速切换头(.h)/源(.c,.cpp,.cc)文件——a.v ...
MQTT协议
MQTT(Message Queue Telemerty Transport)是一种二进制协议,主要用于服务器和那些低功耗的物联网设备(IoT)之间的通信. 它位于 TCP 协议的上层,除了提供发布- ...
Swagger使用
Swagger 1.集成springboot 第一步:pom <dependency> <groupId>io.springfox</groupId> <ar ...
FP数据库配置文件
EnterpriseLibrary
收藏一下: http://www.cnblogs.com/huangcong/archive/2010/06/01/1748672.html
《CSAPP》页表、页命中、缺页
页表虚拟存储器系统需要某种方法来判定一个虚拟页是否在DRAM的某个地方. 这些功能由操作系统.存储器管理单元(MMU)中的地址翻译硬件和一个存放在物理存储器中的页表数据结构联合提供. 功能将虚拟页 ...
python--第十三天总结（html ，css 语法）
概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器 ...
JS实现数组去重方法总结(三种常用方法)
方法一: 双层循环,外层循环元素,内层循环时比较值如果有相同的值则跳过,不相同则push进数组 Array.prototype.distinct = function(){ var arr = th ...
mysql命令行常用指令
一. 启动mysql:service mysql start 停止mysql:service mysql stop 重启mysql:service mysql restart 查看mysql服务状态: ...
Windows下PythonQt3.2使用pandas.pivot_table
本机环境 1.win7 64 旗舰版 2.Qt 5.9.1(MSVC 2015,32 bit) 3.Python 3.7.1 (32-bit),二进制包安装的,即Windows x86 execut ...

WPF数字滚动效果

WPF数字滚动效果的更多相关文章

随机推荐

热门专题