Post
Ask Question

Grid Panel In WPF

Introduction 

 
We all are surrounded by a grid-like structure.
 
A most popular example of a grid is the relational database. Data is divided into rows & columns.
 
Grids are so powerful that they not only used for storing data but displaying data.
 
Grid panel is WPF's one of the widely used panel.
 
To give you an idea, this is what the grid looks like:
 
Grid Panel In WPF
 
It consists of columns & rows.
 
Let's create one grid in WPF, and let's design a user registration form. Each field is occupied by one row-column combination.
 
Our final output would look something like this:
 
Grid Panel In WPF
Our page consists of 4 labels, 4 TextBoxs, 1 button & one TextBlock which displays a message when the user is successfully registered.
 
Our Grid is consist of 6 Rows & 2 Columns which are defined inside a RowDefinations & ColumnDefinations tag.
 
The rows can be defined with height and columns with width in the following three ways:
  • Fixed value: To assign a fixed size to element in pixels.
  • Auto: It will take up the default space of a control W.R.T. to height and width respectively for row/column.
  • Star (*): It will take the remaining space when Auto and fixed-sized are filled. 
  1. <Grid x:Name="MainPanel">    
  2.        <Grid.RowDefinitions>    
  3.            <RowDefinition Height="Auto"/>    
  4.            <RowDefinition Height="Auto"/>    
  5.            <RowDefinition Height="Auto"/>    
  6.            <RowDefinition Height="Auto"/>    
  7.            <RowDefinition Height="Auto"/>    
  8.            <RowDefinition Height="5*"/>    
  9.        </Grid.RowDefinitions>    
  10.        <Grid.ColumnDefinitions>    
  11.            <ColumnDefinition Width="Auto"/>    
  12.            <ColumnDefinition Width="Auto"/>    
  13.        </Grid.ColumnDefinitions>    
  14. </Grid>     
Let's add first left-most label: User Name 
  1. <Label x:Name="LabelUserName"        
  2.    Content="User Name:"    
  3. Margin="0 10 0 0"/>     
Let's add another label: Password 
  1. <Label x:Name="LabelPassword"         
  2.                Content="Password:"        
  3.                Grid.Row="1"/>     
User Name lies on 1st row & Password on 2nd row.
 
We have set Grid.Row property of password to 1 but it is on 2nd row, This is possible because the Index of column & rows starts with 0 & also notice that we did not even set Grid.Row property for our UserName label, this is because  by default, a Grid panel is created with one row and one column so Grid.Row = 0 & Grid.Column = 0 are default. 
 
In the same way, let's see how can we set Column properties for TextBox UserName & Password:
  1. <TextBox x:Name="TextBoxUserName"      
  2.                  Text="{Binding UserName}"    
  3.                  Height="20"        
  4.                  Width="150"       
  5.                  Margin="0 10 0 0"     
  6.                  Grid.Column="1"/>    
  7.         <PasswordBox  x:Name="TextBoxPassword"        
  8.                  Height="20"        
  9.                  Width="150"        
  10.                  Grid.Column="1"        
  11.                  Grid.Row="1"/>     
What if you want to merge 2 columns?
 
We can use ColumnSpan property, then specify the number of columns you wish to merge. For row, there is RowSpan property.
  1. <Button x:Name="ButtonLogin"        
  2.              Height="20"        
  3.              Width="100"        
  4.              Content="Register"        
  5.              HorizontalAlignment="Center"        
  6.              Margin="20 10 0 0"      
  7.              Command="{Binding RegisterButtonClicked}"    
  8.              Grid.Row="4"        
  9.              Grid.ColumnSpan="2"/>    
Let's have a look at complete XAML:
  1. <Window x:Class="A.MainWindow"    
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  3.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    
  4.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.         mc:Ignorable="d"    
  7.         Title="MainWindow" Height="220" Width="350">    
  8.     <Window.Resources>    
  9.         <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>    
  10.     </Window.Resources>    
  11.      <Grid>    
  12.         <Grid.RowDefinitions>    
  13.             <RowDefinition Height="Auto"/>    
  14.             <RowDefinition Height="Auto"/>    
  15.             <RowDefinition Height="Auto"/>    
  16.             <RowDefinition Height="Auto"/>    
  17.             <RowDefinition Height="Auto"/>    
  18.             <RowDefinition Height="5*"/>    
  19.         </Grid.RowDefinitions>    
  20.         <Grid.ColumnDefinitions>    
  21.             <ColumnDefinition Width="Auto"/>    
  22.             <ColumnDefinition Width="Auto"/>    
  23.         </Grid.ColumnDefinitions>    
  24.         <Label x:Name="LabelUserName"        
  25.                Content="User Name:"    
  26.                Margin="0 10 0 0"/>    
  27.         <Label x:Name="LabelPassword"         
  28.                Content="Password:"        
  29.                Grid.Row="1"/>    
  30.         <Label x:Name="LabelConfirmPassword"         
  31.                Content="Confirm Password:"        
  32.                Grid.Row="2"/>    
  33.         <Label x:Name="LabelEmailId"         
  34.                Content="Email:"        
  35.                Grid.Row="3"/>    
  36.              
  37.         <TextBox x:Name="TextBoxUserName"      
  38.                  Text="{Binding UserName}"    
  39.                  Height="20"        
  40.                  Width="150"       
  41.                  Margin="0 10 0 0"     
  42.                  Grid.Column="1"/>    
  43.         <PasswordBox  x:Name="TextBoxPassword"        
  44.                  Height="20"        
  45.                  Width="150"        
  46.                  Grid.Column="1"        
  47.                  Grid.Row="1"/>    
  48.         <PasswordBox x:Name="TextBoxConfirmPassword"        
  49.                  Height="20"        
  50.                  Width="150"        
  51.                  Grid.Column="1"        
  52.                  Grid.Row="2"/>    
  53.         <TextBox x:Name="TextBoxEmail"        
  54.                  Height="20"        
  55.                  Width="150"        
  56.                  Grid.Column="1"        
  57.                  Grid.Row="3"/>    
  58.              
  59.         <Button x:Name="ButtonLogin"        
  60.                 Height="20"        
  61.                 Width="100"        
  62.                 Content="Register"        
  63.                 HorizontalAlignment="Center"        
  64.                 Margin="20 10 0 0"      
  65.                 Command="{Binding RegisterButtonClicked}"    
  66.                 Grid.Row="4"        
  67.                 Grid.ColumnSpan="2"/>    
  68.     
  69.         <TextBlock x:Name="TextBlockMessage"    
  70.                    Visibility="{Binding IsButtonClicked, Converter={StaticResource BooleanToVisibilityConverter}}"    
  71.                    Text="{Binding UserName, StringFormat='User: {0} is successfully registered!'}"    
  72.                    HorizontalAlignment="Center"    
  73.                    Margin="20 8 0 0"      
  74.                    Grid.Row="5"    
  75.                    Grid.ColumnSpan="2"/>    
  76.     </Grid>    
  77. </Window>     
We have command bound on RegisterButton. Therefore, we need some C# code as well:
  1. using Prism.Commands;  
  2. using Prism.Mvvm;  
  3.   
  4. namespace A  
  5. {  
  6.     class MainWindowViewModel : BindableBase  
  7.     {  
  8.         #region Properties  
  9.         private bool _isButtonClicked;  
  10.   
  11.         public bool IsButtonClicked  
  12.         {  
  13.             get { return _isButtonClicked; }  
  14.             set { SetProperty(ref _isButtonClicked , value); }  
  15.         }  
  16.   
  17.   
  18.         private string _userName;  
  19.   
  20.         public string UserName  
  21.         {  
  22.             get { return _userName; }  
  23.             set { SetProperty(ref _userName, value); }  
  24.         }  
  25.   
  26.         public DelegateCommand<object> RegisterButtonClicked { get; set; }  
  27.         #endregion  
  28.  
  29.         #region Constructor  
  30.         public MainWindowViewModel()  
  31.         {  
  32.             RegisterButtonClicked = new DelegateCommand<object>(RegisterUser);  
  33.         }  
  34.  
  35.         #endregion  
  36.   
  37.         private void RegisterUser(object obj)  
  38.         {  
  39.             IsButtonClicked = true;  
  40.         }  
  41.     }  
  42. } 
Let's see how it looks.
 
Grid Panel In WPF
 
Perfect!
 

Conclusion

 
Grid is used when you want to arrange elements in a tabular form.
 
Grid is simple to understand & easy to use.
 
If you have any doubt or just wish to connect, Contact me @
As always, Happy Coding!


Similar Articles