控件(文本类): RichTextBlock, RichTextBlockOverflow, RichEditBox
介绍
背水一战 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);
}
}
}
控件(文本类): RichTextBlock, RichTextBlockOverflow, RichEditBox的更多相关文章
- 背水一战 Windows 10 (29) - 控件(文本类): RichTextBlock, RichTextBlockOverflow, RichEditBox
[源码下载] 背水一战 Windows 10 (29) - 控件(文本类): RichTextBlock, RichTextBlockOverflow, RichEditBox 作者:webabcd ...
- Web控件文本框Reset的功能
在前一篇中<怎样实现Web控件文本框Reset的功能>http://www.cnblogs.com/insus/p/4120889.html Insus.NET只实现了文本框的功能.单个或 ...
- IOS 学习笔记(5) 控件 文本视图(UITextView)的使用方法
相对于UILabell所支持的较短文本内容,UITextView对于长文本的支持更好.UITextView能够以滚动的方式全部浏览到长文本,并且就像UILabel那样,从ISO6,他也提供了对NSAt ...
- 背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中的元素
[源码下载] 背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中 ...
- 背水一战 Windows 10 (74) - 控件(控件基类): UIElement - 与 CanDrag 相关的事件, 与 AllowDrop 相关的事件
[源码下载] 背水一战 Windows 10 (74) - 控件(控件基类): UIElement - 与 CanDrag 相关的事件, 与 AllowDrop 相关的事件 作者:webabcd 介绍 ...
- 背水一战 Windows 10 (73) - 控件(控件基类): UIElement - 拖放的基本应用, 手动开启 UIElement 的拖放操作
[源码下载] 背水一战 Windows 10 (73) - 控件(控件基类): UIElement - 拖放的基本应用, 手动开启 UIElement 的拖放操作 作者:webabcd 介绍背水一战 ...
- 背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page
[源码下载] 背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page 作者:webabcd 介绍背水一战 Windows ...
- 背水一战 Windows 10 (75) - 控件(控件基类): FrameworkElement - 基础知识, 相关事件, HorizontalAlignment, VerticalAlignment
[源码下载] 背水一战 Windows 10 (75) - 控件(控件基类): FrameworkElement - 基础知识, 相关事件, HorizontalAlignment, Vertical ...
- 背水一战 Windows 10 (72) - 控件(控件基类): UIElement - UIElement 的位置, UIElement 的布局, UIElement 的其他特性
[源码下载] 背水一战 Windows 10 (72) - 控件(控件基类): UIElement - UIElement 的位置, UIElement 的布局, UIElement 的其他特性 作者 ...
随机推荐
- Json转换类库
20160605 简单的DaTable转Json private string DtConvertJson(DataTable dt , string modelName="") ...
- 关于webpack.optimize.CommonsChunkPlugin的使用二
Note:当有多个入口节点的时候,只有所有入口节点都引入了同一个模块的时候,webpack.optimize.CommonsChunkPlugin才会将那个模块提取出来,如果其中一个入口节点没有引入该 ...
- Entity Framework连接Mysql数据库并生成Model和DAL层
Entity Framework (EF,ADO.NET Entity Framework)是微软官方提供的.NET平台的ORM框架.相比于LINQ TO SQL,EF框架具有很明显的优势: EF框架 ...
- 03Spring_bean的创建和作用域以及生命周期
bean的三种创建方式: 方式一: 使用类构造器实例化对象 <!-- 方式一 使用构造器(无参数)实例化对象 --> <bean id="bean1" cla ...
- 实现路由的RouterMiddleware中间件
实现路由的RouterMiddleware中间件 虽然ASP.NET Core应用的路由是通过RouterMiddleware这个中间件来完成的,但是具体的路由解析功能都落在指定的Router对象上, ...
- 执行sudo时报错:effective uid is not 0
http://jingyan.baidu.com/article/c45ad29cd83d4b051753e232.html 今天将 / 授权给了一个普通用户 导致一些问题. 启事: 操作前一 ...
- TinyFrame升级之十:WCF Rest Service注入IOC的心
由于在实际开发中,Silverlight需要调用WebService完成数据的获取,由于之前我们一直采用古老的ASMX方式,生成的代理类不仅难以维护,而且自身没有提供APM模式的调用方式,导致在Sin ...
- React入门 (1)—使用指南(包括ES5和ES6对比)
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- 我这样理解js里的this
关于this,是很多前端面试必考的题目,有时候在网上看到这些题目,自己试了一下,额,还真的错了!在实际开发中,也会遇到 this 的问题(虽然一些类库会帮我们处理),例如在使用一些框架的时候,例如:k ...
- 【MVVMLight小记】二.开发一个简单图表生成程序附源码
上一篇文章介绍了怎样快速搭建一个基于MVVMLight的程序http://www.cnblogs.com/whosedream/p/mvvmlight1.html算是简单入门了下,今天我们来做一个稍许 ...