C# WPF Tutorial – Grid Control

By
Junaid
-
0
723
C# WPF Tutorial – Gridview

The WPF Grid control is a layout panel that arranges its child controls in a tabular structure of rows and columns. It allows you to align controls in a flexible and customizable manner, and to resize controls at runtime. The Grid control is very powerful and can be used in many different scenarios to create advanced user interfaces.

The WPF Grid control can be used in many different scenarios to create advanced user interfaces. Some common use cases for Grid control include:

  • Creating a layout with multiple rows and columns
  • Aligning controls in a flexible and customizable manner
  • Resizing controls at runtime
  • Creating grid-based games or other interactive applications
  • Building complex user interfaces with multiple components and controls

The Grid control is a very powerful and versatile layout panel and can be used in a wide range of applications to create user interfaces that are both functional and attractive.

Here is an example of how to use the WPF Grid control in XAML:

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

  <Button Grid.Column="0" Grid.Row="0" Content="Button 1" />
  <Button Grid.Column="1" Grid.Row="0" Content="Button 2" />
  <TextBlock Grid.Column="0" Grid.Row="1" Text="Some text" />
</Grid>

This code creates a Grid with two columns and two rows. It then places two buttons in the first row and a text block in the second row. The column and row definitions define the size of each cell in the grid, and Grid.Column and Grid.Row attached properties are used to specify the position of each control within the grid.

C# WPF Tutorial – Gridview example

Another Example:
<Grid>
   <Grid.RowDefinitions>
      <RowDefinition />
      <RowDefinition />
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition />
   </Grid.ColumnDefinitions>

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

This code creates a Grid with two rows and two columns, and places four buttons in the grid, each in a different cell. The Grid.Row and Grid.Column attached properties are used to specify the row and column for each button.

You can also use the Grid.RowSpan and Grid.ColumnSpan attached properties to make a control span multiple rows or columns, if needed. For example:

<Button Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Content="Button 1" />

This code creates a button that spans both rows and columns, occupying the entire grid.

Here is an example of how to use the WPF Grid control in C# code:

Grid grid = new Grid();

// Create the row definitions
RowDefinition row1 = new RowDefinition();
RowDefinition row2 = new RowDefinition();
grid.RowDefinitions.Add(row1);
grid.RowDefinitions.Add(row2);

// Create the column definitions
ColumnDefinition col1 = new ColumnDefinition();
ColumnDefinition col2 = new ColumnDefinition();
grid.ColumnDefinitions.Add(col1);
grid.ColumnDefinitions.Add(col2);

// Create the buttons
Button button1 = new Button();
button1.Content = "Button 1";
Grid.SetRow(button1, 0);
Grid.SetColumn(button1, 0);
grid.Children.Add(button1);

Button button2 = new Button();
button2.Content = "Button 2";
Grid.SetRow(button2, 0);
Grid.SetColumn(button2, 1);
grid.Children.Add(button2);

Button button3 = new Button();
button3.Content = "Button 3";
Grid.SetRow(button3, 1);
Grid.SetColumn(button3, 0);
grid.Children.Add(button3);

Button button4 = new Button();
button4.Content = "Button 4";
Grid.SetRow(button4, 1);
Grid.SetColumn(button4, 1);
grid.Children.Add(button4);

This code creates a Grid with two rows and two columns, and adds four buttons to the grid in the appropriate cells. The Grid.SetRow and Grid.SetColumn methods are used to specify the row and column for each button.

You can also use the Grid.SetRowSpan and Grid.SetColumnSpan methods to make a control span multiple rows or columns, if needed. For example:

Button button1 = new Button();
button1.Content = "Button 1";
Grid.SetRow(button1, 0);
Grid.SetColumn(button1, 0);
Grid.SetRowSpan(button1, 2);
Grid.SetColumnSpan(button1, 2);
grid.Children.Add(button1);

This code creates a button that spans both rows and columns, occupying the entire grid.