WPF数字滚动效果

程序员文章站 2022-04-08 17:34:34

和WPF数字滚动抽奖有区别，WPF数字滚动抽奖是随机的，而这里是确定的。为了系统演示，这个效果通宵加班写了整整6个小时，中间就上了次厕所。有点小BUG改天再改。代码： RollingNumberItemCtrl.xaml代码：

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

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

有点小bug改天再改。

代码：

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"></local:rollingnumberitemctrl>
            <local:rollingnumberitemctrl height="30" width="18" num="0"></local:rollingnumberitemctrl>
            <local:rollingnumberitemctrl height="30" width="18" num="0"></local:rollingnumberitemctrl>
            <local:rollingnumberitemctrl height="30" width="18" num="0"></local:rollingnumberitemctrl>
            <local:rollingnumberitemctrl height="30" width="18" num="0"></local:rollingnumberitemctrl>
            <local:rollingnumberitemctrl height="30" width="18" num="0"></local:rollingnumberitemctrl>
            <local:rollingnumberitemctrl height="30" width="18" num="0"></local:rollingnumberitemctrl>
            <local:rollingnumberitemctrl height="30" width="18" num="0"></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 = 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

效果图：

WPF数字滚动效果

上一篇： Python编程如何实现二叉树及七种遍历的方法详解

下一篇：百度教你做 SEO 程序篇

WPF数字滚动效果

JS实现的点击按钮图片上下滚动效果示例

AE怎么制作数字一直变化的动画效果?

Android编程实现类似天气预报图文字幕垂直滚动效果的方法

PHP实现简单数字分页效果

jquery单行文字向上滚动效果的实现代码

jQuery实现带滚动线条导航效果的方法教程

javascript实现多张图片左右无缝滚动效果

jQuery向下滚动即时加载内容实现的瀑布流效果

使用jquery animate创建平滑滚动效果（可以是到顶部、到底部或指定地方）

vue实现全屏滚动效果（非fullpage.js）