WPF实现滚动显示的TextBlock-白红宇

原文:

　　在我们使用TextBlock进行数据显示时，经常会遇到这样一种情况就是TextBlock的文字内容太多，如果全部显示的话会占据大量的界面，这是我们就会只让其显示一部分，另外的一部分就让其随着时间的推移去滚动进行显示，但是WPF默认提供的TextBlock是不具备这种功能的，那么怎么去实现呢？

　　其实个人认为思路还是比较清楚的，就是自己定义一个UserControl，然后将WPF简单的元素进行组合，最终实现一个自定义控件，所以我们顺着这个思路就很容易去实现了，我们知道Canvas这个控件可以通过设置Left、Top、Right、Bottom属性去精确控制其子控件的位置，那么很显然我们需要这一控件，另外我们在Canvas容器里面再放置TextBlock控件，并且设置TextWrapping="Wrap"让其全部显示所有的文字，当然这里面既然要让其滚动，那么TextBlock的高度肯定会超过Canvas的高度，这样才有意义，另外一个重要的部分就是设置Canvas的ClipToBounds="True"这个属性，这样超过的部分就不会显示，具体的实现思路参照代码我再一步步去认真分析！

　　1 新建一个UserControl，命名为RollingTextBlock。

　　这里分析几个重要的知识点：A：DataContext="{Binding RelativeSource={RelativeSource Self}}" 这个为当前的前台绑定数据源，这个是第一步，同时也是基础。B 为当前的TextBlock绑定Text、Canvas.Left、Canvas.Top以及Width等属性，当然这些属性要结合自己的需要去绑定，并在后台定义相关的依赖项属性。

然后再看看后台的逻辑代码：

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threading.Tasks;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;using System.Windows.Threading;namespace TestRoilingTextBlock{    ///     /// RoilingTextBlock.xaml 的交互逻辑    /// 
    public partial class RoilingTextBlock : UserControl    {        private bool   canRoll = false;        private double rollingInterval = 16;//每一步的偏移量        private double offset=6;//最大的偏移量        private TextBlock currentTextBlock = null;                private DispatcherTimer currentTimer = null;        public RoilingTextBlock()        {            InitializeComponent();            Loaded += RoilingTextBlock_Loaded;         }        void RoilingTextBlock_Loaded(object sender, RoutedEventArgs e)        {            if (this.currentTextBlock != null)            {                canRoll = this.currentTextBlock.ActualHeight > this.ActualHeight;            }            currentTimer = new System.Windows.Threading.DispatcherTimer();            currentTimer.Interval = new TimeSpan(0, 0, 1);            currentTimer.Tick += new EventHandler(currentTimer_Tick);            currentTimer.Start();        }        public override void OnApplyTemplate()        {            try            {                base.OnApplyTemplate();                currentTextBlock = this.GetTemplateChild("textBlock") as TextBlock;            }            catch (Exception ex)            {                                          }                     }        void currentTimer_Tick(object sender, EventArgs e)        {            if (this.currentTextBlock != null && canRoll)            {                if (Math.Abs(Top) <= this.currentTextBlock.ActualHeight-offset)                {                    Top-=rollingInterval;                }                else                {                    Top = this.ActualHeight;                }            }        }        #region Dependency Properties        public static DependencyProperty TextProperty =           DependencyProperty.Register("Text", typeof(string), typeof(RoilingTextBlock),           new PropertyMetadata(""));        public static DependencyProperty FontSizeProperty =            DependencyProperty.Register("FontSize", typeof(double), typeof(RoilingTextBlock),            new PropertyMetadata(14D));                public static readonly DependencyProperty ForegroundProperty =           DependencyProperty.Register("Foreground", typeof(Brush), typeof(RoilingTextBlock), new FrameworkPropertyMetadata(Brushes.Green));        public static DependencyProperty LeftProperty =           DependencyProperty.Register("Left", typeof(double), typeof(RoilingTextBlock),new PropertyMetadata(0D));        public static DependencyProperty TopProperty =           DependencyProperty.Register("Top", typeof(double), typeof(RoilingTextBlock),new PropertyMetadata(0D));            #endregion        #region Public Variables        public string Text        {            get { return (string)GetValue(TextProperty); }            set { SetValue(TextProperty, value); }        }        public double FontSize        {            get { return (double)GetValue(FontSizeProperty); }            set { SetValue(FontSizeProperty, value); }        }        public Brush Foreground        {            get { return (Brush)GetValue(ForegroundProperty); }            set { SetValue(ForegroundProperty, value); }        }        public double Left        {            get { return (double)GetValue(LeftProperty); }            set { SetValue(LeftProperty, value); }        }        public double Top        {            get { return (double)GetValue(TopProperty); }            set { SetValue(TopProperty, value); }        }        #endregion    }}

　　再看后台的代码，这里我们只是通过一个定时器每隔1秒钟去更新TextBlock在Canvas中的位置，这里面有一个知识点需要注意，如何获取当前TextBlock的ActualHeight，我们可以通过重写基类的OnApplyTemplate这个方法来获取，另外这个方法还是存在前台和后台的耦合，是否可以通过绑定来获取TextBlock的ActualHeight，如果通过绑定应该注意些什么？这其中需要特别注意的是ActualHeight表示的是元素重绘制后的尺寸，并且是只读的，也就是说其始终是真实值，在绑定时是无法为依赖性属性增加Set的，并且在绑定时绑定的模式只能够是Mode=“OneWayToSource”而不是默认的Mode=“TwoWay”。

　　另外在使用定时器时为什么使用System.Windows.Threading.DispatcherTimer而不是System.Timers.Timer?这个需要我们去认真分析原因，只有这样才能真正地去学会WPF。

　　当然本文只是提供一种简单的思路，后面还有很多可以扩展的地方，比如每次移动的距离如何确定，移动的速率是多少？这个如果做丰富，是有很多的内容，这个需要根据具体的项目需要去扩展，这里只是提供最简单的一种方式，仅仅提供一种思路。

　　2 如何引用当前的自定义RollingTextBlock？

　　3 最后来看看最终的效果，当然数据是处于不断滚动状态，这里仅仅贴出一张图片。