Open Visual Studio and create a new WPF Application project called AlignmentAndMargin.

Enter the following XAML in the Window1.xaml file:

<Window x:Class="AlignmentAndMargin.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Alignment and Margin"
        Height="300"
        Width="300">
    <Grid>
        <Button Height="35"
                Width="100" />
    </Grid>
</Window>

Run the application and notice that the Button is centered both horizontally and vertically within the Window.

Exit the application and make the following change to the Button element:

<Button Height="35"
        Width="100"
        HorizontalAlignment="Left" />

Notice how the designer updates the location of the button so that it is aligned to the left side of the window.

Now add a VerticalAlignment:

<Button Height="35"
        Width="100"
        HorizontalAlignment="Left"
        VerticalAlignment="Bottom" />

Try different combinations of horizontal (Left, Right, Center, Stretch) and vertical (Top, Bottom, Center, Stretch) alignment to see how they affect layout differently.

Now we will add some Margin to all the sides:

<Button Height="35"
        Width="100"
        HorizontalAlignment="Left"
        VerticalAlignment="Bottom"
        Margin="20" />

Using two numbers, you can specify left and right margins with the first and top and bottom margins with the second:

<Button Height="35"
        Width="100"
        HorizontalAlignment="Left"
        VerticalAlignment="Bottom"
        Margin="20 10" />

Use four numbers to specify left, top, right, and bottom margins, respectively:

<Button Margin="20 5 40 75" />

You can use spaces or commas to separate the parameters and double values for fine-grained control.

<Button Margin="20,5.75,40,75"/>

Continue to experiment with various combinations of these core layout properties.

Open the Font Viewer application and run it. Observe the layout of the four differently sized sample text regions.

Close the application and change the StackPanel’s opening tag to this:

<StackPanel Margin="8 0 8 8"
            Orientation="Horizontal">

Notice the change in the designer. Run the application and resize the window horizontally. The contents of the StackPanel are stacked from left to right and clipped by the window boundaries.

Close the application and remove the StackPanel's Orientation attribute. This is obviously not what we want.

Now add a HorizontalAlignment of Right to one or more of the TextBlock elements that are inside the StackPanel. Notice how this changes layout. The elements are still stacked vertically but within the list, they align themselves to the right.

Try adding a VerticalAlignment of Bottom to the first TextBlock. Notice that the layout does not change. Now, change the StackPanel's Orientation back to Horizontal. The elements are now laid out from left to right, with the first element being vertically positioned near the bottom of the screen whereas the rest are at the top.

Experiment by changing the Margin on any of the TextBlock elements.

Begin by examining the MainWindow.xaml in the Font Viewer. Notice that the root panel is a DockPanel with four child elements: Border, ListBox, TextBox, and StackPanel. All these elements, except the StackPanel, have a DockPanel.Dock value set. Run the application or view the designer to see how the panel has arranged the items. Notice that the StackPanel fills the leftover space in the DockPanel after all other controls are docked.

Rearrange the DockPanel’s children so that the ListBox is declared above the Border. Notice how the docking remains the same but the layout is slightly altered, with the ListBox taking precedence over the Border for space.

Change the Border's Dock property to Bottom and the ListBox's Dock property to Right. Run the application and resize the window several times (see Figure 4.2).

Figure 4.2. An alternative layout with the DockPanel.

Change the Border's Dock property to Right and set its Width to 160. Notice that both the ListBox and the Border are docked to the right. Whichever one is first in the list takes precedence, and any Margin that is applied still takes effect.

Revert all your changes so that you are back to the original layout. Reorder the last two elements in the list so that the StackPanel is above the TextBox. Remove the DockPanel.Dock="Bottom" from the TextBox and add it to the StackPanel. Notice that the TextBox now fills all the remaining space. Whichever element is last in the list will be used to fill the remaining space.

Change the DockPanel’s start tag to this:

<DockPanel Margin="8"
           LastChildFill="False">

Notice that the TextBox no longer fills the remaining space in the DockPanel.

Open Visual Studio and create a new WPF Application project called UseAGrid.

In Window1.xaml, replace the default Grid with the markup in Listing 4.1. Run the application and observe the layout behavior by resizing the window several times.

Note that the resulting Grid has two rows and two columns. This is a result of the RowDefinitions and ColumnDefinitions elements. Also, observe how the attached properties determine what row and column the buttons will be placed in. Row and column indexes begin at zero and default to this value if not specified. This is why the Button with no declared Grid.Row or Grid.Column appears in row and column zero. It is for the same reason that only one parameter needs to be specified on all but the last Button.

Change the RowDefinitions and ColumnDefinitions to match the following code:

<Grid.RowDefinitions>
    <RowDefinition Height="50" />
    <RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>

Run the program and resize the window several times. Notice that the top row maintains a height of 50 device-independent pixels and that the second column is always twice as wide as the first. You can place exact heights and widths on rows and columns, respectively. You can also indicate proportional sizing using the “*” notation.

Change the first RowDefinition to this:

<RowDefinition Height="auto" />

Run the program. Notice that the first row is automatically sizing to the default size of its content—in this case Buttons.

Try adding additional rows and columns of buttons. Mix and match the different options for height and width. For example, you could define something like this:

<ColumnDefinition Width="34" />
<ColumnDefinition Width="1.5*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="auto" />

In this case, the first column would be 34 pixels wide, the last column would auto size to content and the middle columns would split the remaining space with the ratio 1.5:2.

Experiment by changing the vertical and horizontal alignment of the buttons as well as their Margin.

Open the Font Viewer application in Visual Studio.

Locate the opening and closing StackPanel tags. Change these tags to WrapPanel.

There is no change observed in the designer, so run the application.

Resize the window in the horizontal direction several times. Notice that the WrapPanel attempts to place the TextBlocks on the same line, but when there is not enough space, it wraps them to the next line.

WrapPanel, like StackPanel, has an Orientation property. Set the Orientation to Vertical. Run the application and try resizing the window in the vertical direction.

Begin by creating a new WPF Application called UsingDecorators. Enter the code from Listing 4.3 in Window1.xaml.

Surround the Canvas with a Border, like this:

<Border BorderThickness="2"
        BorderBrush="Red"
        CornerRadius="20">
    <Canvas ...>
</Border>

BorderThickness and CornerRadius can each accept four parameters, indicating how the properties should be applied on each side or corner of the border. Additionally, BorderThickness can be declared with two parameters, signifying the left and right in the first parameter and the top and bottom in the second. Try this:

<Border BorderThickness="10 5 20 3"
        BorderBrush="Red"
        CornerRadius="20 30 0 0">
    <Canvas ...>
</Border>

There are a lot of great uses for the Border control. Let’s use it in conjunction with another Decorator, Viewbox. Change the code to this:

<Border BorderThickness="10 5 20 3"
        BorderBrush="Red"
        CornerRadius="20 30 0 0">
    <Viewbox Margin="10">
        <Canvas ...>
    </Viewbox>
</Border>

Adding the Viewbox causes the designer to stop displaying the layout preview. (This is a current limitation of the VS designer.) Run the application and resize the window several times to see the effect the Viewbox has on its content. Notice that it scales its child to fit all available space, as shown in Figure 4.5.

Figure 4.5. Combining Border, Viewbox, and Canvas.