Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this movie, I will look at three different ways the element can affect its ultimate location. These properties are Size, Alignment, and Margin. You can hardcode a size for an element, but this is rarely a good idea. It is better to allow an element to grow or shrink based on its content. This is done by setting the AutoSize property, also known as Size To Content. Now when you increase the Font size of the button, it should get taller, unless of course, the button has a fixed height. In Silverlight, the panel and the child element both work at determining the final size of the child.
For example, a TextBlock's width is determined from its string content; a button's height is determined from its Font size; a StackPanel might stretch a Button's width to match the StackPanel's width. Now look at what happens when a child sets a fixed width. First, if the content of the child gets bigger, the control cannot go larger than the fixed width. Second, the panel will not make the element larger than the requested size. Each panel has to decide what to do if the panel is smaller than the requested width.
The StackPanel will shrink the child to always be within the boundaries of the panel. Now let's talk about AutoSize. An element determines its width based on its content, it then requests that same width from its parent panel. So if I have a long string, I will have a wider button. The panel then applies its normal panel rules. When an element is smaller than the container, then the Alignment property stipulates the placement in the extra space. The default mode for Alignment is Stretch. In the case of the StackPanel that means it will stretch the button to across the width of the StackPanel.
The three other choices are Left, Right, and Center. I am going to use Expression Blend for my demos. I am inside a project called, AdjustingContent, which contains a StackPanel, which currently has one TextBlock; and a Canvas which has one TextBlock. I am going to draw a button inside this StackPanel. I will go to my Toolbox, select the Button and draw. When I draw inside the StackPanel using Blend, it sets some margin properties.
I am going to press the V Key, which is the Selection tool and you can see the margins in these little tips. It says 93 on the side and 39 on this side, that's the margins for this button. If I remove the Margins, set those to zero, then the StackPanel is going to stretch the control to the entire width of the StackPanel. I am going to copy this button, Ctrl +C, and paste it a couple of times.
Notice that each one of these buttons is set to AutoSize. It has a fixed Height but AutoSize for the width. Because there are no margins, again, all three of these are stretched to the width. And if I take this Button and copy it over here to the Canvas, Ctrl+C, I select the Canvas and then do a Ctrl+V, it starts off at a fixed width of 300. Notice there is no margins here. I am going to change the width to 200 and then you can see I can drag this around.
No, I am no longer changing the margin, because I am inside the Canvas. The Canvas understands absolute positioning, so it doesn't need to use margins. I am going to create two buttons and put them in this Canvas. So I will copy this button. This time when I paste it in, it doesn't look like anything happened because they were positioned at exactly the same spot. I want to talk about alignment for a minute. I'm inside this button. The button contains content. I can control first of all the alignment of the button, and second of all, I can control the alignment of its child content.
I am going to go to my Panel and type in ali for Alignment, then I am going to choose this HorizontalContentAlignment and click on Left, Center, and Right. And you can see that it is doing the right thing. Go back to Center. Next, I am going to show you about Size To Content. So for this first button, I am going to leave it at a fixed width of 200 pixels, and for the second button, I'm going to change it to an Auto width.
Since it's already set to fixed, the way you set it back to Auto in Blend is you click on this icon right here, Set to Auto. I am also going to do the same thing with the Height. Click here Set to Auto. Okay, now I am going to select both of these buttons and I am going to change their Font Size to 48 points, and you can see that one of the buttons, because it has a fixed size is cutting off the bottom of the font. While this one, because it was set to AutoSize grows to show the content.
The same thing with the Width, if I change the Content property of this second button to a longer string, then the button grows. If I were to do that inside this button, because it's a fixed width, it would stay at the 200 pixel width. The best way to learn about Alignment, Content, and Margin is by trying it yourself. Have fun!
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99216 Viewers
56 Video lessons · 112490 Viewers
71 Video lessons · 81293 Viewers
131 Video lessons · 39036 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.