Building a simple text editor…

Posted on: September 4, 2007

I just wanted to point out for those of you who are interested in working with editable FlowDocuments in the Windows Presentation Foundation (WPF) that most standard editing commands such as adjusting alignment, setting various font variations such as underline, italics or bold and also building bulleted lists and other nice (albeit simple) layout tricks, are all available out of the box in WPF.

Say you have a RichTextBox and you want the user to be able to add some text, edit the “style”of this text and also set various style-properties that should be applied to all new text entered into the RTB.

The simplest way to do this is to simply slap a RichTextBox into a grid of a new Window, like so:

<Window x:Class=”EditableRTB.Window1″
Title=”Window1″ Height=”300″ Width=”300″>
<RichTextBox />

(Remember that the contents of a RichTextBox is actually a FlowDocument…)

Now compile and run this, add some text into the box, select it and then press the keyboard shortcut Ctrl+U. You will noticed that the selected text gets underlined. You can try the same for other standard shortcuts available in for example Word Pad, and voila! ;) most of them work right out of the box.

While this is nice it might also be helpful for some users to have buttons to press that invoke the same commands. Sometimes referred to as Usability. The nice thing about implementing such functionality is that it can all be done in XAML. Below is a sample button that invokes the EditingCommands.ToggleUnderline command.

<Button Content=”Un” Command=”EditingCommands.ToggleUnderline”
CommandTarget=”{Binding ElementName=_textArea}”

If we break this down into its interesting parts you will first notice the Command attribute. This attribute takes any RoutedCommand with an associated CommandBinding. In this case we are using a Command that is available by default in WPF. There are many others associated with other types of controls and scenarios such as MediaCommands and ComponentCommands.

The next attribute is called CommandTarget. This is the control on which the Command should be executed. In this sample XAML the CommandTarget is a RichTextBox called “_textArea”.

The last attribute is called CommandParameter. While some default Commands do take parameters, most do not. Thus in most cases you can safely pass a Null value for this parameter.

That’s about it. Granted, the above is slightly simplified, but if you experiment with it for a while you will find how easy it is to manipulate the contents of a FlowDocument in a RichTextBox.

You can easily check the generated XAML of the FlowDocument being generated in the RTB by simply adding another TextBox somewhere in your window, hook up the TextChanged event from the RTB to an eventhandler and have this eventhandler do something like the following:

private void _textArea_TextChanged(object sender, TextChangedEventArgs e)
this.myTextBox.Text = XamlWriter.Save(this._textArea.Document);

This will allow you to see what the different EditingCommands actually do to your FlowDocument in real time :) Be warned though that this is not a very nice solution but only a quick hack :)

Read more about the Editing Commands over at MSDN at this link:



2 Responses to "Building a simple text editor…"


det var väldigt länge sedan sist. hoppas allt är bra med er!!!



Hej hej!!
Joda allt ar mycket mycket bra!! Jag pratade med jolten igar och jag tankte jag skulle ringa till dig me, men sa insag jag att jag har ingen aning vad du har for telenummer nu for tiden ;) kan du inte slanga over ett mail med ditt mobil-nummer? :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


This blog has no clear focus. It has a focus though, it's just not very clear at the moment...

Dev Env.

Visual Studio 2008 Prof / NUnit / Gallio / csUnit / STools (ExactMagic) / doxygen / dxCore / TypeMock / TestDriven.net / SequenceViz / CLRProfiler / Snoop / Reflector / Mole / FxCop / Subversion / TortoiseSVN / SlikSVN / CruiseControl.net / msbuild / nant

Blog Stats

  • 81,593 hits