Much like any activity, learning Blend is a matter of
performing tasks and repeating them. The more you do, the more the
muscle memory of Blend will take over and allow you to create great
applications.
1. Layout
The most basic layout task you will accomplish is simply drawing
elements on the screen. With a new application project, if you draw a
control (for example, Button) on the page, you will notice that the size of the control will be shown as you drag, as shown in Figure 1.
Figure 1. Dragging a new control
When you let go of the mouse button, you will notice that the control
includes eight handles for resizing the control. Just outside these
handles are lines that radiate outward from the control with small
numbers near them. The usual way that XAML (and Blend) handles layout is
by converting your object size to a margin from the side of the
container (in this case a grid). So in Figure 2,
you can see a “25” near the top and both sides of the new button. This
indicates that the top, right, and left margins are 25 in size. Near
each number is a small closed chain icon that indicates that the object
is tied to these edges of the container. The bottom of the button has a
dotted line that leads to an open chain icon that indicates that the
button is not tied to the bottom. Because it is not tied to the bottom
of the container, the margin doesn’t appear either (because the margin
wouldn’t matter in this case). Using this metaphor of chaining to an
edge can let you infer the alignment (top vertical aligned and stretch
aligned horizontally). You can see the actual alignment and margin in
the Properties panel that match this information. You can change these
margins and alignments either directly on the artboard or by using the
Properties panel.
Figure 2. Margin and alignment layout
Most of the dynamic containers (Grid, StackPanel, and WrapPanel) all handle layout in this simple manner. The container in this example is the Grid. The Grid
is different (and probably the most common of the containers) in that
it enables you to create rows and columns. Blend makes it easy to create
these rows and columns.
In a new simple Windows Phone application, Blend creates three Grids (LayoutRoot, TitlePanel, and ContentPanel). If you expand the LayoutRoot and select the ContentGrid in the Objects and Timeline panel, you will see that Blend shows a top- and left-side gutter for the grid, as shown in Figure 3.
Figure 3. Column and row gutters
These gutters are important as you can click them to create columns
and rows. Clicking the grid will create a split in the container that
indicates where two rows or columns are separated. For example, if you
click the left gutter about halfway down you’ll see two rows created, as
shown in Figure 4.
Figure 4. Splitting the grid into rows
After the grid is split into two rows, you should notice the text
indicators next to each row that indicate the way the row (or column) is
sized. There are three types of sizing: auto, fixed, and star sizing. The text indicator in Figure 4
shows that the two rows are star sized (as they are post-pended with an
asterisk). When you hover on the text indicator, it shows a drop-down
(see Figure 5).
Figure 5. Row/Column modification drop-down
You can use this drop-down to change the type of row or column to an
auto-sized or fixed-sized column/row. You can also choose to select the
row or add or remove columns/rows.
When working with multiple columns and rows, Blend draws only what
you like, but because you are creating applications that have to deal
with different screen sizes, this it potentially hazardous. The problem
is that fixed sizes are notoriously finicky with fixed sizes, and the
recommendation is to make your applications just adjust size with the
screen size. The best way to do this is to use what Blend calls
“Quadrant Sizing”. To ensure this, go to the Blend Options (for example,
use the Tool menu and pick Options). In Figure 6, this option is turned on.
Figure 6. Enabling Quadrant Sizing
With Quadrant Sizing enabled, you can stretch objects across the row
and column boundaries. Blend will do its best to help you determine
which columns and rows you want to be a part of, but it is just guessing
your intent. For example, you can see in Figure 7 that when an item just enters a second row, it handles this with a negative margin value.
Figure 7. Sizing across rows
But if you stretch that more, Blend assumes you want to span the two rows, as shown in Figure 8.
Figure 8. Sizing across rows with RowSpan
You will often need to manipulate the Row, Column, RowSpan,
ColumnSpan, Alignment, and Margin entries manually in the Properties
panel to get the exact behavior you want. In many cases you might not
want to use margins at all, but rather make your object a fixed size.
You can do this by ensuring that your object is not set to Stretch
alignment (vertically and horizontally). Then the Margin box will
indicate where to draw your element, but not how to size your element.
