原文:
背水一战 Windows 10 (29) - 控件（文本类）: RichTextBlock, RichTextBlockOverflow, RichEditBox
背水一战 Windows 10 (29) - 控件（文本类）: RichTextBlock, RichTextBlockOverflow, RichEditBox
作者：webabcd
介绍
背水一战 Windows 10 之 控件（文本类）
- RichTextBlock
- RichTextBlockOverflow
- RichEditBox
示例
1、RichTextBlock 的示例
Controls/TextControl/RichTextBlockDemo.xaml
<Page x:Class="Windows10.Controls.TextControl.RichTextBlockDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.TextControl" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent" > <StackPanel Margin="10 0 10 10"> <!-- RichTextBlock - 用于显示富文本的控件 Blocks - 富文本的内容 Paragraph - 每一个 Paragraph 代表一段内容，其继承自 Block Inlines - 每个 Paragraph 下都有一个内联元素集合，其用法与 TextBlock 的 Inlines 基本相同（可以把 Paragraph 当做 Inlines 来使用） InlineUIContainer - 用于放置任意 UI 元素 TextIndent - 指定此段文本的首行的缩进量 OverflowContentTarget - 当此 RichTextBlock 中的内容溢出时，将溢出文字输出到指定的 RichTextBlockOverflow 中（此知识点的演示参见：RichTextBlockOverflowDemo.xaml） HasOverflowContent - 是否有溢出内容可显示（只读） 注：其他属性、方法和事件与 TextBlock 基本相同，相关演示请参见 TextBlockDemo1.xaml 和 TextBlockDemo2.xaml --> <!--如果需要处理 Tapped, PointerPressed 之类的事件，简单的方式就是把 IsTextSelectionEnabled 设置为 false--> <RichTextBlock Name="richTextBlock" HorizontalAlignment="Left" Margin="5" IsTextSelectionEnabled="False" Tapped="richTextBlock_Tapped"> <RichTextBlock.Blocks> <Paragraph TextIndent="0"> Windows 10 是美国微软公司所研发的新一代跨平台及设备应用的操作系统。 </Paragraph> <Paragraph TextIndent="10"> Windows 10是微软发布的最后一个独立Windows版本，下一代Windows将作为更新形式出现。Windows10共有7个发行版本，分别面向不同用户和设备。 </Paragraph> <Paragraph TextIndent="20"> 在正式版本发布一年内，所有符合条件的Windows7、Windows 8.1的用户都将可以免费升级到Windows 10，Windows Phone 8.1则可以免费升级到Windows 10 Mobile版。所有升级到Windows 10的设备，微软都将在该设备生命周期内提供支持(所有windows设备生命周期被微软单方面设定为2-4年)。 </Paragraph> <Paragraph TextIndent="30"> 2015年7月29日起，微软向所有的Windows 7、Windows 8.1用户通过Windows Update免费推送Windows 10，用户亦可以使用微软提供的系统部署工具进行升级。 </Paragraph> <Paragraph TextIndent="40"> 2015年11月12日，Windows 10的首个重大更新TH2（版本1511，10.0.10586）正式推送，所有Windows10用户均可升级至此版本。 </Paragraph> <Paragraph> <LineBreak /> <Span>可以把 Paragraph 当做 Inlines 来使用</Span> <LineBreak /> <LineBreak /> <InlineUIContainer> <StackPanel HorizontalAlignment="Left"> <TextBlock Text="下面演示如何显示一张图片" /> <Image Source="/Assets/StoreLogo.png" Width="100" Height="100" /> </StackPanel> </InlineUIContainer> </Paragraph> </RichTextBlock.Blocks> </RichTextBlock> <TextBlock Name="textBlock" Margin="5" /> </StackPanel> </Grid> </Page>
Controls/TextControl/RichTextBlockDemo.xaml.cs
/* * RichTextBlock - 富文本显示框（继承自 FrameworkElement, 请参见 /Controls/BaseControl/FrameworkElementDemo.xaml） * TextPointer GetPositionFromPoint(Point point) - 获取指定 Point 位置的 TextPointer 对象（关于 TextPointer 请参见 TextBlockDemo2.xaml.cs） */ using Windows.Foundation; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Documents; using Windows.UI.Xaml.Input; namespace Windows10.Controls.TextControl { public sealed partial class RichTextBlockDemo : Page { public RichTextBlockDemo() { this.InitializeComponent(); } private void richTextBlock_Tapped(object sender, TappedRoutedEventArgs e) { Point position = e.GetPosition(richTextBlock); TextPointer textPointer = richTextBlock.GetPositionFromPoint(position); textBlock.Text = $"TextPointer.Offset: {textPointer.Offset}"; } } }
2、RichTextBlockOverflow 的示例
Controls/TextControl/RichTextBlockOverflowDemo.xaml
<Page x:Class="Windows10.Controls.TextControl.RichTextBlockOverflowDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.TexControlt" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10" Orientation="Horizontal"> <RichTextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" Height="100" OverflowContentTarget="{Binding ElementName=txtOverflow}"> <Paragraph> Hololens引领技术革命浪潮 传统的人机交互，主要是通过键盘和触摸，包括并不能被精确识别的语音等。Hololens的出现，则给新一代体验更好的人机交互指明道路。在《瓦力》这部电影中，城市中每个人的面前都有一个可随时按指令出现的全息屏，可以在上面执行各种任务，不用时马上消失无形。Hololens所指向的未来，正是这部动画片中的场景。在人机交互之外，还有人与人和人与环境的交互。虚拟现实能让远隔万里的人坐在你面前与你促膝长谈，也能让你游览你从未去过也没可能去的地方，如撒哈拉沙漠、马里亚纳海沟、月球、火星。当前的虚拟现实技术能做到这一点，但还是要戴上连着无数电线的重重的头盔，Hololens所做的，是把这些虚拟现实设备小型化和便携化，至少是向前更近了一步。 想象一下，你在旧金山就能与北京总部进行实景会议，你的一举一动，每个表情，都会被数据传输到北京后进行虚拟场景还原，北京那边也一样。你的各种家庭设备坏了，再也不需要去预约修理，会有技师手把手教你怎么做，与真人在你身边无异。大部分需要人与人之间进行实地交流的场景，都可以被Hololens所接管，所有的情感交流、商务会议、客服维修、团队协作、在线教育，顿时变得简单了，低成本化了。 在娱乐上Hololens能发挥的作用不必多说，心有多大，世界就有多大。你甚至能在自己的屋子里近距离观摩火山喷发，去火星上走一圈，没准还能碰到外星人，或者通过对环境的研究发现一些科学家们尚未发现的东西。当然，微软在推广Hololens的策略里，似乎也是从娱乐开始的，他们收购了一款名为Minecraft的游戏，应用到这款机器上。 整个Hololens眼镜相当于一台小电脑，CPU和GPU都有，还有几个摄像头和传感器。Hololens使用的有可能是英特尔尚未发布的Atom芯片，内部代号为Cherry Trail，据说是用14纳米工艺流程制作出来的，体积更小，速度更快，代表了当前半导体工业的最高水准。 从技术趋势上看，人类与计算机之间的交互方式，面临着一场变革。触屏的广泛应用，根本不能算是迭代，更像是一种过渡状态。一方面人们有抛弃键盘的内在需求，另一方面更加方便快捷的交互技术虽然已研发出来但还未得到应用。如果说键盘是1.0，触屏就是1.5，在Hololens所启示的那个场景实现之后，才是人机交互的2.0时代。也许Hololens会失败，但其指出的这条道路是没错的。 Hololens打开的这扇门，绝不仅仅是虚拟现实那么简单，这其中隐藏的人机交互方式革命，是怎么畅想也不过分的。用一个产品带动一个庞大的相关产业和技术创新浪潮，在历史上并不鲜见，而Hololens，则是最有希望带动一波技术创新浪潮的那个产品，引领着人们进入激动人心的未来。 </Paragraph> </RichTextBlock> <!-- RichTextBlock - 富文本显示框 OverflowContentTarget - 当此 RichTextBlock 中的内容溢出时，将溢出文字输出到指定的 RichTextBlockOverflow 中（此知识点的演示参见：RichTextBlockOverflowDemo.xaml） HasOverflowContent - 是否有溢出内容可显示（只读） RichTextBlockOverflow - 用于显示 RichTextBlock 或其他 RichTextBlockOverflow 中的溢出文字 OverflowContentTarget - 当此 RichTextBlockOverflow 中的内容也溢出时，将溢出文字输出到指定的其他 RichTextBlockOverflow 中 HasOverflowContent - 是否有溢出内容可显示（只读） ContentSource - 获取内容源（只读），即对应的 RichTextBlock 对象 --> <RichTextBlockOverflow Name="txtOverflow" HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" Height="100" OverflowContentTarget="{Binding ElementName=txtOverflow2}" Margin="20 0 0 0" /> <RichTextBlockOverflow Name="txtOverflow2" HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" Height="100" OverflowContentTarget="{Binding ElementName=txtOverflow3}" Margin="20 0 0 0" /> <RichTextBlockOverflow Name="txtOverflow3" HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" Height="100" Margin="20 0 0 0" /> </StackPanel> </Grid> </Page>
Controls/TextControl/RichTextBlockOverflowDemo.xaml.cs
/* * RichTextBlockOverflow - 溢出文本显示框，用于显示 RichTextBlock 或其他 RichTextBlockOverflow 中的溢出文字（继承自 FrameworkElement, 请参见 /Controls/BaseControl/FrameworkElementDemo.xaml） */ using Windows.UI.Xaml.Controls; namespace Windows10.Controls.TextControl { public sealed partial class RichTextBlockOverflowDemo : Page { public RichTextBlockOverflowDemo() { this.InitializeComponent(); } } }
3、RichEditBox 的示例
Controls/TextControl/RichEditBoxDemo.xaml
<Page x:Class="Windows10.Controls.TextControl.RichEditBoxDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.TextControl" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10"> <StackPanel Orientation="Horizontal"> <Button Name="btnBold" Margin="5" Content="加粗" Click="btnBold_Click" /> <Button Name="btnItalic" Margin="5" Content="斜体" Click="btnItalic_Click" /> <TextBox Name="txtSearch" Margin="5" Width="200" /> <Button Name="btnSearch" Margin="5" Content="搜索" Click="btnSearch_Click" /> </StackPanel> <!-- RichEditBox - 富文本编辑器控件 --> <RichEditBox x:Name="txtEditor" Width="480" Height="320" HorizontalAlignment="Left" Margin="5" /> </StackPanel> </Grid> </Page>
Controls/TextControl/RichEditBoxDemo.xaml.cs
/* * RichEditBox - 富文本编辑框（继承自 Control, 请参见 /Controls/BaseControl/ControlDemo/） * Document - 文档对象，富文本编辑基本都是通过它实现的，本例中的示例代码简单介绍了如何使用，更详细的说明请参见文档 * 其他属性、方法和事件与 TextBox 基本相同，相关演示请参见 TextBoxDemo1.xaml 和 TextBoxDemo2.xaml * * * 本例通过开发一个简单的文本编辑器演示如何使用 RichEditBox 编辑文本 */ using System.Collections.Generic; using Windows.UI; using Windows.UI.Text; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace Windows10.Controls.TextControl { public sealed partial class RichEditBoxDemo : Page { public RichEditBoxDemo() { this.InitializeComponent(); } // 使选中的文字变为斜体 private void btnItalic_Click(object sender, RoutedEventArgs e) { // 获取选中的文本 ITextSelection selectedText = txtEditor.Document.Selection; if (selectedText != null) { // 实体化一个 ITextCharacterFormat，指定字符格式为斜体 ITextCharacterFormat charFormatting = selectedText.CharacterFormat; charFormatting.Italic = FormatEffect.Toggle; // 设置选中文本的字符格式 selectedText.CharacterFormat = charFormatting; } } // 使选中的文字加粗 private void btnBold_Click(object sender, RoutedEventArgs e) { // 获取选中的文本 ITextSelection selectedText = txtEditor.Document.Selection; if (selectedText != null) { // 实体化一个 ITextCharacterFormat，指定字符格式为加粗 ITextCharacterFormat charFormatting = selectedText.CharacterFormat; charFormatting.Bold = FormatEffect.Toggle; // 设置选中文本的字符格式 selectedText.CharacterFormat = charFormatting; } } // 保存已经被高亮的 ITextRange List<ITextRange> _highlightedWords = new List<ITextRange>(); // 高亮显示用户搜索的字符 private void btnSearch_Click(object sender, RoutedEventArgs e) { // 清除高亮字符的高亮效果 ITextCharacterFormat charFormat; for (int i = 0; i < _highlightedWords.Count; i++) { charFormat = _highlightedWords[i].CharacterFormat; charFormat.BackgroundColor = Colors.Transparent; _highlightedWords[i].CharacterFormat = charFormat; } _highlightedWords.Clear(); // 获取全部文本，并将操作点移动到文本的起点 ITextRange searchRange = txtEditor.Document.GetRange(0, TextConstants.MaxUnitCount); searchRange.Move(0, 0); bool textFound = true; do { // 在全部文本中搜索指定的字符串 if (searchRange.FindText(txtSearch.Text, TextConstants.MaxUnitCount, FindOptions.None) < 1) { textFound = false; } else { _highlightedWords.Add(searchRange.GetClone()); // 实体化一个 ITextCharacterFormat，指定字符背景颜色为黄色 ITextCharacterFormat charFormatting = searchRange.CharacterFormat; charFormatting.BackgroundColor = Colors.Orange; // 设置指定文本的字符格式（高亮效果） searchRange.CharacterFormat = charFormatting; } } while (textFound); } } }
OK
[源码下载]
