XAML in a Nutshell

48

|

Chapter 4: Layout and Positioning

This is the Title of the Book, eMatter Edition

Copyright © 2008 O’Reilly & Associates, Inc. All rights reserved.

This user-login interface isn’t looking quite like it should, however, even when

using a

DockPanel to position elements. StackPanel and DockPanel are useful for

the general positioning of elements, but to fine-tune the layout of a user interface,

you must specify additional attributes such as

Width and Alignment.

Using Width and Alignment

By default, XAML renders elements on the screen in the order in which they are

defined within the XAML file. If the

TextBox in Example 4-2 is added to the

StackPanel before the first Label, then it will appear as the first element and the

Example 4-1. Using DockPanel.Dock to position elements

<Page

xmlns="http://schemas.microsoft.com/winfx/avalon/2005">

<Border

BorderBrush="Black"

BorderThickness="1">

<DockPanel>

<Border

DockPanel.Dock="Top"

BorderBrush="Red"

BorderThickness="1">

<Label>Username Label</Label>

</Border>

<Border

DockPanel.Dock="Right"

BorderBrush="Red"

BorderThickness="1">

<TextBox>[e-mail]</TextBox>

</Border>

<Border

DockPanel.Dock="Left"

BorderBrush="Red"

BorderThickness="1">

<Label>Password Label</Label>

</Border>

<Border

DockPanel.Dock="Top"

BorderBrush="Red"

BorderThickness="1">

<TextBox>This is the password box</TextBox>

</Border>

<Border

DockPanel.Dock="Bottom"

BorderBrush="Red"

BorderThickness="1">

<Button

Content="Submit" />

</Border>

</DockPanel>

</Border>

</Page>

Using Width and Alignment | 49

Layout and

Positioning

This is the Title of the Book, eMatter Edition

Copyright © 2008 O’Reilly & Associates, Inc. All rights reserved.

Label will appear after it. By default, all elements have a width equal to the

container element of which they are children. Using the login page example from

Chapter 3 without specifying any kind of formatting or layout restrictions yields

the user interface in Figure 4-6.

This is neither aesthetically pleasing nor is it particularly usable. There is no clear

delineation between elements, and it is hard on the eyes. The first thing to do is

limit the width of the elements to make them easier to read. There are three

options to accomplish this: define the

Width attribute on all the elements added

to the

StackPanel, limit the width of the StackPanel itself, or change the

HorizontalAlignment of the StackPanel. The second option will force all the

elements in the

StackPanel to be the same width. While this is a viable option, it

may not be appropriate for every situation, especially if you don’t want all the

elements to be the same width as the

TextBox. The best option in this case is to

limit the width of each individual element. Note that specifying the

Width of an

element will change its resizing behavior. When a width is set, the element no

longer automatically resizes when its container changes size. Example 4-3 shows

how to use

Width to constrain the size of an element.

Figure 4-5. Using DockPanel.Dock to position elements

Example 4-2. Example code for user login screen with no layout or formatting

<Page

xmlns="http://schemas.microsoft.com/winfx/avalon/2005">

<StackPanel>

<Label>Username</Label>

<TextBox>[e-mail]</TextBox>

<Label>Password</Label>

<PasswordBox></PasswordBox>

<Button Content="Submit" />

</StackPanel>

</Page>

50

|

Chapter 4: Layout and Positioning

This is the Title of the Book, eMatter Edition

Copyright © 2008 O’Reilly & Associates, Inc. All rights reserved.

As you can see from Figure 4-7, it is now possible to clearly delineate between

elements, but the result is still not acceptable. The elements are centered on the

page when they really should be left-justified. That’s easy enough—you can align

elements within a container using the

HorizontalAlignment and VerticalAlignment

attributes.

Alignment can be a tricky subject because there’s more than just left, right, and

center, and alignment interacts with width in strange and mysterious ways. Tradi-

tional alignment values act as you’d expect. StackPanel will align elements on its

left edge, its right edge, or centered, based on the value of

HorizontalAlignment.

The default value for

HorizontalAlignment is Stretch. This forces all contained

elements to stretch themselves (appropriate, isn’t it?) to fill the entire width of the

panel.

Using a HorizontalAlignment of Stretch and specifying widths on individual

elements has interesting effects. In Figure 4-8, the first element added is a border

Figure 4-6. User login screen with no layout or formatting

Example 4-3. Using Width to constrain the size of elements

<Page

xmlns="http://schemas.microsoft.com/winfx/avalon/2005">

<StackPanel>

<Label

Width="100">Username</Label>

<TextBox

Width="150">[e-mail]</TextBox>

<Label

Width="100">Password</Label>

<PasswordBox

Width="150"></PasswordBox>

<Button

Width="100"

Content="Submit" />

</StackPanel>

</Page>