I made it through the first half of my Silverlight Advent Calendar! You’re currently reading the 12th installment of my article series. In this article, we are looking at the RichTextArea control, which was added to the platform with Silverlight 4.
Up until Silverlight 4, we had no real way to perform rich text editing. Some (open source) implementations have been built of which the best one is in my opinion VectorLight.com’s RichTextBox/RichTextBlock (check it out at www.vectorlight.com, they have quite some nice controls). Silverlight 4 introduces the RichTextArea control. Its name already implies what it is capable of: allowing us to do rich text editing in our Silverlight applications. Things like making text bold, italic or underlined are of course supported by this control. On top of that, more advanced options are available, such as adding hyperlinks in text, adding images and adding XAML content. It can also out-of-the-box work with the clipboard and offers BiDi support. The latter is important for some languages such as Hebrew, since these are right-to-left languages.
Behind the visual of the control, text is being added as XAML, so in fact, the control is rendering the result of that XAML. This XAML is XAML like we know it for displaying rich text using TextBlock controls, containing Paragraphs, Runs and LineBreaks. At the time of writing, there is no real Text property on the control to get the entered text without the markup. To get the contents, we can use the Blocks collection to loop through the content. This is a bit of a setback and I can only hope it will in some way become possible to get the text from the control as well (without the markup).
Using this new control, we can thus perform most of the actions we’ll want to do with text. The control does not have buttons by default, so we need to add them ourselves. Below is an implementation of the control in combination with a ribbon (found in the official Silverlight 4 whitepaper/documentation).
Let’s take a look a simple implementation now. My implementation will make it possible to add text (quite logically), make it bold, underlined or italic. We’ll also add the possibility to change the color of the selected text and print it using the new printing functions in Silverlight 4.
Below is the XAML for the RichTextArea (nothing special as you can see):
<RichTextArea x:Name="MainRichTextArea" Height="300"></RichTextArea>
To implement the different functions, we need to add some code in the event handlers of the button click events. For example, if we want to make the selected text bold, we start by checking if text is selected. If there is, we check if the selected text is already bold or not. We set it to bold if it isn’t and vice-versa of course. The code for this is shown below.
private void BoldButton_Click(object sender, RoutedEventArgs e)
{ if (MainRichTextArea.Selection.Text.Length > 0)
{ if (MainRichTextArea.Selection.GetPropertyValue(Run.FontWeightProperty)
is FontWeight &&
((FontWeight)MainRichTextArea.Selection.GetPropertyValue
(Run.FontWeightProperty)) == FontWeights.Normal)
{ MainRichTextArea.Selection.SetPropertyValue(Run.FontWeightProperty,
FontWeights.Bold);
}
else
MainRichTextArea.Selection.SetPropertyValue(Run.FontWeightProperty,
FontWeights.Normal);
MainRichTextArea.Focus();
}
}
The code is similar for the other actions, it can be found in the sample code download. When we want to print our added text, we have 2 options. The most simple one is pointing the PageVisual to the RichTextArea:
private void PrintButton_Click(object sender, RoutedEventArgs e)
{ PrintDocument printDocument = new PrintDocument();
printDocument.DocumentName = "My rich text";
printDocument.PrintPage += (s, args) =>
{ args.PageVisual = MainRichTextArea;
};
printDocument.Print();
}
The second option exists out of looping through the Blocks collection of the RichTextArea, parsing each of the retrieved items and adding them to the Inlines collection of a TextBlock control.
The sample code can be downloaded here: SLRichTextArea.zip (84.68 KB)