"Win 10 App development" Issues to be aware of using Richeditbox controls

The Richeditbox control supports editing of rich text, and a general text input control can use a textbox, but if you want to edit text with more complex formatting, you can use the Richeditbox control.

The text being edited in the Richeditbox control is exposed by the document property, which is an itextdocument interface that has no public implementation type and can only be obtained through the document property of the Richeditbox class, and the Win The API of the app is similar to COM, so some types expose only the interface and do not expose the implementation type.

The selection property of the ITextDocument interface can get to the text area that is selected in the current edit box, and if the text in the edit box is not selected, the property gets the position of the current cursor. The Itextselection interface inherits a number of members from the Itextrange interface, which are more commonly used:

ParagraphFormat Properties--format paragraph.

Characterformat Properties--Formatting a text area, such as bold display.

Copy method, cut method, paste method-can be copied, cut, paste operation.

MoveStart method, MoveEnd method, Move Method-Move the text insertion point.

Insertimage Method-Inserts an image into the document.

The following old weeks use some examples to illustrate how to format the editing document.

First, set the font size:

            // sets the font size            of the selected text EditBox. Document.Selection.CharacterFormat.Size = (float) Val;

Second, set the text color:

            // Set text color            EditBox. Document.Selection.CharacterFormat.ForegroundColor = C;

Iii. inserting an image into a document:

Fileopenpicker Picker =NewFileopenpicker (); Picker. Filetypefilter.add (". jpg"); Picker. Filetypefilter.add (". PNG"); Picker. Filetypefilter.add (". JPEG"); StorageFile file=awaitPicker.            Picksinglefileasync (); //Open File StreamIrandomaccessstream stream =awaitFile?.            OpenReadAsync (); //Insert PictureEditBox. Document.Selection.InsertImage ( -, -,0, Windows.UI.Text.VerticalCharacterAlignment.Baseline,"Image", stream);

Four, the text application bold display:

            // Formateffect.toggle indicates toggle State            EditBox. Document.Selection.CharacterFormat.Bold = Windows.UI.Text.FormatEffect.Toggle;

Set to toggle to indicate the toggle state, which is set to normal if the text is already bold, and bold if the text is not yet bold.

Set the underline for the text:

            Itextcharacterformat format = editbox. Document.Selection.CharacterFormat;             if (format. Underline = = Underlinetype.single            )                {= underlinetype.none            ;            } Else             {                = underlinetype.single;            }

From the above a bunch of examples also found that in fact, Richeditbox is not difficult to use, the right to call the correct members of the line.

However, this richeditbox is a problem control and it has a lot of minor problems. One of the most prominent is that when you set the font color for the selected text in the Richeditbox control, the cursor is repositioned back to the Richeditbox control, and the font is restored to its original color, that is, we have invalid changes to the color of the text. I believe that many people will encounter this problem, and some technical communities abroad have seen similar questions.

The culprit is the visualization state, which declares a visual state named focused in the Richeditbox control template, so that when the control gets focus it activates the state. and sets the foreground color of the control to the default Systemcontrolforegroundchromeblackhighbrush.

This is the source that causes the text color to always be restored after it is set.

Find the cause, you can the right remedy. Use Vs's XAML designer to generate the default control template for Richeditbox, then find the VisualStateGroups group under the root element grid in ControlTemplate, and then find the CommonStates grouping, You'll see a visualization in it.

                                    <VisualStatex:name= "Focused">                                        <Storyboard>                                            <ObjectanimationusingkeyframesStoryboard.TargetProperty= "Foreground"Storyboard.TargetName= "Placeholdertextcontentpresenter">                                                <DiscreteObjectKeyFrameKeyTime= "0"Value="{ThemeResource Systemcontrolpagetextchromeblackmediumlowbrush}"/>                                            </Objectanimationusingkeyframes>                                            <ObjectanimationusingkeyframesStoryboard.TargetProperty= "Background"Storyboard.TargetName= "Backgroundelement">                                                <DiscreteObjectKeyFrameKeyTime= "0"Value="{ThemeResource Systemcontrolbackgroundchromewhitebrush}"/>                                            </Objectanimationusingkeyframes>                                            <ObjectanimationusingkeyframesStoryboard.TargetProperty= "Opacity"Storyboard.TargetName= "Backgroundelement">                                                <DiscreteObjectKeyFrameKeyTime= "0"Value="{ThemeResource textcontrolbackgroundfocusedopacity}"/>                                            </Objectanimationusingkeyframes>                                            <ObjectanimationusingkeyframesStoryboard.TargetProperty= "BorderBrush"Storyboard.TargetName= "Borderelement">                                                <DiscreteObjectKeyFrameKeyTime= "0"Value="{ThemeResource Systemcontrolhighlightaccentbrush}"/>                                            </Objectanimationusingkeyframes>                                            <ObjectanimationusingkeyframesStoryboard.TargetProperty= "Foreground"Storyboard.TargetName= "ContentElement">                                                <DiscreteObjectKeyFrameKeyTime= "0"Value="{ThemeResource Systemcontrolforegroundchromeblackhighbrush}"/>                                            </Objectanimationusingkeyframes>                                            <ObjectanimationusingkeyframesStoryboard.TargetProperty= "Requestedtheme"Storyboard.TargetName= "ContentElement">                                                <DiscreteObjectKeyFrameKeyTime= "0"Value= "Light"/>                                            </Objectanimationusingkeyframes>                                        </Storyboard>                                    </VisualState>

Where there is a timeline object that will draw your attention, is it:

<ObjectanimationusingkeyframesStoryboard.TargetProperty= "Foreground"Storyboard.TargetName= "ContentElement">                                                <DiscreteObjectKeyFrameKeyTime= "0"Value="{ThemeResource Systemcontrolforegroundchromeblackhighbrush}"/>                                            </Objectanimationusingkeyframes>

Because changes to the foreground property of the control affect the text in the edit box, the focused state is activated when the Richeditbox control has the focus, so the foreground property is reverted to the default value, which restores the text color of the currently edited document.

So, as long as the objectanimationusingkeyframes time line to remove the problem can be solved, if you are not at ease, you can first comment out.

In addition, Richeditbox also has a problem, is often can not be set to italic text, or the English letter can be italic, and Chinese characters are not available, or there will be bold and italic mixed with the problem. This problem may be a font problem, the old week has not found a workaround.

Finally, let's look at the performance of the above example.

All right, let's get here today.

Sample source code Download

"Win 10 App development" Issues to be aware of using Richeditbox controls