WPF数字滚动效果

分手后的思念是犯贱 2022-01-05 04:05 418阅读 0赞

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

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

代码：

RollingNumberItemCtrl.xaml代码：

ContractedBlock.gif ExpandedBlockStart.gif

  1. <UserControl x:Class="SunCreate.Common.Controls.RollingNumberItemCtrl"
  2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  5.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  6.              mc:Ignorable="d" 
  7.              d:DesignHeight="50" d:DesignWidth="300">
  8.     <Grid>
  9.         <Grid Height="{Binding Height}" Width="{Binding Width}" ClipToBounds="True">
  10.             <StackPanel x:Name="stackPanel" Width="{Binding Width}" HorizontalAlignment="Center" Margin="{Binding MarginTop}" >
  11.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  12.                     <TextBlock FontSize="{Binding Height}" Text="0" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  13.                 </Border>
  14.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  15.                     <TextBlock FontSize="{Binding Height}" Text="1" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  16.                 </Border>
  17.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  18.                     <TextBlock FontSize="{Binding Height}" Text="2" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  19.                 </Border>
  20.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  21.                     <TextBlock FontSize="{Binding Height}" Text="3" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  22.                 </Border>
  23.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  24.                     <TextBlock FontSize="{Binding Height}" Text="4" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  25.                 </Border>
  26.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  27.                     <TextBlock FontSize="{Binding Height}" Text="5" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  28.                 </Border>
  29.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  30.                     <TextBlock FontSize="{Binding Height}" Text="6" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  31.                 </Border>
  32.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  33.                     <TextBlock FontSize="{Binding Height}" Text="7" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  34.                 </Border>
  35.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  36.                     <TextBlock FontSize="{Binding Height}" Text="8" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  37.                 </Border>
  38.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  39.                     <TextBlock FontSize="{Binding Height}" Text="9" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  40.                 </Border>
  41.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  42.                     <TextBlock FontSize="{Binding Height}" Text="0" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  43.                 </Border>
  44.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  45.                     <TextBlock FontSize="{Binding Height}" Text="1" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  46.                 </Border>
  47.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  48.                     <TextBlock FontSize="{Binding Height}" Text="2" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  49.                 </Border>
  50.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  51.                     <TextBlock FontSize="{Binding Height}" Text="3" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  52.                 </Border>
  53.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  54.                     <TextBlock FontSize="{Binding Height}" Text="4" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  55.                 </Border>
  56.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  57.                     <TextBlock FontSize="{Binding Height}" Text="5" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  58.                 </Border>
  59.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  60.                     <TextBlock FontSize="{Binding Height}" Text="6" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  61.                 </Border>
  62.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  63.                     <TextBlock FontSize="{Binding Height}" Text="7" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  64.                 </Border>
  65.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  66.                     <TextBlock FontSize="{Binding Height}" Text="8" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  67.                 </Border>
  68.                 <Border Width="{Binding Width}" Height="{Binding Height}">
  69.                     <TextBlock FontSize="{Binding Height}" Text="9" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBlock>
  70.                 </Border>
  71.             </StackPanel>
  72.         </Grid>
  73.     </Grid>
  74. </UserControl>

RollingNumberItemCtrl.xaml.cs代码：

ContractedBlock.gif ExpandedBlockStart.gif

  1. using System;
  2. using System.Collections.Generic;
  3. using System.ComponentModel;
  4. using System.Linq;
  5. using System.Text;
  6. using System.Windows;
  7. using System.Windows.Controls;
  8. using System.Windows.Data;
  9. using System.Windows.Documents;
  10. using System.Windows.Input;
  11. using System.Windows.Media;
  12. using System.Windows.Media.Animation;
  13. using System.Windows.Media.Imaging;
  14. using System.Windows.Navigation;
  15. using System.Windows.Shapes;
  17. namespace SunCreate.Common.Controls
  18. {
  19.     /// <summary>
  20.     /// NumCtrl.xaml 的交互逻辑
  21.     /// </summary>
  22.     public partial class RollingNumberItemCtrl : INotifyPropertyChanged
  23.     {
  24.         private Thickness _MarginTop = new Thickness(0, 0, 0, 0);
  25.         /// <summary>
  26.         /// Margin
  27.         /// </summary>
  28.         public Thickness MarginTop
  29.         {
  30.             get { return _MarginTop; }
  31.             set
  32.             {
  33.                 _MarginTop = value;
  34.                 OnPropertyChanged("MarginTop");
  35.             }
  36.         }
  38.         private double _Num;
  39.         /// <summary>
  40.         /// 数字
  41.         /// </summary>
  42.         public double Num
  43.         {
  44.             get { return _Num; }
  45.             set
  46.             {
  47.                 var ease = new ExponentialEase()
  48.                 {
  49.                     EasingMode = EasingMode.EaseOut,
  50.                 };
  52.                 ThicknessAnimation animation = new ThicknessAnimation();
  53.                 animation.EasingFunction = ease;
  54.                 animation.From = new Thickness(0, 0 - _Num * Height, 0, 0);
  55.                 double top1 = MarginTop.Top;
  57.                 double d = 0 - value * Height;
  58.                 if (value < _Num)
  59.                 {
  60.                     d = 0 - (value + 10) * Height;
  61.                 }
  64.                 _Num = value;
  65.                 OnPropertyChanged("Num");
  68.                 MarginTop = new Thickness(0, d, 0, 0);
  69.                 double top2 = MarginTop.Top;
  71.                 animation.To = MarginTop;
  73.                 //animation.Duration = TimeSpan.FromMilliseconds((top1 - top2) * 10);
  74.                 if (top1 != top2)
  75.                 {
  76.                     animation.Duration = TimeSpan.FromMilliseconds(1500);
  77.                     this.stackPanel.BeginAnimation(StackPanel.MarginProperty, animation);
  78.                 }
  80.                 MarginTop = new Thickness(0, 0 - value * Height, 0, 0);
  81.             }
  82.         }
  84.         public RollingNumberItemCtrl()
  85.         {
  86.             InitializeComponent();
  87.             this.DataContext = this;
  88.         }
  90.         #region INotifyPropertyChanged接口
  91.         public event PropertyChangedEventHandler PropertyChanged;
  93.         protected void OnPropertyChanged(string name)
  94.         {
  95.             if (PropertyChanged != null)
  96.             {
  97.                 PropertyChanged(this, new PropertyChangedEventArgs(name));
  98.             }
  99.         }
  100.         #endregion
  102.     }
  103. }

RollingNumberCtrl.xaml代码：

ContractedBlock.gif ExpandedBlockStart.gif

  1. <UserControl x:Class="SunCreate.Common.Controls.RollingNumberCtrl"
  2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  5.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  6.              mc:Ignorable="d" 
  7.              xmlns:local="clr-namespace:SunCreate.Common.Controls"
  8.              d:DesignHeight="30" d:DesignWidth="300" Loaded="UserControl_Loaded">
  9.     <Grid>
  10.         <StackPanel x:Name="stackPanel" Orientation="Horizontal" >
  11.             <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
  12.             <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
  13.             <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
  14.             <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
  15.             <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
  16.             <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
  17.             <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
  18.             <local:RollingNumberItemCtrl Height="30" Width="18" Num="0" Visibility="Collapsed"></local:RollingNumberItemCtrl>
  19.             <local:RollingNumberItemCtrl Height="30" Width="18" Num="0"></local:RollingNumberItemCtrl>
  20.         </StackPanel>
  21.     </Grid>
  22. </UserControl>

RollingNumberCtrl.xaml.cs代码：

ContractedBlock.gif ExpandedBlockStart.gif

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Collections.ObjectModel;
  4. using System.ComponentModel;
  5. using System.Linq;
  6. using System.Text;
  7. using System.Windows;
  8. using System.Windows.Controls;
  9. using System.Windows.Data;
  10. using System.Windows.Documents;
  11. using System.Windows.Input;
  12. using System.Windows.Media;
  13. using System.Windows.Media.Imaging;
  14. using System.Windows.Navigation;
  15. using System.Windows.Shapes;
  17. namespace SunCreate.Common.Controls
  18. {
  19.     /// <summary>
  20.     /// MyTextBlock.xaml 的交互逻辑
  21.     /// </summary>
  22.     public partial class RollingNumberCtrl : INotifyPropertyChanged
  23.     {
  24.         private bool _firstLoaded = true;
  26.         public double ItemHeight
  27.         {
  28.             get { return (double)this.GetValue(RollingNumberCtrl.ItemHeightProperty); }
  29.             set
  30.             { this.SetValue(RollingNumberCtrl.ItemHeightProperty, value); }
  31.         }
  32.         private static DependencyProperty ItemHeightProperty = DependencyProperty.Register("ItemHeight", typeof(double), typeof(RollingNumberCtrl));
  34.         public string NumStr
  35.         {
  36.             get { return (string)this.GetValue(RollingNumberCtrl.NumStrProperty); }
  37.             set
  38.             { this.SetValue(RollingNumberCtrl.NumStrProperty, value); }
  39.         }
  40.         private static DependencyProperty NumStrProperty = DependencyProperty.Register("NumStr", typeof(string), typeof(RollingNumberCtrl), new PropertyMetadata(null, new PropertyChangedCallback(NumStrChanged)));
  42.         private static void NumStrChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
  43.         {
  44.             (sender as RollingNumberCtrl).UpdateNumStr((sender as RollingNumberCtrl).NumStr);
  45.         }
  47.         private void UpdateNumStr(string numStr)
  48.         {
  49.             Text = numStr;
  50.         }
  52.         private string _Text;
  53.         /// <summary>
  54.         /// 文本
  55.         /// </summary>
  56.         public string Text
  57.         {
  58.             get { return _Text; }
  59.             set
  60.             {
  61.                 _Text = value;
  62.                 OnPropertyChanged("Text");
  64.                 if (!_firstLoaded)
  65.                 {
  66.                     RollingNumberItemCtrl[] numArr = new RollingNumberItemCtrl[stackPanel.Children.Count];
  67.                     int index = 1;
  68.                     foreach (RollingNumberItemCtrl num in stackPanel.Children)
  69.                     {
  70.                         numArr[numArr.Length - index++] = num;
  71.                     }
  73.                     if (_Text != null)
  74.                     {
  75.                         int i = 0;
  76.                         foreach (char c in _Text.Reverse())
  77.                         {
  78.                             double d = Convert.ToInt32(c - 48); ;
  80.                             numArr[i++].Num = d;
  81.                         }
  82.                         for (int k = 0; k < i; k++)
  83.                         {
  84.                             numArr[k].Visibility = Visibility.Visible;
  85.                         }
  86.                         for (int k = i; k < numArr.Length; k++)
  87.                         {
  88.                             numArr[k].Visibility = Visibility.Collapsed;
  89.                         }
  90.                     }
  91.                 }
  92.             }
  93.         }
  95.         public RollingNumberCtrl()
  96.         {
  97.             InitializeComponent();
  98.         }
  100.         #region INotifyPropertyChanged接口
  101.         public event PropertyChangedEventHandler PropertyChanged;
  103.         protected void OnPropertyChanged(string name)
  104.         {
  105.             if (PropertyChanged != null)
  106.             {
  107.                 PropertyChanged(this, new PropertyChangedEventArgs(name));
  108.             }
  109.         }
  110.         #endregion
  112.         private void UserControl_Loaded(object sender, RoutedEventArgs e)
  113.         {
  114.             if (_firstLoaded) _firstLoaded = false;
  116.             foreach (RollingNumberItemCtrl num in stackPanel.Children)
  117.             {
  118.                 num.Height = this.ItemHeight;
  119.                 num.Width = this.ItemHeight * 0.6;
  120.                 num.FontWeight = this.FontWeight;
  121.             }
  123.             Text = NumStr;
  124.         }
  126.     }
  127. }

如何使用：

ContractedBlock.gif ExpandedBlockStart.gif

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

效果图：

174862-20190402055122936-2088691778.gif

转载于:https://www.cnblogs.com/s0611163/p/10640275.html

发表评论

表情：
评论列表 （有 0 条评论，418人围观）

还没有评论，来说两句吧...

相关阅读