In a previous article, we discovered how to define and configure a Grid control using XAML. In this second article, I'll demonstrate how to do the same task using the code behind, I mean using C#.
Walkthrough:
1. To do so, create a new WPF project
Figure1
2. Right click on the window and select view code, then replace the existing code by this one
public partial class Window1 : Window
{
public Window1() {
InitializeComponent();
InitializeGrid();
}
private void InitializeGrid() {
Grid oGrid = new Grid();
oGrid.Width = 200;
oGrid.Height = 200;
oGrid.Background = System.Windows.Media.Brushes.Bisque;
//Set the rows
RowDefinition Row0 = new RowDefinition();
RowDefinition Row1 = new RowDefinition();
RowDefinition Row2 = new RowDefinition();
//Set the columns
ColumnDefinition Col0 = new ColumnDefinition();
ColumnDefinition Col1 = new ColumnDefinition();
ColumnDefinition Col2 = new ColumnDefinition();
//Add the columns and rows to the Grid control
oGrid.ColumnDefinitions.Add(Col0);
oGrid.ColumnDefinitions.Add(Col1);
oGrid.ColumnDefinitions.Add(Col2);
oGrid.RowDefinitions.Add(Row0);
oGrid.RowDefinitions.Add(Row1);
oGrid.RowDefinitions.Add(Row2);
//Show the grid lines
oGrid.ShowGridLines = true;
this.Content = oGrid;
}
}
3. Run the project and observe, a window like this will appear, as you see the grid is visible now
The Star definition
it means that the related size could be expressed as weighted proportion of available space, for example, if a size of a given first row is double of a second given row size, then the first one will receive two units of the entire grid size, meanwhile, the second one will have one unit as size. Rows and columns sizes are expressed by this symbol * that represents a unit of size. To do so using C# code, use this code snippet. It should be copied and pasted within the scope of InitializeGrid().
private void InitializeGrid(){
Grid oGrid = new Grid();
oGrid.Width = 200;
oGrid.Height = 200;
oGrid.Background = System.Windows.Media.Brushes.Bisque;
//Set the rows
RowDefinition Row0 = new RowDefinition();
RowDefinition Row1 = new RowDefinition();
RowDefinition Row2 = new RowDefinition();
//Set the columns
/* This code add the star option to resize the
First row as double of the rest of columns*/
ColumnDefinition Col0 = new ColumnDefinition();
Col0.Width = new GridLength(2, GridUnitType.Star);
ColumnDefinition Col1 = new ColumnDefinition();
ColumnDefinition Col2 = new ColumnDefinition();
//Add the columns and rows to the Grid control
oGrid.ColumnDefinitions.Add(Col0);
oGrid.ColumnDefinitions.Add(Col1);
oGrid.ColumnDefinitions.Add(Col2);
oGrid.RowDefinitions.Add(Row0);
oGrid.RowDefinitions.Add(Row1);
oGrid.RowDefinitions.Add(Row2);
//Show the grid lines
oGrid.ShowGridLines = true;
this.Content = oGrid;
}
Run the project and the result will be
The Pixel definition
It means that the size is defined in terms of pixels such as in the ASP applications. This bellow C# code illustrates how to define a dimension of a given column or row based on pixels.
private void InitializeGrid() {
Grid oGrid = new Grid();
oGrid.Width = 200;
oGrid.Height = 200;
oGrid.Background = System.Windows.Media.Brushes.Bisque;
//Set the rows
RowDefinition Row0 = new RowDefinition();
RowDefinition Row1 = new RowDefinition();
RowDefinition Row2 = new RowDefinition();
//Set the columns
/* This code add the pixel option to resize the
First row as double of the rest of columns*/
ColumnDefinition Col0 = new ColumnDefinition();
Col0.Width = new GridLength(50, GridUnitType.Pixel);
ColumnDefinition Col1 = new ColumnDefinition();
ColumnDefinition Col2 = new ColumnDefinition();
//Add the columns and rows to the Grid control
oGrid.ColumnDefinitions.Add(Col0);
oGrid.ColumnDefinitions.Add(Col1);
oGrid.ColumnDefinitions.Add(Col2);
oGrid.RowDefinitions.Add(Row0);
oGrid.RowDefinitions.Add(Row1);
oGrid.RowDefinitions.Add(Row2);
//Show the grid lines
oGrid.ShowGridLines = true;
this.Content = oGrid;
}
