Design-Time Sizing in Blend - Page 1
       by kirupa  |  31 August 2008

In Silverlight and WPF, you have the ability to design fluid/auto layouts that allow your application to automatically adapt to varying screen sizes and available space. As a designer, working with fluid layouts can be tricky because you now have to design your application to work under various sizes. You donít have the luxury of having pixel-precise positioning at all times, and depending on how your project is setup, being able to publish and preview frequently might not be possible.

Design-Time Sizing
To help with that, when creating WPF or Silverlight applications, Expression Blend provides you with a feature known as design-time sizing. Design-time sizing provides you with a special way of resizing your application on the Blend design surface to preview how your application will look at different sizes.

Looking at the Problem More Concretely
Now that you have a basic idea of what this does, let's look at the problem in a little more detail. Below, I have two rectangles that have been positioned right next to each other inside a Grid:

 tworectangles2

[ two rectangles arranged side-by-side in a Grid ]

The blue rectangleís width is fixed. It will always stay at the width you currently see it at. The yellow rectangle is different. Itís width is set to stretch. That means it will take up as much horizontal space available to it. Both rectangles have their heights set to Auto. That means they will take up as much vertical space they can find.

Herein lies the problem that I stated textually earlier. How can I preview this functionality without actually running the application? I could resize the Grid control that the elements are currently in, but I really donít want to modify any property that also affects the final output. How can I design something that would look nice across all possible sizes?

Seeing Design-Time Sizing in Action
The answer lies in design-time resizing. When your window in WPF or usercontrol in Silverlight has its width and height set to Auto, adorners for setting your applicationís design-time size become visible:

designtimeSS

[ the design-time adorners ]

These adorners, located directly outside of your regular square shaped adorners for altering your elementís width or height, allow you to simulate in real-time on the design surface how your application will look in various combinations of height and width.

For example, as I drag my design-time height adorner down, notice what you see:

appHeight

[ resizing the design-time adorner resizes the rectangles accordingly ]

My rectangles are filling up the extra vertical space that is becoming available to them. The same is true when I play with my horizontal design-time adorner:

horizontalSize

[ adjust the horizontal design-time adorners adjusts the width of your yellow rectangle ]

The horizontal sizing is interesting because, if you remember the description of the two rectangles I gave earlier, our blue rectangleís width is fixed. It will always stay the same size regardless of how much space is available to it. The yellow rectangle is different. It will take up however much space it has available to it.

In the above screenshot you can see that as your windowís size gets smaller, the amount of space taken up by your yellow rectangle decreases accordingly. To put it differently, your yellow rectangleís size is automatically adjusted without you having to do anything extra, and you were able to see that on the design surface without actually running your application.


Ok, now that you've gotten a better understanding of the problem, let's look at how to use this in Expression Blend on the next page.

Onwards to the next page!

1 | 2




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.