The TextBlock is intended as a read only text display. It inherits from FrameworkElement, instead of control, which helps reduce its memory usage in your WPF application.
- [Narrator] The text block is intended as a read only text display. It inherits from framework element instead of control which helps reduce its memory usage in your .UPF application. You can see that relationship here in this diagram. Here's the framework element and here's the drive type text block. There are a number of font related properties that are part of the text block. That makes sense. You would want to be able to manipulate the font in a text related control, and remember this is not a control. We've seen these properties in the control chapter when I looked at the control base class, but the text block is a framework element.
So that means that Microsoft had to re implement those properties in the text block. But they're over here so I can change the font size or like the font weight. I can apply a foreground brush and a background brush. Here's two interesting properties the content end and content start. That gets us a reference to the beginning and ending of the content that's within the text block. Now in .NET we could use the string class to also find those areas, the beginning and ending, but remember that the text block also supports the idea of in line.
You see there's a property here called in lines. So this is a better way of getting to the content beginning and ending if it supports in lines. The text alignment property is self explanatory. It allows you to change the alignment of the text within the text block to left aligned, right aligned, or centered. And then the rest of this demo we'll look at a few of these other properties like text trimming and text wrapping. We'll go over to the text block page. Remember that the text block is a framework element, and one of the things that that enables is the ability to use styles.
So you'll see on line 12 I'm creating a style targeting all my text blocks, and then I'm setting a standard margin for all my text blocks, and then I'm also setting the text property of the text box to this boiler plate string. You can see in the designer that this text block the text that's inside the text block is too wide to fit within the constraints of the stack panel, so you'll see that it's flowing off the edge of the screen.
I should say it's being trimmed on the right edge of the screen. We can use the text wrapping property to fix this. I'll set this to wrap, and you can see instantly in the Visual Studio Designer that the height of the text box changed. So essentially what you're doing when you say text wrapping equal wrap is you're granting permission to the text block to request a new height during the layout phase. Since all the text can't fit within the constraints of the width of the stack panel, in this case it asks for an additional height.
There's three settings for this. No wrap's the default. We just looked at wrap, and then the third option is wrapped with overflow. Doesn't look any different yet, so I'll need to make another change to the text block. I'll change its width to 45. Now what you see is the text block is too narrow for some of the words to fit like the word professional and watercolorist, they don't fit anymore, and because I've set it to wrap with overflow that means that the word professional can overflow out the right edge of the text block.
If I change this back to wrap you'll see that I'm giving information to wrap the word professional down to the next row. Also the word watercolorist is wrapping. Next I'll look at the is hyphenation enable. I'll set that to true, and you see what happens right here, watch this section of the document. So I'll take this out, and see that watercolorist is too big of a word, so it can't fit there.
So there's this big gap at the end of that line. Put back that property and now it uses the first part of the word water and then puts a hyphen in and then the last part of the word watercolorist goes on the next line. I can also change the line height. This is the space between lines. I'll also make some other changes. I'll change the foreground just to show you that we can change the color of the text, and I'll also change the font size to 14.
Now the next step is to look at a property called text decorations and we'll start by looking at baseline. You see what's happening? It's drawing a line below the characters at the baseline of the characters. If I change this to overline it draws a line above the characters and if I use strike through it draws a line through the mid point of the characters.
Now I'll delete these properties. I'll leave it blue and 14 points, and the final thing I want to talk about is what happens when the text flows off the side of the page. How do you let the user know that there's more text that they can't see? And the property we're looking for is called text trimming. I'll also add the word ellipse. Now you can see what happens is it shows descends all the words 'til it gets to the last word that'll fit and then it does a dot dot dot, the ellipse, to say there's more text here.
I'll now set this to character ellipse. Increase the font size. So you can see the results. So now the word professional no longer fits but because I use character ellipse I'm specifying that it can draw as many characters as will fit on the line, and then start drawing the ellipses. So what we're seeing here is how to change some of the formatting of the text, and how to control what happens when the text overflows outside the boundaries of the text block.
In the next video we'll look at how to work with the in lines so that we can have more control over the formatting of the text within the text block.
- Interactions and controls
- UIElement family
- FrameworkElement family
- Shape family
- Decorator Family
- Control Fundamentals
- Button family
- Text Editor family