Layout in XAML
page 5 of 8
by Keyvan Nayyeri
Feedback
Average Rating: 
Views (Total / Last 10 Days): 46591/ 68

Grid

Grid is my favorite Panel element and you will use it more than others.  Grid is the XAML equivalent of what you saw as Table in CSS.

Each Grid has some Rows and Columns to let you position other elements within them.  As with DockPanel, Grid has some Attached Properties.  Each child element can have a Grid.Row and Grid.Column attribute to position it in a specific cell.  Grid has its own child elements to declare the schema of it.  Grid.RowDefinitions and Grid.ColumnDefinitions are the elements that declare the schema of Grid.  Grid.RowDefinitions can have a collection of RowDefinition elements and Grid.ColumnDefinitions can have a collection of ColumnDefinition elements.

Each of these elements declares a Row or Column in Grid.  Rows can have different heights, but their width is constant; columns can have different widths, but their height is constant.  If you set the height of a row and width of a column to Auto, it will wrap to encompass the content.

Listing 8 and Figure 8 show a simple 2×2 Grid.  I set ShowGridLines attribute for Grid to True to let you see the borders between cells.  Ignore Margin attribute for each TextBox for now, I will talk about it in the next section.

Listing 8

<Window x:Class="LayoutinXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Layout in XAML" Height="150" Width="300"
    >
  <Grid ShowGridLines="True">
    <Grid.RowDefinitions>
      <RowDefinition />
      <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition  />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
 
    <TextBox Background="Coral" Grid.Row="0" Grid.Column="0" 
             Margin="5">
      ASP Alliance 1
    </TextBox>
    <TextBox Background="Plum" Grid.Row="0" Grid.Column="1" 
             Margin="5">
      ASP Alliance 2
    </TextBox>
    <TextBox Background="Aquamarine" Grid.Row="1" Grid.Column="0" 
             Margin="5">
      ASP Alliance 3
    </TextBox>
    <TextBox Background="Teal" Grid.Row="1" Grid.Column="1" 
             Margin="5">
      ASP Alliance 4
    </TextBox>
  </Grid>
</Window>
  

Figure 8

You can also span your rows and columns by using Grid.RowSpan and Grid.ColumnSpan attributes.

Listing 9 and its output, Figure 9, show a 3×3 Grid with some rows and columns spanned.

Listing 9

<Window x:Class="LayoutinXAML.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Layout in XAML" Height="150" Width="300"
    >
  <Grid ShowGridLines="True">
    <Grid.RowDefinitions>
      <RowDefinition />
      <RowDefinition />
      <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition  />
      <ColumnDefinition />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
 
    <TextBox Background="Coral" Grid.Row="0" Margin="5" 
             Grid.ColumnSpan="2">
      ASP Alliance 1
    </TextBox>
    <TextBox Background="Plum" Grid.Row="0" Grid.Column="2" 
             Margin="5">
      ASP Alliance 2
    </TextBox>
    <TextBox Background="Aquamarine" Grid.Row="1" Grid.Column="0" 
             Margin="5" Grid.RowSpan="2">
      ASP Alliance 3
    </TextBox>
    <TextBox Background="Teal" Grid.Row="1" Grid.Column="1" 
             Margin="5">
      ASP Alliance 4
    </TextBox>
    <TextBox Background="LawnGreen" Grid.Row="2" Grid.Column="2" 
             Margin="5">
      ASP Alliance 5
    </TextBox>
  </Grid>
</Window>

Figure 9


View Entire Article

User Comments

Title: Good One....   
Name: Satish
Date: 2011-01-31 5:57:16 AM
Comment:
Thanks for the article
Title: Margins and Canvas.Top/Left   
Name: Amir
Date: 2010-04-17 8:50:03 PM
Comment:
Hi,

What is the difference between margins and Canvas.Left/Top/Right/Bottom? They both seem to define left, top, right and bottom distances. If that's the case then I don't understand what they mean when they say Canvas uses absolute positioning and grid uses relative positioning.

Thanks
Title: Complement   
Name: Mehta Chandni K.
Date: 2009-02-09 4:08:59 AM
Comment:
A very good article. I got to learn many basic and important things on XAML. Thank you very much. Keep uploading such articles for students like us..
Title: XAML Layout   
Name: Anjan
Date: 2007-05-15 6:53:25 AM
Comment:
It is fine with windows.I want to Layout the Page with WINDOWS VISTA based.
Title: Correction   
Name: Keyvan Nayyeri
Date: 2006-10-27 8:36:05 AM
Comment:
Actually nothing :-D

I just forgot to remove them from previous code but they won't affect the result anyways.

Thanks for pointing.
Title: grid...   
Name: Amirhossein Babaeian
Date: 2006-10-27 6:46:47 AM
Comment:
what's the roll of grid.row and grid.column in controls that contains in cansvas tags?
Title: Resources in XAML   
Name: Keyvan Nayyeri
Date: 2006-10-12 12:58:22 AM
Comment:
Third part of these tutorials about Resources in XAML:
http://aspalliance.com/1032_Resources_in_XAML
Title: Nice article   
Name: Harry
Date: 2006-10-10 12:27:22 AM
Comment:
Hi Keyvan,
This is very nice article about XAML. I read your previous article also, even that was alos good for begginers.

Keep it up....

Harry
Title: Introduction to XAML   
Name: Keyvan Nayyeri
Date: 2006-10-09 2:08:59 PM
Comment:
First part of these tutorials, Introduction to XAML:
http://aspalliance.com/1019_Introduction_to_XAML

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-05-27 7:45:23 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search