Join Walt Ritscher for an in-depth discussion in this video Displaying text on the screen, part of Silverlight 5 Essential Training.
- View Offline
It's hard to think of a practical user interface that doesn't show text to the user. Even the most intuitive touch-based applications have list of data or show text in hovering tool tips. The TextBlock and the label are elements to show read-only text in Silverlight. Since the label is mostly used in data binding scenarios, that will leave us with the TextBlock as the main subject for this movie. In this movie I decided to use Expression Blend into my files. I have opened a project called DisplayingTextOnScreen. Within this MainPage.xaml file I have a StackPanel which represents our Help system.
It has three TextBlocks in it. The first one is the header TextBlock which has the word help; the second one says we have extensive help system, this is a long string of text; and the third one I'm going to use in a few minutes in part of my Live Demo. The problem with the second block is I cannot see the end of the text. There is a text wrapping property that will solve this problem. So I'll select my second TextBlock, go to my Property pane, type in the Search window, wrap, and then I see this TextWrapping property which looks promising.
And go over here and choose from the drop-down pick Wrap. And as you can see the text now wraps down to the next line. The TextBlock defaults to black text on a clear background. You can change the text color by setting the Foreground property. This is easy to do, just go to your Brush section, choose a Solid color brush and then pick the color that you want. It's not well documented, but you can have multiple colors in a TextBlock. This is accomplished by adding additional tags to your text content.
I need to edit this in my XAML view, in Blend I can edit my XAML directly by going and clicking on this button here. I'm going to press F4, to minimize my toolbars, and then I'm going to scroll down and find my second and third TextBlocks, here they are. I'm going to take this text, we have an extensive help system, and I'm going to copy it and I'll place it between the beginning and ending TextBlock tags. Now that I have it in that location I can add additional tags.
For instance, I can use a line break. I'll come up here, and I'll copy this and paste it in. Now I'll return back to my Visual Designer by clicking on this button and you can see I have two lines separated by a blank line. Next, I'm going to add an element called the Run. That doesn't look exactly right. Now I will take this end Run and move it here after the word Help, extensive help.
You can think of this like a div tag in HTML. Now that I put this Run around this block of text, I can then format it. This is how you do multiple colors and other formatting. And I'll go ahead and I'll say Foreground="Gold" and then over here I'll say TextDecorations="Underline". Return back to my Designer and as you see that that block of text now has an underscore (_) and gold text.
The TextBlock is good for simple formatting. For more complex formatting use the RichTextBox control. In the next movie you'll see the TextBox element.
- Installing the toolkit and setting up the development environment
- Using Expression Blend vs. Visual Studio 2010
- Creating a Silverlight page
- Compiling an application
- Exploring the relationship between XAML and .NET
- Using C#
- Working with XAML
- Digging into the Dependency Property System
- Deploying and debugging code
- Creating sophisticated layouts with panel elements
- Managing Visual State with Visual State Manager
- Transforming the user interface (UI) with templates
- Understanding the event model
- Working with text
- Using business data in a binding
- Creating an out-of-browser (OOB) application
- Exploring trust levels
- Playing audio and video
- Handling errors
- Exploring animations
- Working with application windows
- Integration with XNA