Blog

Placing XAML Controls Onto the Grid

By Ken Getz

windows 8 training

One of XAML's most important features is its ability to create hierarchies of controls; that is, the ability to nest controls inside other controls.

If you need to arrange content in two dimensions, the Grid control is your best choice. As a matter of fact, when Visual Studio creates a new project, it always places a Grid element as the only child control of the host Window element in the new form.

In this article, we'll investigate programmatically setting the location of controls within the grid.

Placing Controls Onto the Grid

In addition to manually specifying the sizes for rows and columns within the Grid control, you can also allow child controls to determine the necessary sizes. If you like, you can have the grid rows and columns determine the sizes of the controls within the grid. Follow these steps to try out both situations.

1. From the Toolbox window, drag a Button control into the grid, in the middle cell (see below). Set the Name property for the Button to DemoButton. 2. Note the resulting XAML markup, which should look like the following:
<Button
x:Name="DemoButton"
Content="Button"
Grid.Column="1"
HorizontalAlignment="Left"
Margin="67,33,0,0"
Grid.Row="1"
VerticalAlignment="Top" />

As you might guess, the Grid.Column and Grid.Row attributes indicate the container for the control, and the Margin attribute indicates how far the control is from the edges of that container.

TIP: The Button control doesn't supply the Grid.Column and Grid.Row properties-the Grid control supplies those properties, extending the set of properties of every control within the Grid.

3. Enlarge the button, and move it so that it spans two rows, as shown below. Note that the margin offsets are now measured from grid cells in two different rows, and that the Button's Grid.RowSpan property has been set to 2.

xaml training

4. Note that the XAML markup for the button now looks something like this:

<Button
x:Name="DemoButton" Content="Button"
Grid.Column="1" Grid.Row="1"
Margin="86,45,0,0"
VerticalAlignment="Top" HorizontalAlignment="Left"
Height="140" Width="115"
Grid.RowSpan="2"
/>

The markup now includes the Grid.RowSpan attribute (or Grid.ColumnSpan, if your control spans multiple columns). Based on this markup, XAML can determine that your control's upper-left corner is in cell 1, 1; and that the control spans two rows. The Margin attribute's values indicate offsets from the edges of the corresponding region within the grid. Modify the XAML markup for the button, so that the button spans only a single row, and has no margin settings (that is, it fills its entire container), and includes the content Click Me!.

5. The Figure below shows the results after making this change:

<Button
x:Name="DemoButton"
Content="Click Me!"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="1"
Grid.Row="1"
/>
training for windows 8
As mentioned previously, you can also force grid row and column sizes to fit their contents. To see that behavior, continue following these steps:

6. Modify the grid column widths, so that they're all equal.

<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

7. Again modify the column definitions, specifying a width of Auto for the middle row and column. The Figure below shows the resulting layout:

<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="3*" />
</Grid.RowDefinitions>

training in xaml 
ldn-expertkgetzThis post is an excerpt from the online courseware for our Windows 8 Applications Using XAML: Apps and UI course written by expert Ken Getz.



Ken Getz

Ken Getz is a featured instructor for several of our Visual Studio courses. He is a Visual Basic and Visual C# expert and has been recognized multiple times as a Microsoft MVP. Ken is a seasoned instructor, successful consultant, and the author or co-author of several best-selling books. He is a frequent speaker at technical conferences like Tech-Ed, VSLive, and DevConnections and he has written for several of the industry's most-respected publications including Visual Studio Magazine, CoDe Magazine, and MSDN Magazine.


This blog entry was originally posted November 06, 2012 by Ken Getz

Windows 8XAMLWindows 8 Apps