C# - WPF Grid Example with ColumnSpan

What is XAML?

XAML, which stands for eXtensible Application Markup Language, XAML is very much like HTML on steroids; that is, you can not only use it as a simple markup language, but you can add a great deal of declarative functionality as well and we're going to see how that works and what that means as we explore XAML.

C# Grid Rows and Columns in WPF

In the previous wpf article you learned about what is WPF, what are the benefits of using WPF in C# and WPF Sample Application for absolute beginners. Now moving to the next step working with WPF controls. In this tutorial we will learn how to work with WPF Grid Control, Grid.RowDefinitions, Grid.ColumnDefinitions and Grid.ColumnSpan. The following wpf example demonstrate all about wpf grid layout in C#. Find the below XAML code :

WPF Example 1 - wpf gridview rows

<Window x:Class="LayoutWithGrids.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="MainWindow" Height="350" Width="625">

    <Grid>

      <Grid.RowDefinitions>

         <RowDefinition Height="*" />

         <RowDefinition />

         <RowDefinition Height="2*" />

         <RowDefinition Height="2*" />

         <RowDefinition Height="Auto" />

         <RowDefinition Height="*" />

      </Grid.RowDefinitions>

      <Grid.ColumnDefinitions>

         <ColumnDefinition Width="*" />

         <ColumnDefinition Width="2*" />

      </Grid.ColumnDefinitions>

         <Rectangle Fill="Red"

                 Grid.Row="0" />

      <Rectangle Fill="Orange"

                 Grid.Row="0"

                 Grid.Column="1"/>

      <Rectangle Fill="Yellow"

                 Grid.Row="1" />

      <Rectangle Fill="Green"

                 Grid.Row="1"

                 Grid.Column="1"/>

      <Rectangle Fill="Blue"

                 Grid.Row="2" />

      <Rectangle Fill="Indigo"

                 Grid.Row="2"

                 Grid.Column="1"/>

      <Rectangle Fill="Violet"

                 Grid.Row="3" />

      <Rectangle Fill="Black"

                 Grid.Row="3"

                 Grid.Column="1" />

      <Label Content="Working with Grid Rows and Columns using Rectangles"

             FontSize="24"

             Grid.Row="4"

             Grid.ColumnSpan="2"/>

      <Rectangle Fill="Wheat"

                 Grid.Row="5" />

      <Rectangle Fill="Purple"

                 Grid.Row="5"

                 Grid.Column="1" /> 

   </Grid>

</Window>

Download Code

 Demo

Wpf  Example 2 - Grid Rows and Columns Demo

I hope you will enjoy the development tips while programming with WPF in C#. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome. 

Also If you like this article, don't forget to share this article with your friends and colleagues.