WPF 左右滚动文字示例

1.实现思路:

  1.1 实现文字滚动的方式有很多种,当前例子通过 更改文字坐标的方式,最终实现文字滚动的效果。当前例子实现的是 文字从右往左 滚动

  1.2 主要应用的元素有:TextBlock文本块,Canvas面板

        关键知识点:WPF绑定 Binding 命令的应用,定时器 Timer 的应用,依赖属性的应用

  1.3 实现步骤:

    1.3.1  可以将 滚动文字 部分 封装成一个用户控件 UserContrl,可以提供在多个地方的调用。在新建用户控件RunningBlock中:添加Canvas面板,添加一个子控件 TextBlock,贴上 Xaml 代码:

      <Canvas Name="cv" Width="{Binding Width,ElementName=ucRoot}" Height="{Binding ActualHeight, ElementName=tb}" Background="#00BFFF" VerticalAlignment="Center">
        <TextBlock Name="tb" Text="{Binding Text}"

             Canvas.Left="{Binding canvasLeft,Mode=TwoWay}"
             Foreground="White" FontSize="15"></TextBlock>
      </Canvas>

           几点说明:TextBlock中Text属性绑定的Text,为依赖属性注册的 Text属性,Canvas.Left之所以通过绑定,是为了方便在后台代码中调用更改 TextBlock 位于 Canvas 面板的坐标。

    1.3.2  接下来是 RunningBlock 关键代码实现,先注册相应的 属性,

        public string Text
        {
          get => (string)GetValue(TextProperty);
          set
          {
            SetValue(TextProperty, value);
          }
        }

        public static readonly DependencyProperty TextProperty = DependencyProperty.Register(nameof(Text), typeof(string), typeof(RunningBlock));

        private double _canvasLeft;
        public double canvasLeft
        {
          get { return _canvasLeft; }
          set
          {
            _canvasLeft = value;
            Common.AnyHelper.NotifyPropertyChanged<RunningBlock>("canvasLeft", this, PropertyChanged);

          }
        }

        private System.Timers.Timer RunningTimer = null;

    1.3.3  然后是在界面初始化事件 UserControl_Loaded 中定义一个定时器,通过定时器,在指定间隔时间内更改 TextBlock 位于 Canvas 面板的坐标,实现在界面上呈现滚动的效果:  

        private void UserControl_Loaded(object sender, RoutedEventArgs e)

        {

          this.DataContext = this;

          canvasLeft = ucRoot.ActualWidth;
          RunningTimer = new System.Timers.Timer();
          RunningTimer.Interval = 15;
          RunningTimer.Elapsed += RunningTimer_Elapsed;
          RunningTimer.Start();

        }

        下面是定时器事件的实现:

        private void RunningTimer_Elapsed(object sender, System.Timers.ElapsedEventArgs e)
        {
          try
          {
            RunningTimer?.Stop();
            textblockWidth = tb.ActualWidth;
            if (canvasLeft > -textblockWidth)
            {
              canvasLeft -= 2;
            }
            else
            {
              canvasLeft = ucRoot.ActualWidth;
            }

          }
          catch(Exception ex)
          {

          }
          finally
          {
            RunningTimer?.Start();
          }
        }

        到这里,滚动文本块 用户控件的定义已经完成,接下来就是在 测试的程序中看实现效果,贴上测试时候的代码:

        <testControls:RunningBlock Text="提供滚动的文字例子。。。。。。。。。。。" 
            Foreground="Black" Background="#E1FFFF" FontSize="15" Margin="0,0,0,0" Height="30"
            FontWeight="Bold" 
            Width="{Binding Path=Width,RelativeSource={ RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}, AncestorLevel=1 }}" />

        说明:上面的 baseControls 是窗体定义的一个别名,这个用法也很简单,不懂的小伙伴可以自行查阅相关使用的方法:

           xmlns:testControls="clr-namespace:Test.TestControl" 

           Test是项目的名称,TestControl 是放置 用户控件 RunningBlock 的一个文件夹的名称。

2.运行示例:

        

          

         

       这里的滚动动态图就暂时提供截图展示了,有点尴尬。。。。。

      程序到这里,我们的滚动文本块也就完成了。

3.话题延伸:

      实现 文字滚动的 方式也很简单,有兴趣的也可以再对当前内容进行优化,比如有以下问题可以延伸:

      3.1 文字从左到右 滚动 以及 文字上下滚动,可以如何实现?

      3.2 当有一半的文字滚动到 面板之外的时候,我们主观看到的是只能在界面上看到的一半文字,可以如何实现,当文字滚动到最左边并且有一些文字看不到的时候,如何实现看不到的文字在 面板的另一端展示出来?

      3.3 当然,如果有大佬有更好的建议,也可以提出来,如 使用其他的方式实现此类效果等等,不足之处也希望得到各位的指点。

=================== 转载请备注出处 =====================

原文地址:https://www.cnblogs.com/HGSJJ/p/14466288.html