Automatic Width and Height


   
         
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid Background="Beige" ShowGridLines="True">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <TextBlock Grid.Column="0" Grid.Row="0">This is a test.:</TextBlock>
  <TextBlock Grid.Column="1" Grid.Row="0">This is a test</TextBlock>
  <TextBlock Grid.Column="0" Grid.Row="1">This is a test:</TextBlock>
  <TextBlock Grid.Column="1" Grid.Row="1">This is a test</TextBlock>
  <TextBlock Grid.Column="0" Grid.Row="2">This is a test:</TextBlock>
  <TextBlock Grid.Column="1" Grid.Row="2">This is a test</TextBlock>
</Grid>
</Page>

   
    
    
    
    
    
    
    
    
     


Use Image as the Grid background


   
        

<Window x:Class="OpacityMaskExample"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title=""
  Height="430" Width="300">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" Margin="5">
      <Grid.Background>
        <ImageBrush ImageSource="c:image.jpg" />
      </Grid.Background>
      <Ellipse Width="200" Height="200" StrokeThickness="0"
        Fill="Yellow" Margin="20">
        <Ellipse.OpacityMask>
          <RadialGradientBrush GradientOrigin="0.5,0.5"
            Center="0.5,0.5" RadiusX="1" RadiusY="1">
            <GradientStop Offset="0" Color="Transparent" />
            <GradientStop Offset="1" Color="Yellow" />
          </RadialGradientBrush>
        </Ellipse.OpacityMask>
      </Ellipse>
    </Grid>



  </Grid>
</Window>

   
    
    
    
    
    
    
    
     


Place and size rectangles and ellipses in Grid cells


   
        


<Window x:Class="PlaceShapes"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Place Shapes" Height="300" Width="360">
  <Grid ShowGridLines="True">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
      <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition />
      <ColumnDefinition />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="0" Grid.Row="1" Text="Rectagle"
      Margin="5" />
    <TextBlock Grid.Column="0" Grid.Row="2" Text="Ellipse"
      Margin="5" />
    <TextBlock Grid.Column="1" Grid.Row="0" Text="Fill"
      TextAlignment="Center" Margin="5" />
    <TextBlock Grid.Column="2" Grid.Row="0" Text="Uniform"
      TextAlignment="Center" Margin="5" />
    <TextBlock Grid.Column="3" Grid.Row="0" Text="UniformToFill"
      TextAlignment="Center" Margin="5" />
    <Rectangle Grid.Column="1" Grid.Row="1" Fill="Red"
      Stroke="Black" Stretch="Fill" Margin="5" />
    <Rectangle Grid.Column="2" Grid.Row="1" Fill="LightGray"
      Stroke="Black" Stretch="Uniform" Margin="5" />
    <Rectangle Grid.Column="3" Grid.Row="1" Fill="LightGray"
      Stroke="Black" Stretch="UniformToFill" Margin="5" />
    <Ellipse Grid.Column="1" Grid.Row="2" Fill="LightGray"
      Stroke="Black" Stretch="Fill" Margin="5" />
    <Ellipse Grid.Column="2" Grid.Row="2" Fill="LightGray"
      Stroke="Black" Stretch="Uniform" Margin="5" />
    <Ellipse Grid.Column="3" Grid.Row="2" Fill="LightGray"
      Stroke="Black" Stretch="UniformToFill" Margin="5" />
  </Grid>
</Window>

   
    
    
    
    
    
    
    
     


Use the Grid element to create a standard user interface (UI) dialog box.


   
        

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      WindowTitle="Grid Run Dialog Sample" WindowWidth="425" WindowHeight="225">
  <Grid Background="#DCDCDC" Width="425" Height="165" HorizontalAlignment="Left"
        VerticalAlignment="Top"
        ShowGridLines="True">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Image Grid.Column="0" Grid.Row="0" Source="c:image.png" />
    <TextBlock Grid.Column="1" Grid.ColumnSpan="4" Grid.Row="0" TextWrapping="Wrap">
      text
    </TextBlock>
    <TextBlock Grid.Column="0" Grid.Row="1">Open:</TextBlock>
    <TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="5" />
    <Button Margin="10, 0, 10, 15" Grid.Row="3" Grid.Column="2">OK</Button>
    <Button Margin="10, 0, 10, 15" Grid.Row="3" Grid.Column="3">Cancel</Button>
    <Button Margin="10, 0, 10, 15" Grid.Row="3" Grid.Column="4">Browse ...</Button>
  </Grid>
</Page>

   
    
    
    
    
    
    
    
     


Grid Splitter and Alignment


   
        
<Window x:Class="LayoutPanels.SplitWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="SplitWindow" Height="300" Width="300"
    >
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition MinWidth="100"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition MinWidth="50"></ColumnDefinition>
      </Grid.ColumnDefinitions>

      <Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
      <Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
      <Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
      <Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
      
      <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2"                
                  Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center"
                  ShowsPreview="False"></GridSplitter>
     
    </Grid>
</Window>

   
    
    
    
    
    
    
    
     


Empty RowDefinition and ColumnDefinition


   
        



<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>

   
    
    
    
    
    
    
    
     


Shared Size Group


   
        

<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>

        <Label Margin="5">A very long bit of text</Label>
        <GridSplitter Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Width="10"></GridSplitter>
        <Label Grid.Column="1" Margin="5">More text</Label>
        <TextBox Grid.Column="2" Margin="5">A text box</TextBox>
      </Grid>
    </Grid>
</Window>