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。

<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等属性,当然这些属性要结合自己的需要去绑定,并在后台定义相关的依赖项属性。

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

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?

<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 最后来看看最终的效果,当然数据是处于不断滚动状态,这里仅仅贴出一张图片。

时间: 2024-10-11 00:26:46

WPF实现滚动显示的TextBlock的相关文章

WPF上下滚动字幕

原文:WPF上下滚动字幕 XAML代码: <local:WorkSpaceContent x:Class="SunCreate.CombatPlatform.Client.NoticeMarquee" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

wpf 窗体中显示当前系统时间

先看一下效果: 这其实是我放置了两个TextBlock,上面显示当前的日期,下面显示时间. 接下来展示一下代码: 在XAML中: <StackPanel Width="205"                    Margin="0,0,57,0"                    HorizontalAlignment="Right">            <TextBlock Height="Auto&qu

WPF 文字换行TextWrapping 显示不全用省略号TextTrimming 显示不全弹提示内容ToolTip

原文:WPF 文字换行TextWrapping 显示不全用省略号TextTrimming 显示不全弹提示内容ToolTip [TextBlock] 换行? ? TextWrapping="Wrap" 内容显示不全时显示省略号,如 "AAA..."? ??TextTrimming="CharacterEllipsis" //以单词边界做截断 鼠标提示? ?<ToolTip> ? 例:?? TextBlock不允许换行,超出后显示省略号截

树莓派滚动显示

使用实验板实现lcd(或者七段数码管)的滚动显示,基本要求:编程控制Lcd(或者七段数码管)能滚动显示程序 中自定义的字符串,并且能够用按钮停止/开始滚动 设计电路: 实物连接: 代码: #include <wiringPi.h> #include <stdio.h> #include <stdlib.h> #define DIGIT1 9 #define DIGIT2 13 #define DIGIT3 12 #define DIGIT4 8 #define BTN0

利用定时器延时输出和滚动显示

在刚到公司让用Java做一个抽奖系统.要用到滚动显示参与的人员名单,和延时输出的效果.没有接触过,经摸索还是做出来了但是前台的页面布局不好显示效果还是不怎么好的.下面来说明一下我们遇到的题和解决办法. 1.滚动显示: 2.延时输出: 3.js获取回台的list数据: 1.滚动显示 <marquee  behavior="scroll" direction="up" width="310px" height="180px"

页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果

Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航条消失,当页面向上滚动时,导航条就出现了. Headroom.js 有什么用? 固定页头(导航条)可以方便用户在各个页面之间切换.但是这也会带来些问题…本文原创博客地址:http://www.cnblogs.com/unofficial官网地址:www.pushself.com) 大屏幕一般都是宽度

【转】重写ScrollView实现两个ScrollView的同步滚动显示

我们首先想到使用ScrollView的类似与setOnScrollChangedListener的方法来实现,当一个ScrollView滚动时,触发该方法进而使另外一个ScrollView滚动.不过很遗憾,谷歌没有提供该方法.通过查询相应的源代码,我们发现该方法的原型 protected void onScrollChanged(int x, int y, int oldx, int oldy) 该方法是protected类型,不能直接调用,于是需要重新实现ScrollView 首先,定一个一个

jquery 页眉单行信息滚动显示

JSP: 以下是控制滚动的样式,将滚动的内容查询出来,放在一个div 或者别的容器里面,我这里使用的是<dt> <style> #newCglist{width:300px;height:14px;line-height:14px;overflow:hidden} #newCglist li{height:14px;padding-left:10px;} </style> 以下是滚动内容展示的容器 <dt class="positionrel"

vc 在edit控件中动态插入数据滚动显示

内存从网上论坛摘抄整理 思路:给控件设置多行属性,设置垂直滚动条,Auto Vscroll设置为true,放入文本后把插入点设置到末尾 pEdit->LineScroll(pEdit->GetLineCount()); 滚动条滚动到最下端 int len  = pEdit->GetWindowTextLength(); pEdit->SetSel(len,-1,true); //定位光标到内容末尾pEdit->ReplaceSel("12121212");