.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
david stephan
Gaurav Pal

Home >> Articles >> WPF >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Grid Panel in WPF ( Windows Presentation Foundation )

Posted By:Karthikeyan Anbarasan       Posted Date: May 15, 2013    Points: 200    Category: WPF    URL: http://www.dotnetspark.com  

In this article we will see how to use the Grid Panel which is very much important as it acts as the base panel in any application development that is targeting the Windows Presentation Framework XAML coding


In this article we are going to see how to use the Grid Panel in Windows Presentation Foundation application development. In our earlier tutorial we have seen how to use the Gridview control effectively with option to customize by placing the Gridview element inside a Listview control. Grid Panel is mostly used as the base panel when compared to the other Panels that are available with Windows Presentation Foundation as this panel is versatile and most comfortable to place containers and controls inside to effectively align and use it across in complex application development. When a project is created by default we can see the Grid element is embedded in the MainPage.XAML file which is the panel we will be using it across in all the pages as the base panel. Let us see the steps on how to use this control effectively in real time in Windows Presentation Foundation Application development.


Open Visual Studio 2012 IDE in administrator mode and select File --> New project and select a Windows Presentation Foundation template with a valid project name as shown in the screen below. 

Click on ok and it will create the project and the solution with the default files and folders as shown in the screen below. In MainPage.XAML page we can see by default some code will be generated which are basically required to run the application and which acts as the namespace. Also we can see a default code of Grid element that is generated which is going to be the base panel for our application development as shown in the screen below.


In this base page we can see Grid element which has 3 main properties as RowDefinitions, ColumnDefinitions, and ShowGridLines. The RowDefinitions property is nothing but a collection of RowDefintion. The ColumnDefinitions property is a collection of ColumnDefinition objects. The last property which is ShowGridLines property represents if grid lines of a Grid panel are visible or not. Now let us write some code which creates the Grid element with some of the base properties that are applied as shown in the screen below.

XAML Code:

<Window x:Class="GridSample.MainWindow"
   Title="MainWindow" Height="350" Width="525">
  <Grid x:Name="BaseGrid" Width="500">
  <ColumnDefinition />
  <ColumnDefinition />
  <ColumnDefinition />
  <ColumnDefinition />

  <RowDefinition Height="45" />
  <RowDefinition Height="45" />
  <RowDefinition Height="45" />
  <RowDefinition Height="45" />

  <TextBlock FontSize="14" FontWeight="Bold" Grid.Row="0" Grid.Column="0" Foreground="Red"
   Text="Name" Height="20" VerticalAlignment="Top"  />
  <TextBlock FontSize="14" FontWeight="Bold" Grid.Row="0" Grid.Column="1" Foreground="Red"
    Text="Age" Height="20" VerticalAlignment="Top" />
  <TextBlock FontSize="14" FontWeight="Bold" Grid.Row="0" Grid.Column="2" Foreground="Red"
   Text="Gender" Height="20" VerticalAlignment="Top"/>

  <TextBlock FontSize="12" Grid.Row="1" Grid.Column="0">Karthikeyan</TextBlock>
  <TextBlock FontSize="12" Grid.Row="1" Grid.Column="1">25</TextBlock>
  <TextBlock FontSize="12" Grid.Row="1" Grid.Column="2">Male</TextBlock>
  <TextBlock FontSize="12" Grid.Row="2" Grid.Column="0">Neha</TextBlock>
  <TextBlock FontSize="12" Grid.Row="2" Grid.Column="1">22</TextBlock>
  <TextBlock FontSize="12" Grid.Row="2" Grid.Column="2">Female</TextBlock>
  <TextBlock FontSize="12" Grid.Row="3" Grid.Column="0">Arun</TextBlock>
  <TextBlock FontSize="12" Grid.Row="3" Grid.Column="1">24</TextBlock>
  <TextBlock FontSize="12" Grid.Row="3" Grid.Column="2">Male</TextBlock>


We can see the sample output available in the designer view itself which shows the aligned data that is added static. Here in the code we have created the ColumnDefinition and RowDefinition properties and applied the data using the TextBlock which is where we can customize it as per our requirement. Now run the application by simply pressing F5 directly from the keyboard and we can see the application is executed and loaded as a WPF standalone application as shown in the screen below.


So in this article we have seen how to use the Grid Panel which is very much important as it acts as the base panel in any application development that is targeting the Windows Presentation Framework XAML coding.

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend