Nested Grid


   
        

<Window x:Class="LayoutPanels.SharedSizeGroup"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="SharedSizeGroup" Height="300" Width="380">
  
    <Grid Grid.IsSharedSizeScope="True" Margin="3">
      <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition></RowDefinition>
      </Grid.RowDefinitions>

      <Grid Grid.Row="0" Margin="3" Background="LightYellow" ShowGridLines="True">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto" SharedSizeGroup="TextLabel"></ColumnDefinition>
          <ColumnDefinition Width="Auto"></ColumnDefinition>
          <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
    
          <Grid Grid.Row="2" Margin="3" Background="LightYellow"  ShowGridLines="True">
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" SharedSizeGroup="TextLabel"></ColumnDefinition>
              <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
    
            <Label Margin="5">Short</Label>
            <TextBox Grid.Column="1" Margin="5">A text box</TextBox>
          </Grid>
      </Grid>
    </Grid>
</Window>

   
    
    
    
    
    
    
    
     


Set Column and Row index when adding Controls to a Grid


   
        
<Window x:Class="LayoutPanels.SimpleGrid"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="SimpleGrid" Height="300" Width="300"
    >
    <Grid ShowGridLines="True">
      <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
      </Grid.ColumnDefinitions>
    <Button Grid.Row="0" Grid.Column="0">Top Left</Button>
    <Button Grid.Row="0" Grid.Column="1">Middle Left</Button>
    <Button Grid.Row="1" Grid.Column="2">Bottom Right</Button>
    <Button Grid.Row="1" Grid.Column="1">Bottom Middle</Button>
    
  </Grid>
</Window>

   
    
    
    
    
    
    
    
     


Put more than one Object to one Grid Cell


   
        
<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Fun with Panels!" Height="186" Width="501">

<Grid ShowGridLines ="True" Background ="AliceBlue">

  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition/>
  </Grid.RowDefinitions>

  <Label Name="lblInstruction" Grid.Column ="0" Grid.Row ="0" FontSize="15">Enter Car Information</Label>
  <Button Name="btnOK"  Height ="30" Grid.Column ="0" Grid.Row ="0" >OK</Button>
  <Label Name="lblMake" Grid.Column ="1" Grid.Row ="0">Make</Label>
  <TextBox Name="txtMake" Grid.Column ="1" Grid.Row ="0" Width="193" Height="25"/>
  <Label Name="lblColor" Grid.Column ="0" Grid.Row ="1" >Color</Label>
  <TextBox Name="txtColor" Width="193" Height="25" Grid.Column ="0" Grid.Row ="1" />

  <Rectangle Fill ="LightGreen" Grid.Column ="1" Grid.Row ="1" />
  <Label Name="lblPetName" Grid.Column ="1" Grid.Row ="1" >Pet Name</Label>
  <TextBox Name="txtPetName" Grid.Column ="1" Grid.Row ="1" Width="193" Height="25"/>

</Grid>
</Window>

   
    
    
    
    
    
    
    
     


Set Row and Column Index when Adding Buttons to Grid


   
        

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="NineButtons" Height="195" Width="306">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="33*" />
            <RowDefinition Height="33*" />
            <RowDefinition Height="33*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="33*" />
            <ColumnDefinition Width="33*" />
            <ColumnDefinition Width="33*" />
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Margin="5">0,0</Button>
        <Button Grid.Row="0" Grid.Column="1" Margin="5">0,1</Button>
        <Button Grid.Row="0" Grid.Column="2" Margin="5">0,2</Button>
        <Button Grid.Row="1" Grid.Column="0" Margin="5">1,0</Button>
        <Button Grid.Row="1" Grid.Column="1" Margin="5">1,1</Button>
        <Button Grid.Row="1" Grid.Column="2" Margin="5">1,2</Button>
        <Button Grid.Row="2" Grid.Column="0" Margin="5">2,0</Button>
        <Button Grid.Row="2" Grid.Column="1" Margin="5">2,1</Button>
        <Button Grid.Row="2" Grid.Column="2" Margin="5">2,2</Button>
    </Grid>
</Window>

   
    
    
    
    
    
    
    
     


Set Row Height and column Width for Grid


   
        
<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="GridButton" Height="193" Width="219">
    <Grid>
        <Button Name="btnGrid" Height="100" Width="150">
            <Grid Height="90" Width="140">
                <Grid.RowDefinitions>
                    <RowDefinition Height="33*" />
                    <RowDefinition Height="33*" />
                    <RowDefinition Height="33*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="33*" />
                    <ColumnDefinition Width="33*" />
                    <ColumnDefinition Width="33*" />
                </Grid.ColumnDefinitions>
                <Label Content="Left" Grid.Row="0" Grid.Column="0" />
                <Label Content="Middle" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" VerticalAlignment="Center" HorizontalAlignment="Center" />
                <Label Content="Right" Grid.Row="2" Grid.Column="2" VerticalAlignment="Bottom" HorizontalAlignment="Right" />
            </Grid>
        </Button>
    </Grid>
</Window>

   
    
    
    
    
    
    
    
     


Arrange the children for Grid


   
        

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  Title="About WPF" 
  Background="OrangeRed">
    <Grid Background="LightBlue">
      <!-- Define four rows: -->
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
      </Grid.RowDefinitions>
    
      <!-- Define two columns: -->
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition/>
      </Grid.ColumnDefinitions>
    
      <Label    Grid.Row="0" Grid.Column="0" Background="Blue" Foreground="White" HorizontalContentAlignment="Center"
                Grid.ColumnSpan="2">Start Page</Label>
      <GroupBox Grid.Row="1" Grid.Column="0" Background="White" Header="Recent Projects">...</GroupBox>
      <GroupBox Grid.Row="2" Grid.Column="0" Background="White" Header="Getting Started">...</GroupBox>
      <GroupBox Grid.Row="3" Grid.Column="0" Background="White" Header="Headlines">...</GroupBox>
      <GroupBox Grid.Row="1" Grid.Column="1" Background="White" Header="Online Articles" Grid.RowSpan="3">
        <ListBox>
          <ListBoxItem>Article #1</ListBoxItem>
          <ListBoxItem>Article #2</ListBoxItem>
          <ListBoxItem>Article #3</ListBoxItem>
          <ListBoxItem>Article #4</ListBoxItem>
        </ListBox>
      </GroupBox>
    </Grid>


</Window>