【Win 10應用開發】使用RichEditBox控件應注意的問題

RichEditBox控件支持對多格式文本進行編輯，一般的文本輸入控件可以使用TextBox，不過，如果希望編輯格式較為復雜的文本，就可以考虛使用RichEditBox控件。

 

RichEditBox控件中正在編輯的文本是由Document屬性公開的，它是一個ITextDocument接口，該接口沒有公開實現類型，只能通過RichEditBox類的Document屬性來獲取其實例，Win App的API類似於COM的形式出現，所以某些類型只公開了接口，而沒有公開實現類型。

ITextDocument接口的Selection屬性可以獲取到當前編輯框中被選定的文本區域，如果編輯框中的文本沒有被選定，那么該屬性所獲取的是當前光標所在的位置。ITextSelection接口從ITextRange接口中繼承了許多成員，比較常用的有：

ParagraphFormat屬性——設置段落格式。

CharacterFormat屬性——設置某個文本區域的格式，如加粗顯示等。

Copy方法、Cut方法、Paste方法——可以進行復制、剪切、粘貼操作。

MoveStart方法、MoveEnd方法、Move方法——移動文本插入點。

InsertImage方法——在文檔中插入圖像。

 

下面老周用一些例子來演示一下如何設置編輯文檔的格式。

一、設置字體大小：

            // 設置選定文本的字體大小
            editbox.Document.Selection.CharacterFormat.Size = (float)val;

二、設置文本顏色：

            // 設置文本顏色
            editbox.Document.Selection.CharacterFormat.ForegroundColor = c;

三、在文檔中插入圖像：

            FileOpenPicker picker = new FileOpenPicker();
            picker.FileTypeFilter.Add(".jpg");
            picker.FileTypeFilter.Add(".png");
            picker.FileTypeFilter.Add(".jpeg");

            StorageFile file = await picker.PickSingleFileAsync();
            // 打開文件流
            IRandomAccessStream stream = await file?.OpenReadAsync();
            // 插入圖片
            editbox.Document.Selection.InsertImage(400, 300, 0, Windows.UI.Text.VerticalCharacterAlignment.Baseline, "圖像", stream);

四、對文本應用加粗顯示：

            // FormatEffect.Toggle表示切換狀態
            editbox.Document.Selection.CharacterFormat.Bold = Windows.UI.Text.FormatEffect.Toggle;

設置為Toggle表示切換狀態，即如果文本已處於加粗狀態，就設置為正常字體；如果文本尚未加粗，就進行加粗處理。

五、為文本設置下划線：

            ITextCharacterFormat format = editbox.Document.Selection.CharacterFormat;
            if (format.Underline == UnderlineType.Single )
            {
                format.Underline = UnderlineType.None;
            }
            else
            {
                format.Underline = UnderlineType.Single;
            }

 

從上面一堆例子也發現，其實RichEditBox用起來也不難，對號入座調用正確的成員就行。

但是，這個RichEditBox是一個問題控件，它有不少小問題。其中，比較突出的是：當為RichEditBox控件中選中的文本設置了字體顏色后，此時，把光標重新定位回RichEditBox控件，會發現字體又被恢復到原來的顏色，也就是說，我們對文本的顏色的修改無效。我相信這個問題不少人會遇到，在國外的一些技術社區也看到類似的提問。

造成這一問題的是元凶就是可視化狀態，在RichEditBox的控件模板中聲明了一個名為Focused的可視化狀態，於是當控件獲得焦點后會激活這個狀態，並且把控件的前景色設置為默認的SystemControlForegroundChromeBlackHighBrush。

這是導致文本顏色設置后總是被還原的根源。

找到病因，就可以對症下葯了。利用VS的XAML設計器為RichEditBox生成默認的控件模板，然后找到ControlTemplate里面根元素Grid下的VisualStateGroups組，接着找到CommonStates分組，你會看到里面有這么個可視化狀態。

                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlPageTextChromeBlackMediumLowBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundElement">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundChromeWhiteBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundElement">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundFocusedOpacity}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundChromeBlackHighBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RequestedTheme" Storyboard.TargetName="ContentElement">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Light"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

 

其中，有一個時間線對象會引起你的注意，就是它：

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundChromeBlackHighBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>

 因為控件的Foreground屬性的改變會影響編輯框中的文本，而當RichEditBox控件獲得焦點時會激活Focused狀態，這樣的話，Foreground屬性又被還原為默認值，從而把當前編輯文檔的文本顏色也還原了。

所以，只要把這個ObjectAnimationUsingKeyFrames時間線去掉即可以解決問題，你如果不放心的話，可以先把它注釋掉。

 

另外，RichEditBox還有一個問題，就是經常會發生無法將文本設置為斜體的情況，或者英文字母可以斜體，而中文字符不可用，又或者會出現加粗和斜體混在一起的問題。這個問題可能是字體的問題，老周暫時未找到解決方法。

 

最后，給大伙兒看一下上面例子的執行效果。

 

好，今天就扯到這里吧。

 

示例源代碼下載