在我们使用TextBlock进行数据显示时,经常会遇到这样一种情况就是TextBlock的文字内容太多,如果全部显示的话会占据大量的界面,这是我们就会只让其显示一部分,另外的一部分就让其随着时间的推移去滚动进行显示,但是WPF默认提供的TextBlock是不具备这种功能的,那么怎么去实现呢?
其实个人认为思路还是比较清楚的,就是自己定义一个UserControl,然后将WPF简单的元素进行组合,最终实现一个自定义控件,所以我们顺着这个思路就很容易去实现了,我们知道Canvas这个控件可以通过设置Left、Top、Right、Bottom属性去精确控制其子控件的位置,那么很显然我们需要这一控件,另外我们在Canvas容器里面再放置TextBlock控件,并且设置TextWrapping="Wrap"让其全部显示所有的文字,当然这里面既然要让其滚动,那么TextBlock的高度肯定会超过Canvas的高度,这样才有意义,另外一个重要的部分就是设置Canvas的ClipToBounds="True"这个属性,这样超过的部分就不会显示,具体的实现思路参照代码我再一步步去认真分析!
1 新建一个UserControl,命名为RollingTextBlock。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
< UserControl x:Class = "TestRoilingTextBlock.RoilingTextBlock" 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" DataContext = "{Binding RelativeSource={RelativeSource Self}}" mc:Ignorable = "d" d:DesignWidth = "300" Height = "136" Width = "400" > < UserControl.Template > < ControlTemplate TargetType = "UserControl" > < Border BorderBrush = "Gray" BorderThickness = "1" Padding = "2" Background = "Gray" > < Canvas x:Name = "innerCanvas" Width = "Auto" Height = "Auto" Background = "AliceBlue" ClipToBounds = "True" > < TextBlock x:Name = "textBlock" Width = "{Binding ActualWidth,ElementName=innerCanvas}" TextAlignment = "Center" TextWrapping = "Wrap" Height = "Auto" ClipToBounds = "True" Canvas.Left = "{Binding Left,Mode=TwoWay}" Canvas.Top = "{Binding Top,Mode=TwoWay}" FontSize = "{Binding FontSize,Mode=TwoWay}" Text = "{Binding Text,Mode=TwoWay}" Foreground = "{Binding Foreground,Mode=TwoWay}" > </ TextBlock > </ Canvas > </ Border > </ ControlTemplate > </ UserControl.Template > </ UserControl > |
这里分析几个重要的知识点:A:DataContext="{Binding RelativeSource={RelativeSource Self}}" 这个为当前的前台绑定数据源,这个是第一步,同时也是基础。B 为当前的TextBlock绑定Text、Canvas.Left、Canvas.Top以及Width等属性,当然这些属性要结合自己的需要去绑定,并在后台定义相关的依赖项属性。
然后再看看后台的逻辑代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
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 { /// <summary> /// RoilingTextBlock.xaml 的交互逻辑 /// </summary> 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?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
< Window x:Class = "TestRoilingTextBlock.MainWindow" xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local = "clr-namespace:TestRoilingTextBlock" Title = "MainWindow" Height = "550" Width = "525" > < Grid > < local:RoilingTextBlock Foreground = "Teal" Text="汉皇重色思倾国,御宇多年求不得。杨家有女初长成,养在深闺人未识。天生丽质难自弃,一朝选在君王侧。回眸一笑百媚生,六宫粉黛无颜色。春寒赐浴华清池,温泉水滑洗凝脂。 侍儿扶起娇无力,始是新承恩泽时。云鬓花颜金步摇,芙蓉帐暖度春宵。春宵苦短日高起,从此君王不早朝。" FontSize = "22" > </ local:RoilingTextBlock > </ Grid > </ Window > |
3 最后来看看最终的效果,当然数据是处于不断滚动状态,这里仅仅贴出一张图片。
#2a982cb6a0a8f11c7b3d1aa6813522ac#
以上就是c# WPF如何实现滚动显示的TextBlock的详细内容,更多关于WPF实现滚动显示的TextBlock的资料请关注服务器之家其它相关文章!
原文链接:https://www.cnblogs.com/seekdream/p/6293563.html