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 当然,如果有大佬有更好的建议,也可以提出来,如 使用其他的方式实现此类效果等等,不足之处也希望得到各位的指点。
=================== 转载请备注出处 =====================