zoukankan      html  css  js  c++  java
  • 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 当然,如果有大佬有更好的建议,也可以提出来,如 使用其他的方式实现此类效果等等,不足之处也希望得到各位的指点。

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

  • 相关阅读:
    每日英语:China's Wistful Wen Gets His Wish
    每日英语:Singles Day in China
    每日英语:A Chinese Soccer Club Has Won Something!
    每日英语:Are Smartphones Turning Us Into Bad Samaritans?
    每日英语:The Benefits of a Sleep Buddy
    每日英语:Pediatricians Set Limits on Screen Time
    每日英语:The Risks of Big Data for Companies
    每日英语:Patent Wars Erupt Again in Tech Sector
    每日英语:Got a Case of the Mondays? Blame the Sunday Blues
    从构建分布式秒杀系统聊聊Lock锁使用中的坑
  • 原文地址:https://www.cnblogs.com/HGSJJ/p/14466288.html
Copyright © 2011-2022 走看看