How to use RichEditBox to provide formatted text

Question

According to Microsoft's Quickstart: adding text input and editing controls, I should use RichEditBox should I want to provide some kind of formatted text editor. Unfortunately, they have been so thrift in examples. The examples provided only shows how to load RTF files for displaying. It tells nothing of how to allow user manipulate documents. For instance, I want to add typical formatting buttons like B, I to let user change format of the upcoming/selected text. But then what should I do to handle user input from the software keyboard? My imagination is that the keyboard provides "raw" character inputs and I need to detect and apply the styles properly.

Provided I have a way to react on user input, the next problem is to update the underlying document programmatically. Let assume that I want to change user Selection to some new text.

 // Change selected text; let assume I magically get the text whose format I should update and add necessary RTF stuffs; for testing, can use

 String^ newText = "{\\rtf1\\ansi{\\fonttbl\\f0\\fswiss Helvetica;}\\f0\\par\n{\\b bold}\\par}";
 mRichEditBox->Document->Selection->SetText(TextSetOptions::FormatRtf, newText);

 // After the above line, mRichEditBox loses focus & the keyboard is dismissed so I attempt to focus it programmatically & bring back the keyboard.

 Editor->Focus(Windows::UI::Xaml::FocusState::Keyboard);

 // By default, after SetText, the updated text will be selected, this will put the cursor after changed text; so user can continue adding text

 mRichEditBox->Document->Selection->Collapse(false);

Let temporary forgive the annoying UI issue of bringing the keyboard up/down repeatedly: e.g. user press t, I make t bold via the above code, the system dismiss the keyboard automatically, the code brings it back, and put the cursor after t, user can press e, I make e bold via the above code, the system dismiss the keyboard automatically, the code brings it back, and put the cursor after e, etc. Everytime the RichEditBox goes out/in focus, screen flickers due to background color of the RichEditBox changes. You guess the story. But this is possibly because of the fact that I am temporarily using a button to trigger the change.

The more severe problem is focusing issue: sometimes it brings back the keyboard, sometimes it does not. And even if it does bring back the keyboard, the keyboard now become defunct: pressing keys no longer insert texts as if the keyboard lost its target!? Worse than that: my phone restarts after a few times executing those programmatic replacements!

Can anyone confirm this as an existing OS issue or if there is something I can do to fix it?

Answer 1

You don't need to insert your own RTF into the RichEditBox. In general you'll only do that when saving or restoring the REB.

To change the selection's character properties (such as color, bold, italic, etc.) get the selected range and update its CharacterFormat. New text added in that range will inherit its surrounding format, so as the user keeps typing the new text will automatically follow the preceding format. The app shouldn't try to second-guess the InputPane opening and closing.

For more details see Scenario 6 in the Xaml text editing sample on MSDN. Here's a quick preview:

void Scenario6::BoldButtonClick(Object^ sender, RoutedEventArgs^ e) 
{ 
    ITextSelection^ selectedText = editor->Document->Selection; 
    if (selectedText != nullptr) 
    { 
        ITextCharacterFormat^ charFormatting = selectedText->CharacterFormat; 
        charFormatting->Bold = FormatEffect::Toggle; 
        selectedText->CharacterFormat = charFormatting; 
    } 
}