Setting the size of the screen in Expression Blend

Setting the Size of screen in Blend

Setting the screen size is sometimes a matter of concern, although in silverlight and WPF applications can adapt automatically to different sizes according to the space available by use of design fluids or auto layouts.changing the sizes frequently as per the demand becomes quite cumbersome with fluid layouts but to overcome this problem Expression Blend provides features of design time sizing which is a special way of positioning at all the times depending on the nature of the project.

To get a clear view of sizing,  let's look at an example. The image below shows two partitions in which one partition is of a fixed size while the other partition has the ability to change its size accordingly to occupy the space available.

Arrange two rectangles in the grid.

Now lets fix the horizontal size of 1st partition and set the size of second partition to auto then the 1st partition maintains its width throughout the application while 2nd partition has the ability to fill into the available  space.

Here when the size of Grid is changed only changes in the 2nd parttion are obvious while 1st parttion maintains its width.

Here resizing the grid control horizontally increses the width of 2nd parttion.

Here resizing the length of the control changes the height of both the parttions , this is because only the width of the 1st patition is fixed and not the height..

In order to implement this functionality in expression we follow the following procedure :

Check out the root element in your object tree.

For WPF projects, your root element will be Window for a window or UserControl for a custom user control:

This is applicable to user controls you create as well:

For Silverlight , root element will always be a User Control

Now select a root element (Window, WPF User Control, or SL User Control) and look in the Property panel at the Width and Height properties in the Layout category:

Click on the Auto button next to the Width or Height property to set the application's width, height, or both to Auto.

Note : While setting the size to auto, height and width can not be altered but the maximum and minimum size can be set  by the MinWidth, MinHeight, MaxWidth, and MaxHeight properties.

Hence sizing the screen to different height and width dynamically enhances the layout on the final output screen without causing controls to run out of boundaries or keep large unoccupied screen.