Setting the width and height of an element is straightforward. At first glance it appears to be simple. All you need to do is set the width and height properties on the element. But in modern layout systems we need to think about creating responsive interfaces. This video looks at how sizing works in the Width, DesiredSize.Width and ActualWidth properties.
- [Instructor] Setting the width and height of an element is straightforward. Well, at first glance, it appears to be simple. All you need to do is set the width or height properties on an element. But in modern layout systems, we need to think about creating responsive interfaces. The app UI needs to adapt to changes in screen size, resolution, and DPI. It must adjust correctly when localized to other cultures, and don't forget accessibility. Are some of your vision-impaired customers using large fonts for better readability? Is your app interface adapting accurately to those larger fonts? WPF has a flexible layout system that helps with these issues.
I recommend you watch my WPF layout course to learn more about this system. It has several chapters dealing with these concepts. Meanwhile, in this video, I'll focus on a few size properties and summarize a few of the layout tools. Let's examine the values that can be set for this width parameter. To be clear, everything I discuss in this video also applies to the height property. Currently, I'm using a hard-coded number of 120 and that's the equivalent of pixels. If I want to specify this pixels explicitly, I can use a suffix here.
Type in px and notice that over here it stays the same size. There's a couple other suffixes I can use. I'll do point seven five and then I'll use i-n for inch or I can do two c-m, that's for centimeters. If you don't put the suffix, then you're using pixels. So I've hard-coded the width and what that's saying is don't allow this text block to be any wider or any narrower than 120 pixels, and as I mentioned earlier in this video, that's not a good idea in most situations.
We want a responsive UI. Here's why, take a look at this second text block. It's got this long string in there and you can't see it because I picked a width that's too low. Have you looked at this UI? I've got exactly the same UI on both sides of this page. The blue side of the page and then the red side of the page. Over here on this side, I have a text block but I set this with auto. And what auto means is it tells the text block to determine its own sizes.
How high does it want to be and how wide does it want to be. And each individual element will have its own internal algorithm for figuring that out. In the text blocks case, the more text I put in a text property the wider it wants to be. If I set the text wrapping property to wrap then it might increase the height of the text block. But the point is, I've now granted the text block the ability to choose its own size. And in this case it makes it wider. This is also important, let's look at this button. Now, this button's got some short text on it and it fits but you know what happens if I put a longer string in there, it's not going to fit in that button.
And you see that I've hard-coded, actually I've set this one to auto. This one, however ... I have ... a button that's got some complex content inside of it, and you can see that the image is not all fitting and the text is not all fitting and this gets worse if we do something like go in and change the font size. Let's say I go into the button here, change the font size to 24.
Now it's even worse. The big font made the size, the height and the width of the text that's in the text block higher. Yet over here on this side, because I marked this button as auto, I set its width to auto and its height to auto, it adjusted correctly. So if I go and change its font size ... Copy this, go down to this button, change this to 24, and it works. Now it doesn't quite work in the designer because the designer's not wide enough.
If I was to run this, you'd see all that text now fits on the button. That's the basics of size, you don't want to hard-code the width if you could avoid it. Now, there's a couple more things I want to talk about. So when you go to auto, then the button or the text block is going to choose its own sizes and it's more complicated than just this. That's why I would suggest you watch my other course because there's a lot of factors that go into a certain the whole two-faced lab. But let me just briefly talk about some of the properties that are on that framework now because that's what we're focusing on in this chapter.
So, there is this width, but then there's also the desired size which is when the element says I know what I want my size to be, and it negotiates its size with its container. It comes back to the layout system says this is my desired size. And then the layout engine says okay, thank you for that desired size and then it'll go through the rest of the layout process and it may or it may not use the desired size of the element.
So there's also a property called actual size. Actually, it's actually called actual width, I should say, and you can use that in your code. You can programmatically determine what your desired size are and what your actual size is. And that's what I've done inside these two buttons. So I've written some code that when you click on the left button, will show you its width, what was asked for. So did I hard-code the width or did I use auto? Then the desired size width, this is where it get, much of the negotiation process, and this is the actual width that was granted it when it was laid out on the screen.
So I can see, we'll see what this looks like. Click on this and it says it was hard-coded at 120, its desired width was 120, and its actual size is 120. And I come over here and I see that its width is not a number. Now, remember this is the one where I said it was auto? So the actual implementation of auto is to set a double number to NaN, that means auto. So I didn't specify a width, so its desired width was 348 and its actual size is 348.
So it got it to actual size and remember that I increased the font earlier. So if I go back to my example, click here, change this to 14, press F5 to run the application. Look at it now, it requested a smaller size and was granted that smaller size. Inside the stack panels, let's go to this button, here it is, and I will do a horizontal alignment of stretch.
Let's see what happened. When you choose stretch, since I'm inside a stack panel, I've given the stack panel permission to stretch the width of this button to fill up the width of the stack panel. I'm no longer using the default and that means that the desired size and the actual size will probably be different. Let's see if that's true. Here it is, desired width was 243.34, its actual size is 493. So during the layout process, the button said I only need 243 pixels, the stack panel looked at all of its children and said ah, I see that you've granted me permission to stretch you and I'm currently at 493 pixels in width, so I'm going to stretch you to that new size.
- Interactions and controls
- UIElement family
- FrameworkElement family
- Shape family
- Decorator Family
- Control Fundamentals
- Button family
- Text Editor family