WPF GridView Control

Grid is known as the powerful and useful layout control in the WPF. With the help of the grid, we can arrange the child element in the cells. The grid contains the columns and rows. Visual Studio will automatically add the grid as the first container in the window element when we add the new XAML document or when we create the new WPF project.

Grid Panel provides us a flexible area containing the rows and columns. We can arrange the child elements in a Grid in the form of the table. We can add the element in any row or column by using the grid .row and Grid.column properties.

Grid always contains the one row and one column by default. By using the ColumnDefinition and RowDefinition properties, we can add multiple rows and multiple columns.

The Functionality of the grid is just like the HTML table, but the grid is more flexible.

We can define the height of the rows and width of the column in three ways:

Fixed Value: We use fix value to assign the size of the logical unit.
Auto: Auto will acquire the space required for the control in the specific column and rows.
Star(*): Star will acquire the remaining space after the Auto and Fixed Size are filled.

Now we will write a code to define the Grid which is having the width and height of the column in the above three ways:

MainWindow.XAML

  <Window x:Class=”WPFGridControl.MainWindow”          xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”          xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”          xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″          xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″          xmlns:local=”clr-namespace:WPFGridControl”          mc:Ignorable=”d”          Title=”MainWindow” Height=”450″ Width=”800″>      <Grid>          <Grid.RowDefinitions>              <RowDefinition Height=”Auto” />              <RowDefinition Height=”Auto” />              <RowDefinition Height=”*” />              <RowDefinition Height=”28″ />          </Grid.RowDefinitions>          <Grid.ColumnDefinitions>              <ColumnDefinition Width=”Auto” />              <ColumnDefinition Width=”200″ />          </Grid.ColumnDefinitions>          <Label Grid.Row=”0″ Grid.Column=”0″ Content=”Name:”/>          <Label Grid.Row=”1″ Grid.Column=”0″ Content=”E-Mail:”/>          <Label Grid.Row=”2″ Grid.Column=”0″ Content=”Comment:”/>          <TextBox Grid.Column=”1″ Grid.Row=”0″ Margin=”3″ />          <TextBox Grid.Column=”1″ Grid.Row=”1″ Margin=”3″ />          <TextBox Grid.Column=”1″ Grid.Row=”2″ Margin=”3″ />          <Button Grid.Column=”1″ Grid.Row=”3″ HorizontalAlignment=”Right”               MinWidth=”80″ Margin=”3″ Content=”Send”  />        </Grid>  </Window>  

The output of the above code in the form of the grid will look like as shown in the below screenshot:

OUTPUT

Resize the Columns and Rows

WPF provides the control, which is called GridSplitter. GridSplitter will change its size automatically when we change the size upto the next and previous cell. For that we will set the ResizeBehaviour to the PreviousAndNext. Splitter knows the resize direction according to the ratio between the height and width. We can also manually set the Resize direction, depends on the columns and rows.

To resize the column and rows, we will write the following code:

MainWindow.XAML

  <Window x:Class=”WPFGridControl.MainWindow”          xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”          xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”          xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″          xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″          xmlns:local=”clr-namespace:WPFGridControl”          mc:Ignorable=”d”          Title=”MainWindow” Height=”450″ Width=”800″>      <Grid>          <Grid.ColumnDefinitions>              <ColumnDefinition Width=”*”/>              <ColumnDefinition Width=”Auto”/>              <ColumnDefinition Width=”*”/>          </Grid.ColumnDefinitions>          <Label Content=”Left” Grid.Column=”0″ />          <GridSplitter HorizontalAlignment=”Right”                     VerticalAlignment=”Stretch”                     Grid.Column=”1″ ResizeBehavior=”PreviousAndNext”                    Width=”5″ Background=”#FFBCBCBC”/>          <Label Content=”Right” Grid.Column=”2″ />        </Grid>  </Window>  

The output of the above code is shown in the below screenshot:

OUTPUT

Another example of Grid Layout

Now we will show how to add the child element to the grid to specify it in the tabular form.

Now we will add the Text Block in the first column and the textbox in the second column of the grid by using the XAML implementation.

MainWindow.XAML

  <Window x:Class=”WPFGridControl.MainWindow”          xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”          xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”          xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″          xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″          xmlns:local=”clr-namespace:WPFGridControl”          mc:Ignorable=”d”          Title=”MainWindow” Height=”450″ Width=”800″>      <Grid x:Name = “FormLayoutGrid” Background = “AliceBlue”>          <Grid.ColumnDefinitions>              <ColumnDefinition Width = “Auto” />              <ColumnDefinition />          </Grid.ColumnDefinitions>            <Grid.RowDefinitions>              <RowDefinition Height = “*” />              <RowDefinition Height = “*” />              <RowDefinition Height = “*” />          </Grid.RowDefinitions>            <TextBlock Grid.Row = “0” Grid.Column = “0” Text = “Name” Margin = “10”             HorizontalAlignment = “Left” VerticalAlignment = “Center” Width = “100” />          <TextBox Grid.Row = “0” Grid.Column = “1” Margin = “10” />          <TextBlock Grid.Row = “1” Grid.Column = “0” Text = “ID” Margin = “10”             HorizontalAlignment = “Left” VerticalAlignment = “Center” Width = “100” />          <TextBox Grid.Row = “1” Grid.Column = “1” Margin = “10” />          <TextBlock Grid.Row = “2” Grid.Column = “0” Text = “Age” Margin = “10”             HorizontalAlignment = “Left” VerticalAlignment = “Center” Width = “100” />          <TextBox Grid.Row = “2” Grid.Column = “1” Margin = “10” />      </Grid>    </Window>  

The output of the above code is shown below:

OutPut

Next TopicWPF Image Control

features of wpf what is wpf wpf wpf border wpf canvas wpf controls wpf groupbox wpf imagesource wpf listbox wpf richtextbox wpf timer wpf treeview wpf viewbox wpf vs winforms wpf xaml

WPF GridView Control

WPF GridView Control

Resize the Columns and Rows

Another example of Grid Layout

MainWindow.XAML

How to Install WordPress

CDATA PCDATA

You may also like