Setting an element's size appears to be a simple task in WPF development. After all, every UI element has a Width and Height property. Modern apps need to be flexible and adjust to changing screen sizes and other factors. See how using autosize is a better option.
- [Narrator] Each control sets its desired size during the two-phase layout. You can affect the desired size with setting a number of properties. The most obvious properties to set are the width and height properties. Let's take a look where you find those. In WPF, there's a class called FrameworkElement that's a base class for a lot of the UI elements that you work with. And if you look at its properties, you'll see that it has a height and has a width property. That means that a lot of the elements that you work with will have those properties.
For example, the TextBlock derives from FrameworkElement. So does the Ellipse class, and so does the Button class. Let's see how you would set those. Go to MainWindow.xaml. And here's an example. I've got a canvas that contains an ellipse. And I've specified a width and a height property here, 40 pixels and 60 pixels. That's the desired size when it goes to the layout phase. In this case, the canvas leaves the desired size alone and the ellipses are drawn at the desired size.
Here's an alternate syntax, width='40px'. By using the suffix, you can hardcode the value of pixels. So this line of xaml and this line of xaml are equivalent. There are a couple of other suffixes you can use. You can use in for inch. In this case it's half an inch and three-quarters of an inch. And then you can also use cm for centimeter. While you can hardcode the sizes like this width and height and that makes sense for things like this ellipse, maybe, it doesn't always make sense for some of the other UI elements.
For example, when you have text on the screen and you go to localize your strings and you have longer or shorter text based on which language the user's working with, you, if you hardcode the width of the textblock, you may not be able to see all of the next text. Same thing if you have a flexible layout. When the user resizes the window and you're changing the size of the elements, if you hardcode the width, you may affect the UI in a way you didn't intend. Let me show you what I mean. Go over here to AutoSize.
In this example, I have a textblock with a short sentence in it, and I've hardcoded the width to 120 pixels. And that's not a problem for this textblock because it happens to be wide enough that you can see the entire sentence. On this second textblock however, I hardcoded it to 120 pixels in width but you can't see all the text because it's too long to fit. Here's another problem. Look at this button. I've hardcoded the width and height to this. Now, so far it works okay, but as I said, if I localize this to another language, this phrase, "A short action," may be longer and it wouldn't fit.
Or here's another example where things can go wrong. What if I need to change the font size? Now that I've changed the font size, you can see it doesn't fit. Because the font is larger, it's too tall. The text is too tall to fit inside the confines of the button. And also because I made the font larger, the text also got wider. And now it doesn't fit in the button either. We also have the same problem down here in this button. This button is using a sophisticated content. This button has a StackPanel and the StackPanel has an image and then a textblock.
And the image is too tall to fit in the button, and this text that's next to it is too wide to fit in the button. So the solution for this is to remove the hardcoded values and instead use what's called an autosize. Let me show you what I mean. I'll go up to this textblock and change the text to auto. And you see immediately the text fits on the screen. By the way, Auto is the default for the width and the height, so removing this width property results in the same UI.
Put it back by Control + Z. Now we'll go down to the button and I'll set the height and width to Auto. Now everything fits, and we'll do the same thing for this button down here. So the takeaway is for some UI elements it's okay to hardcode width and height, but for most of the items that have flexible content, you also want to have flexible sizes. In that case, pick Auto or leave the width and height property off entirely and then it'll default to Auto.
- Exploring the layout panels
- Working with the grid
- Adding rows and columns
- Creating scrolling content
- Controlling element visibility
- Aligning content
- Making custom layout panels