Geeks With Blogs

News
Michael Crump Microsoft MVP, INETA Community Champion and XAML Advocate.

I’ve been trying to wrap my head around the Grid in Silverlight/WPF today and decided that I’d share this with others. I made this diagram and the following xaml code snippet to remember how to position controls/etc in the grid.

From looking at the image below, we have a 3x3 Grid that starts at 0.

image

After you create a Grid, debugging is easier if you turn the ShowGridLines to true. Now its time to setup the RowDefinitions and ColumnDefinitions. We can create a button control now. You should pay special attention to the “Grid.Column” and “Grid.Row” properties of the button as they will determine where the button is placed in the control.

 

<Grid ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="60" />
        <RowDefinition Height="60" />
        <RowDefinition Height="60" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="175" />
        <ColumnDefinition Width="175" />
        <ColumnDefinition Width="175" />
    </Grid.ColumnDefinitions>
    <Button Grid.Column="0" Grid.Row="0" Content="Button 1" FontSize="18" Width="150" Height="45" />
    <Button Grid.Column="2" Grid.Row="0" Margin="10" Content="Button 2" FontSize="18" Width="150" Height="45" />
    <Button Grid.Column="1" Grid.Row="2" Margin="10" Content="Button 3" FontSize="18" Width="150" Height="45" />
</Grid>

 

This is what the XAML looks like in the VS2010 Editor with ShowGridLines turned on.

image

You can right click on the XAML file and open the file with Expression Blend 4 if you have it installed. Using Expression Blend it is much easier to drag/drop buttons and build the actual grid.

image

Posted on Wednesday, June 30, 2010 3:05 PM WPF | Back to top

Copyright © mbcrump | Powered by: GeeksWithBlogs.net