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 即说是杭州人民法院的 ...

随机推荐

获取电脑的 SN 码
wmic bios get serialnumber
spring 大会的启示
1.事件驱动的微服务编程 2.无服务架构的编程模型 3.微服务缓存
Java Bug -- java.util.ConcurrentModificationException
java.util.ConcurrentModificationException at java.util.ArrayList$ArrayListIterator.next(ArrayList.ja ...
HashMap负载因子为什么是0.75
待写 HashMap负载因子为什么是0.75?HashMap有一个初始容量大小,默认是16static final int DEAFULT_INITIAL_CAPACITY = 1 << ...
4、订单详情 /items/order/detail?orderNo=201903251750380001
<template> <div class="write"> <div class="adr"> <div class ...
R语言-散点图进阶
1.分组散点图 ①xyplot()函数 > library(lattice) > xyplot(mpg~disp, #定义Y~X轴 + data=mtcars, + groups=cyl, ...
2、python的变量
1.什么是变量变量>顾名思义变化的量,量是一种表示一种状态的方式,而且可以变 2.为什么要用变量程序的执行是一直处于一种变化状态的,我们可以用变量表示表示程序进行中的状态,并将它记录下来 3 ...
php 获取数组深度的key
1.数组深度遍历 function fun($a,&$b) { foreach ($a as $k=>$val) { if (is_array($val)) { $b[]=$k; fu ...
记一次线上bug排查-quartz线程调度相关
记一次线上bug排查,与各位共同探讨. 概述:使用quartz做的定时任务,正式生产环境有个任务延迟了1小时之久才触发.在这一小时里各种排查找不出问题,直到延迟时间结束了,该任务才珊珊触发.原因主要就 ...
Linux firewalld使用教程+rhce课程实验
--timeout= 设置规则生效300秒调试阶段使用,防止规则设置错误导致无法远程连接实验:在server0机器上部署httpd服务,通过添加富规则,只允许172.25.0.10/32访问,并且 ...

WPF数字滚动效果

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

随机推荐

热门专题