Hello!
This is the first in a long series of how designers can use Blend 3.0.
I'm opening up a new project in Expression Blend 3.0 called GridLayoutBasics. If you don't know how, follow my earlier post here: http://www.zerogravitychimp.com/post/Custom-Scrollbars-1-Create-in-Expression-Blend.aspx
The first thing you should know is that "LayoutRoot" which blend will automatically add to "MainPage.xaml" is a grid. Grids are designed to fill the space that they occupy, and their contents can resize automatically too.
I'm going to go ahead and add some rectangles to the LayoutRoot in different colours. Now I'm going simply going to press "F5" and see the results.
Now in my case I see the rectangles taking up a 640x480 space, because that is the size of grid i drew them on. So how do i get the grid to take up all available space?
Fill the grid with a colour first, so you can see the actual size of the LayoutRoot. Next click the [UserControl] in "Objects and Timeline" and find it's height and width properties in the "Properties" panel. You can now click on the little "Auto" buttons that make your life a bit easier. Do this for width and height.
Run the project again to see what has happened. Your LayoutRoot is probably taking up all the available space in the window, but only some of your rectangles have stretched proportionately, while others have stayed tiny.
Back to Expression Blend. Select the "[UserControl]" in "Objects and Timeline" and locate the bottom-right arrow on the screen. Use this to resize the viewing area to a size that works for you.
This is called setting the Design time size of the UserControl, and will not affect the final product. You can view the Xaml (By right-clicking the UserControl and clicking "View Xaml") to see the following:
If you can't see the arrow I've circled in red you need to make sure you selected "[UserControl]" in the left-hand side panel "Objects and Timeline".
I like to close the Xaml split view to give myself more space. This can be done easily by using the buttons at the top-right of the design area:
But how can we control how all of these items will be resized at runtime? We need to use columns and rows and their properties to be able to control this dynamic resize. I will be addressing this in my next post.
Please leave comments if you have any questions or input.
Have fun designing,
Zero Gravity Chimp