Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Most of the documents people create nowadays are filled with multiple typefaces, varied colors, and rich font formatting. It would be shameful if Silverlight didn't have a way to create rich text documents. The good news is that Silverlight does support rich text. There are three elements to discuss when learning about rich text documents: the rich text box, the rich text block, and the document text elements. A normal text box holds a string of characters. Rich text controls are different. They store their content in a collection of special lightweight text elements.
Here is a diagram that demonstrates the TextElement and its related classes. All of the elements inherit from the TextElement class. On the left side of the diagram are the Block elements. The Block elements are intended to act as containers for other text elements. The Paragraph is used more often than the Section element. The Inline elements are shown on the right side of the diagram. They are nested inside a Block element or other Inline element. There are the formatting elements like Bold, Italic, Underline, and Run.
The Span element is an inline container for other inlines. I suspect you know what the Hyperlink element is used for. Finally, you can embed any valid Silverlight UI element in the document by using the InlineUIContainer. Later in this demo I will show you how to embed an image, but it could just as easily have been a button or a listbox. When I click on this TextElements tab, you can see a live demo of a rich text box. On the left side of this page is the rich text box. As you can see, it contains formatted text, color text, as well as an embedded image.
On the right side of the screen is the same document loaded into a text box.
Since the text box doesn't understand rich text, it shows the tags in the
underlying text document.
Let me scroll down and show you what I'm talking about.
Here is the first sentence, We are
It is rare to handwrite the rich text file. Instead, you'll use a rich text editor and save the elements to a file. You can then load the file at runtime. I have a demo that shows a rudimentary editor. Here I have the same document. I can double-click on a word, and then click the Bold button, and I can take that file and click on the Save button and it says, you cannot save a document with UI elements. That's because of this image control. So I'm going to delete the image control and try saving it again.
I'll click Save. I'm in my Documents library, I'll call this one demo, and then click on the Save button. I'll delete the text and type in something new and then I'll load the document back in. So you see it preserved my bold unique keyword. Let me show you some of this code. I wanted to show you how I embedded that image. Here is my RichTextBox, here is a Paragraph sub-element. Inside this Paragraph is the Bold element wrapped around the passionate word.
There's also a LineBreak here. Here's where I set some of the text to the Orange Foreground color, and then down here is the InlineUIContainer that contains the Grid, which contains the image. It looks a lot like standard Silverlight XAML. Now let's go look at the SaveRichText code. When I clicked on that Bold button, it ran this Button_Click procedure here. I check by calling a function IsFontWeightNormal. If it is normal, then I go into the current selection and I apply a PropertyValue.
This takes two arguments; the name of the property and whether I want it to be Bold or Normal. If the font is not normal, then I set it back to normal. When you click on the Save button, I'm going to create a file stream and save the text to the hard drive. The first thing that my code does is verify whether or not the document contains UIElements. As you saw earlier, I'm not allowed to do that in the file format, so I check for that. If you do have a UIElement, I show this MessageBox. Next, I create SaveFileDialog, I set some properties on the dialog here, and then I show the dialog and wait for the user.
If the user clicks the OK button, it will come back true, and then in that case, I open the file, store it in the FileStream, do some encoding on the text, turn the text into some bytes, and store them in this byte array here. Then I use my file stream and write the information to the hard drive and then close the stream. In the load event, I do some similar actions. I open the OpenFileDialog, set some options, show the dialog and, again, see if the user clicked OK.
If they did, I get the filename here, then I get the attached file, it opens the text content, and I use a reader to read the content and then load that back into the rich text box. Now, my editor is ugly and not very functional. Microsoft has a better one on their MSDN site. For my last demo I'd like to give you a quick tour of their tool. I'm going to go to File>Close Solution and then File>Open>Project/Solution. In the same folder as my WorkingWithRichText, there's also this SilverlightTextEditor_MSDN.
I'll open up this SLN file and then I'll run the application to give you a quick tour. As you can see, it's more full-featured than mine is. I can select some words and change their color. I can select more words and choose a font, and I can even embed an image. I encourage you to check out the sample. It is fairly feature complete and is a great place to learn more about the RichTextBox.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101038 Viewers
61 Video lessons · 87827 Viewers
71 Video lessons · 71703 Viewers
56 Video lessons · 103586 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.