Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101617 Viewers
61 Video lessons · 88376 Viewers
71 Video lessons · 72217 Viewers
56 Video lessons · 103966 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.