Grid inside Grid in XAML

Based on your code, just fixed up a little:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition  />
    </Grid.ColumnDefinitions>
    <Grid Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
    </Grid>
</Grid>

Note that ColumnDefinition don't have a Height - they have a Width. You also need to define the ColumnDefinitions and RowDefinitions separately - you have them mixed together in your outer grid. I removed the RowDefinitions from the outer grid because you don't appear to be using them. Your inner grid has two columns and four rows.


You might find this useful. Try pasting this into a page using Kaxaml and playing around with the various parameters of the objects in the outer Grid. I find using Kaxaml for prototyping and experimenting with XAML layouts indispensable.

<Grid>  
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition/>
    <RowDefinition/>
  </Grid.RowDefinitions>

  <!-- 
     When I'm composing grids in XAML, I group things together by type, not by where
     they live in the grid.  This turns out to make a lot of maintenance tasks
     easier.

     Also, since Grid.Row and Grid.Column default to 0, a lot of people (and tools)
     omit them if that's their value.  Not me.  It lets me quickly check to make
     sure that content is where I think it is, just by looking at how it's organized
     in the XAML.
  -->

  <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Background="Lavender" Padding="10" HorizontalAlignment="Stretch">Here's the first row of the outer grid.</TextBlock>
  <TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Background="Lavender" Padding="10" HorizontalAlignment="Stretch">Here's the third row of the outer grid.</TextBlock>

  <TextBlock Grid.Row="1" Grid.Column="0" Background="AliceBlue" Padding="10">Here's the first column of the second row.</TextBlock>

  <Grid Grid.Row="1" Grid.Column="1">
    <Grid.ColumnDefinitions>
      <!--
         This part's pretty important.  Setting up the SharedSizeGroups for these
         two columns keeps the labels and text boxes neatly arranged irrespective of
         their length.
      -->
      <ColumnDefinition SharedSizeGroup="Label"/>
      <ColumnDefinition SharedSizeGroup="TextBox"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition/>
      <RowDefinition/>
    </Grid.RowDefinitions>

    <Label Grid.Row="0" Grid.Column="0">First label</Label>
    <Label Grid.Row="1" Grid.Column="0">Second label</Label>
    <Label Grid.Row="2" Grid.Column="0">Third label, containing unusually long content</Label>

    <TextBox Grid.Row="0" Grid.Column="1">First text box, containing unusually long content</TextBox>
    <TextBox Grid.Row="1" Grid.Column="1">Second text box</TextBox>
    <TextBox Grid.Row="2" Grid.Column="1">Third text box</TextBox>

  </Grid>

</Grid>

It might come a little confusing how to put controls in sub grids. Here is an example.

We have 3 * 3 cell grid. And then center cell is further divided in 3 rows where each row has a button.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="1" Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
            <Button Grid.Row="0" Content="Button1"/>
            <Button Grid.Row="1" Content="Button2"/>
            <Button Grid.Row="2" Content="Button3"/>
    </Grid>
</Grid>

Result:

enter image description here

Tags:

Wpf

Xaml