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>username@example.com</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>username@example.com</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">username@example.com</TextBox>
<Label
Width="100">Password</Label>
<PasswordBox
Width="150"></PasswordBox>
<Button
Width="100"
Content="Submit" />
</StackPanel>
</Page>

Get XAML in a Nutshell now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.