背水一戰 Windows 10 (29) - 控制項（文本類）: RichTextBlock, RichTextBlockOverflow, RichEditBox

背水一戰 Windows 10 之控制項（文本類）: 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
[源碼下載]