Arrange UI Elements in a Grid


   
       

<Window x:Class="Main"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF" Height="200" Width="250">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition MinHeight="50" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="3*" />
        </Grid.ColumnDefinitions>
        <Button Content="Button spanning 3 rows" Grid.RowSpan="3">
            <Button.LayoutTransform>
                <RotateTransform Angle="90" />
            </Button.LayoutTransform>
        </Button>
        <Button Content="Button spanning 2 columns" Grid.Column="1" 
                Grid.Row="0" Grid.ColumnSpan="2" />
        <Button Content="Button" Grid.Column="2" Grid.Row="2"/>
    </Grid>
</Window>

   
    
    
    
    
    
    
     


Set Grid Row and Column for a Button


   
       
<Window x:Class="VeryBasicXAMLFile.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="VeryBasicXAMLFile" Height="300" Width="300"
    >
    <Grid>
      <Button 
        Width="134" 
        Height="27" 
        Name="button1"
        Margin="73,53,0,0" 
        Grid.RowSpan="1" 
        Grid.Row="0"
        VerticalAlignment="Top" 
        HorizontalAlignment="Left"
        Grid.Column="0" 
        Grid.ColumnSpan="1"
        >
        Button
        </Button>
    </Grid>
</Window>

   
    
    
    
    
    
    
     


Grid with Rectangle and GeometryDrawing


   
       

<Window x:Class="WPFBrushes.ColorAndAlpha"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Alpha Channel" Height="300" Width="300">
    <Grid VerticalAlignment="Center" HorizontalAlignment="Center">

        <Rectangle Height="200" Width="200">
            <Rectangle.Fill>
                <DrawingBrush Viewport="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile">
                    <DrawingBrush.Drawing>
                        <DrawingGroup>
                            <GeometryDrawing Brush="Black">
                                <GeometryDrawing.Geometry>
                                    <RectangleGeometry Rect="0,0,10,10" />
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                            <GeometryDrawing Brush="Red" Geometry="M0,10 L 0,0 10,0 10,1 1,1 1,10Z">
                            </GeometryDrawing>
                        </DrawingGroup>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Rectangle.Fill>
        </Rectangle>



    </Grid>

</Window>

   
    
    
    
    
    
    
     


Use Grid to layout a Calendar


   
       

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      WindowTitle="Complex Grid Example">
    <Border BorderBrush="Black">

        <Grid ShowGridLines="false" Background="White">

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


            <Rectangle Grid.ColumnSpan="7" Fill="#73B2F5"/>
            <Rectangle Grid.Row="1" Grid.RowSpan="6"  Fill="#73B2F5"/>
            <Rectangle Grid.Column="6" Grid.Row="1" Grid.RowSpan="6" Fill="#73B2F5"/>
            <Rectangle Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="5" Grid.RowSpan="6" Fill="#efefef"/>

            <TextBlock Grid.ColumnSpan="7" Margin="0,5,0,5" HorizontalAlignment="Center">
        Month 2004
            </TextBlock>
            <Rectangle Grid.Row="1" Grid.ColumnSpan="7" Fill="Black" RadiusX="1" RadiusY="1" Height="2" Margin="0,20,0,0"/>
            <TextBlock Grid.Column="0" >Sun</TextBlock>
            <TextBlock Grid.Column="1" >Mon</TextBlock>
            <TextBlock Grid.Column="2" >Tue</TextBlock>
            <TextBlock Grid.Column="3" >Wed</TextBlock>
            <TextBlock Grid.Column="4" >Thu</TextBlock>
            <TextBlock Grid.Column="5" >Fri</TextBlock>
            <TextBlock Grid.Column="6" >Sat</TextBlock>

            <TextBlock Grid.Column="4" Grid.Row="2">1</TextBlock>
            <TextBlock Grid.Column="5" Grid.Row="2">2</TextBlock>
            <TextBlock Grid.Column="6" Grid.Row="2">3</TextBlock>
            <TextBlock Grid.Column="0" Grid.Row="3">4</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="3">5</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="3">6</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="3">7</TextBlock>
            <TextBlock Grid.Column="4" Grid.Row="3">8</TextBlock>
            <TextBlock Grid.Column="5" Grid.Row="3">9</TextBlock>
            <TextBlock Grid.Column="6" Grid.Row="3">10</TextBlock>
            <TextBlock Grid.Column="0" Grid.Row="4">11</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="4">12</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="4">13</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="4">14</TextBlock>
            <TextBlock Grid.Column="4" Grid.Row="4">15</TextBlock>
            <TextBlock Grid.Column="5" Grid.Row="4">16</TextBlock>
            <TextBlock Grid.Column="6" Grid.Row="4">17</TextBlock>
            <TextBlock Grid.Column="0" Grid.Row="5">18</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="5">19</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="5">20</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="5">21</TextBlock>
            <TextBlock Grid.Column="4" Grid.Row="5">22</TextBlock>
            <TextBlock Grid.Column="5" Grid.Row="5">23</TextBlock>
            <TextBlock Grid.Column="6" Grid.Row="5">24</TextBlock>
            <TextBlock Grid.Column="0" Grid.Row="6">25</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="6">26</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="6">27</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="6">28</TextBlock>
            <TextBlock Grid.Column="4" Grid.Row="6">29</TextBlock>
            <TextBlock Grid.Column="5" Grid.Row="6">30</TextBlock>
            <TextBlock Grid.Column="6" Grid.Row="6">31</TextBlock>
        </Grid>
    </Border>
</Page>

   
    
    
    
    
    
    
     


Simple Grid.xaml


   
       
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="100*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="33*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="67*" />
    </Grid.ColumnDefinitions>

    <Button Content="Button No. 1" Grid.Row="0" Grid.Column="0" />
    <Button Content="Button No. 2" Grid.Row="1" Grid.Column="0" />
    <Button Content="Button No. 3" Grid.Row="2" Grid.Column="0" />

    <GridSplitter HorizontalAlignment="Center" Width="6"
                  Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" />

    <Button Content="Button No. 4" Grid.Row="0" Grid.Column="2" />
    <Button Content="Button No. 5" Grid.Row="1" Grid.Column="2" />
    <Button Content="Button No. 6" Grid.Row="2" Grid.Column="2" />
 
</Grid>

   
    
    
    
    
    
    
     


Bind to Grid Width and Height


   
       

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Name="grid">
    <StackPanel Orientation="Horizontal"
                HorizontalAlignment="Center"
                VerticalAlignment="Center">
        <TextBlock Text="{Binding ElementName=grid, Path=ActualWidth}" />
        <TextBlock Text=" &amp;#x00D7; " />
        <TextBlock Text="{Binding ElementName=grid, Path=ActualHeight}" />
        <TextBlock Text=" device independent units" />
    </StackPanel>
</Grid>

   
    
    
    
    
    
    
     


Grid With Splitter


   
       
<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="FunWithPanels" Height="191" Width="436">
  <Grid Background ="AliceBlue">

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width ="Auto"/>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    
    <Label Name="lblLeft" Background ="GreenYellow" Grid.Column="0" Content ="Left!"/>
    <GridSplitter Grid.Column ="0" Width ="5"/>
    <Label Name="lblRight" Grid.Column ="1" Content ="Right!"/>
  </Grid>
</Window>