The Control class defines a set of font related properties that govern the appearance of control text. This video looks at the FontWeight, FontSize, FontStretch, FontFamily properties. It also shows how to use property inheritance to define font properties on parent elements.
- [Narrator] The control class defines a small set of font related properties that determine how text appears in a control. Here they are. There's one called the fontfamily, which is another way of saying the name of the font. Fontsize, fontstretch, fontstyle, fontweight, and the last one, foreground is for setting the brush that is used to paint the text. Here's the sample I'll work with. All my examples for font's properties is with the button but it also applies to all the other controls. I'll start by setting a simple one to understand, the font size.
I'll choose the second button, example B, and then type in a number here. This is 20 pixels. If you've studied fonts in the other systems you know that fonts are usually measured in points. You can still use points but in WPF it defaults to the size that's used for all the rest of the UI, which is pixels. So I can say px here, I get the same result, or I can type in pt which is where I get the font point sizes. I can also do other suffixes here, like I can do point five in, for inches, or point five cm for centimeters.
If I'd like to set the same font size for all of the buttons on this page, there's a couple approaches I can take. One is to use a style, so I could come up to the page class, create a resources section, create a style in there and use a style setter to set it for all of the buttons. I'd like to show you another feature I haven't talked about in this course yet, which is known is property inheritance. The idea is that when you have a property that's shared across elements, I can define it on a parent element and that value will be inherited by all the child elements.
So the page, class, derives from a base class that's shared by the button, so I can come up here to the page right here and put in font size equal 20, and you see that all of the elements on the page, all the buttons on the page pick up that font size. Now this is nicer than doing styles in some ways, because if I was doing styles and I had a bunch of text boxes and buttons and other elements, I would have to define styles for each of those to set the font to 20, whereas with a property inheritance I can define it once and it'll affect all the font sizes on all the controls on this page.
Let's take it out of here, and let me show another way of doing this. What if I just want to change the font size for the buttons that are inside the second stack panel. I come up here and I paste in that property attribute and I get an error that says that this is not supported. Font size is not found on type stack panel. What I need to do is use what's called an attach property. I'll look for the attach property here, it's called text element, and here's the same values we looked at a minute ago inside the control class.
I can use text element dot font size equal 20, and that's a way of adding the font size property to the stack panel and then the property inheritance takes effect and all the buttons inside there get the same font size. Now that we've got the font size set for all these buttons, let's start changing some of the other properties. We'll look at font weight. This is how you set the heaviness of the text, and you do it with the font weight in numeration here. The most common one you'll choose is bold.
There's also light, which gives you a skinny version of that. There's some other ones. If you want it really dark and thick you can choose something like black. The next button, let's make a little bit more room so you can see everything, we'll look at the font style. This allows me to change the angle of the text, and here's italic. See the italicized version of that text? For this example I'll choose oblique.
Oblique is an artificial way to create italics on a computer that doesn't have the required italic font. If there's not an italic version of the font that I'm currently using, then this will use code to generate the angled text. Typically it doesn't look as good as if there's a font that has an italic style. Now we'll look at stretch, font stretch. I'll choose expanded for this one. This is the amount that the text is stretched or compressed between the letters.
Do you see any difference? I don't, and that's because the default font that this button is using doesn't have an expanded version, so it doesn't artificially expand it. What we need to do is find a font that does have a expanded or compressed version, and to do that we need to talk about font families. Let's go down here and talk about that. Font family is another way of saying the name of the font. You get no intellisense here, there's no autocompletion on this so the best way to find out what fonts you have for this property is to use the property window in Visual Studio.
I'll go to view properties window, select your button, then I'll make this bigger so we can see it. Go to the text area inside the property window. In this dropdown you'll see all of the installed fonts on your computer. I'm using the default for Windows wpf applications was just Segoe UI. You see there's otherwise Segoe UI Black, there's a bunch of other ones. Here's one called Showcart Gothic that's on my machine.
The one I'm looking for is called Rockwell. That's what Rockwell looks like. If you take a look in this dropdown you'll see on my computer I have Rockwell and I have Rockwell Condensed, so I have two versions of this font. If I choose Rockwell here, and then I say font stretch condensed, you see that it's using the condensed version of that. I also could have got this same look by removing this attribute and choosing condensed version.
For the last one let's take a look at what's called font substitution. I'll choose font family and one of the critical things about the font is if you pick a fancy font on your computer and if your user doesn't have that font then it's not going to use that font and it'll fall back to the generic font. What you can do is you can specify alternative fonts. This is just like you see in HTML and CSS. I can do font family and then I could say Segoe UI, which is the one I want, the default.
Try that here, Segoe. Then I can do a comma, and then I can specify the next one that I want, Arial, like that. If it can't find this font then it'll fall back to this secondary choice. There's more options that I talk about but I'm going to hold off on talking about those until I get to the chapter on the text controls.
- Interactions and controls
- UIElement family
- FrameworkElement family
- Shape family
- Decorator Family
- Control Fundamentals
- Button family
- Text Editor family