#539 – Adding Text-Based Elements in Blend

You can add text-based controls to your user interface by clicking on one of the related icons on the tools panel in Blend.

If you left-click and hold on the TextBlock icon on the tools panel, or right-click, you’ll see a series of controls that you can insert by clicking on the icon at this location in the tools panel.

  • TextBlock – Displays a small amount of text.  Similar to Label, but more lightweight (e.g. can’t customize with templates)
  • TextBox – Displays some user-editable text
  • RichTextBox – Displays user-editable text and allows for more rich formatting
  • PasswordBox – Allows user to enter a password, hiding the characters entered
  • Label – Displays a small amount of text
  • FlowDocumentScrollViewer – Host a FlowDocument to display an entire document, with support for scrolling

Select the control from this list that you want and then double-click the icon on the tools panel to insert an instance into your user interface.

Advertisement

#382 – Persisting RichTextBox Contents as XAML

You can use the Save method of a TextRange object to save the contents of a RichTextBox control.

In the example below, I enter some formatted text into a RichTextBox and then click the Save button.

Here’s the code that does the save behavior.

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            TextRange allText = new TextRange(rtfMain.Document.ContentStart, rtfMain.Document.ContentEnd);

            FileStream stream = new FileStream(@"D:\AboutMyDog.xaml", FileMode.Create);

            allText.Save(stream, DataFormats.Xaml);

            if (stream != null)
                stream.Close();
        }

The resulting XAML file consists of an outer Section element that in turn contains multiple Paragraph elements.

    <Paragraph>
        <Run FontStyle="Italic">Kirby</Run>
        <Run> is a </Run>
        <Run FontWeight="Bold">Border Collie</Run>
        <Run>.</Run>
    </Paragraph>
    <Paragraph>
        <Run FontStyle="Italic">Jack</Run>
        <Run> is a </Run>
        <Run FontWeight="Bold">Jack Russell Terrier</Run>
        <Run>.</Run>
    </Paragraph>

#381 – Loading .rtf Files Into a RichTextBox

The RichTextBox control supports loading not only Text (.txt) files, but also Rich text (.rtf)  files.

You can load a file using the Load method of the RichTextBox’s Selection property.

        <RichTextBox x:Name="rtfMain" />
            rtfMain.Selection.Load(new FileStream(@"D:\Spade.rtf", FileMode.Open), DataFormats.Rtf);

#258 – RichTextBox Allows Richer Formatting than TextBox

The TextBox control allows you to set various properties to change the font used to display its text.  If you want to format only a subset of the text, or format text items separately, you need to use the RichTextBox control.

The RichTextBox control can only have one child element, which must be a FlowDocument.  The contained document is referenced by the Document property, which is the RichTextBox’s content property.

Here’s a simple example that compares a TextBox to a RichTextBox.

		<TextBox Text="This is a text box.." FontStyle="Italic" FontFamily="Cambria" FontSize="16"
			     Width="150" Height="50" Margin="10"/>

		<RichTextBox  Width="150" Height="75" Margin="10">
			<FlowDocument>
				<Paragraph>
					This is a <Bold>RichTextBox</Bold>, which allows formatting
					individual bits of text <Italic>separately</Italic>.
				</Paragraph>
			</FlowDocument>
		</RichTextBox>

#254 – Types of Containers for Hosting a FlowDocument

There are four different controls that you can use to host a FlowDocument:

  • FlowDocumentReader – Reader with support for multiple columns, paging, find and zooming
  • FlowDocumentPageViewer – Reader with support for multiple columns, paging and zooming
  • RichTextBox – Content displayed in an editable format
  • FlowDocumentScrollViewer – Content displayed  with a vertical scrollbar

Here are screenshots of each of the containers: