|
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.
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.
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:
[ 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?
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:
[ 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:
[ 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:
[ 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!
|
Design-Time Sizing in Blend - Page
1
