WPF數字滾動效果

来源:https://www.cnblogs.com/s0611163/archive/2019/04/02/10640275.html
-Advertisement-
Play Games

和WPF數字滾動抽獎有區別，WPF數字滾動抽獎是隨機的，而這裡是確定的。 為了系統演示，這個效果通宵加班寫了整整6個小時，中間就上了次廁所。 有點小BUG改天再改。 代碼： RollingNumberItemCtrl.xaml代碼： <UserControl x:Class="SunCreate.C ...


和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

 

效果圖：

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • C++學習（三十七）（C語言部分）之 鏈式棧（推箱子實現）
    用鏈表實現棧一開始在表頭插入，就要一直在表頭插入一開始在表尾插入，就要一直在表頭插尾表頭當棧底 也可以把表尾當棧底 實現的測試代碼筆記如下： 附： 推箱子實現，代碼筆記如下所示： 最後實現效果如下所示; 2019-04-01 21:33:15 ...
  • 使用PHP、MySQL實現修改密碼 + 防止通過url強行進入系統
    ●使用PHP+MySQL實現修改密碼 頁面： index.php 登陸頁面，輸入預設密碼登陸系統 check.php 核查頁面，通過查詢資料庫檢測密碼是否正確 ——> 正確，則進入系統 或 錯誤，提示“密碼錯誤”，返回登錄頁面 system.php 系統頁面，內含“修改密碼”鏈接 change.ph ...
  • Leetcode(2)
    Leetcode(2) 記：這幾天內心十分焦慮，研究生的日子一天天過去，感覺毫無收穫，每天刷個題來壓壓驚. 2.Add Two Number · 錯誤示例 · 思路 寫兩個函數將一個數從List轉化為int, 相加後再從int轉化為List返回. · 偽代碼： 1.構造兩個函數分別代表： 一個數字從 ...
  • ssm客戶管理系統的設計與實現
    ssm客戶管理系統 註意：本文是在我的上一篇文章 https://www.cnblogs.com/peter-hao/p/ssm.html的基礎上開發 1 需求 1.1 添加客戶 客戶填寫信息，提交，將信息保存到資料庫中。 1.2 刪除客戶 在每條查詢出來的客戶信息設置刪除操作，點擊即可刪除。更新數 ...
  • 核心API的使用（給定一個字元串，統計每個字元出現的次數）
    /** * 給定一個字元串，統計每個字元出現的次數。 如：abdaewrwqask435a1aasd */public class ReplaceString { static int length; public static void countString(String s) { while ...
  • 死磕 java集合之ArrayList源碼分析
    見過的最詳細的ArrayList的源碼分析了，分析得很透徹。比如，c.toArray()一定返回Object[]類型嗎？elementData聲明為transient，那它到底是怎麼序列化的呢？遠遠不止這些…… ...
  • spring-cloud-gateway負載普通web項目
    spring cloud gateway負載普通web項目 對於普通的web項目，也是可以通過 進行負載的，只是無法通過服務發現。 背景 不知道各位道友有沒有使用過 "帆軟" ，帆軟是國內一款報表工具，這裡不做過多介紹。 它是通過war包部署到 ，預設是單台服務。如果想做集群，需要配置 ，帆軟會將當 ...
  • 【轉載】 Sqlserver限制最大占用記憶體
    在Sqlserver資料庫管理軟體中，Sqlserver對系統記憶體的管理原則是：按需分配，並且分配完成後為了查詢有更好的性能，並不會立即自動釋放記憶體，數據取出後，還會一直占用著記憶體，所以在Sqlserver服務啟動後，你會發現sqlserver占用的記憶體越來越大，直到稍微小於機器記憶體一定值。其實我們 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類