WPF Grid Using VB.NET

Grid Control In WPF, Grid in VB.NET, VB.NET, VB.NET tutorials, WPF Control
  • 8104

Introduction

Here we talking about the Grid in WPF. The Grid is a layout panel that arranges its child elements or controls in tabular structure of rows and columns. We can resize it easily by the help of VerticalAlignment and HorizontalAlignment property. Its functionality is more flexible than the HTML table. A column can contain different or multiple controls. Grid is very useful in .NET because when we create a tabular structure and want to add multiple controls in it then we uses Grid control.Automatically generates columns according to the public properties of your data objects by using of AutoGenrateColumn Property. Data Grid provides this feature. When we create Grid on our page the code in XAML look like this.

Code

<Grid Height="289" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Grid1" VerticalAlignment="Top" Width="481" >
<
/Grid>

Defining the Rows and Columns 

The Grid has one row and one column by default. If we want to add more columns and rows thenwe have to add RowDefinition items to the RowDefinitions collection and ColumnDefinition items to the ColumnDefinitions collection. By these ColumDefinition and RowDefinition property we can give the columns and rows. when we add the rows and columns in Grid Then code in XAML will look like this.

property window

We can see these properties in this property window.

img1.png

 

 Code

<Grid Visibility="Visible" IsHitTestVisible="True">
<
Grid Height="289" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Grid1"VerticalAlignment="Top" Width="481" />
<
Grid.RowDefinitions>
<
RowDefinition Height="83"></RowDefinition>
<
RowDefinition Height="105"></RowDefinition>
<
RowDefinition Height="117*"></RowDefinition>
</
Grid.RowDefinitions>
<
Grid.ColumnDefinitions>
<
ColumnDefinition Width="101"></ColumnDefinition>
<
ColumnDefinition Width="102"></ColumnDefinition>
<
ColumnDefinition Width="105"></ColumnDefinition>
<
ColumnDefinition Width="115"></ColumnDefinition>
</
Grid.ColumnDefinitions>
</Grid>

After adding rows and columns in Grid, Grid will look like this.

img2.png
 

Simple Grid with Multiple controls

There is a Grid which contains multiple controls like button, label and textboxes.

<Grid Visibility="Visible" IsHitTestVisible="True">
<
Grid Height="289" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Grid1" VerticalAlignment="Top" Width="481">
<
Label Content="EMP ID" Height="28" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Label1"VerticalAlignment="Top" ContentStringFormat="" Width="70" />
</
Grid>
<
Label Height="28" HorizontalAlignment="Left" Margin="20,36,0,0" Name="Label2" VerticalAlignment="Top" Grid.Row="1"Width="70" Content="EMP NAME" />
<
Label Content="EMP ADD" Height="28" HorizontalAlignment="Left" Margin="20,39,0,0" Name="Label3"VerticalAlignment="Top" Grid.Row="2" Width="70" />
<
TextBox Height="23" HorizontalAlignment="Left" Margin="13,25,0,0" Name="TextBox1" VerticalAlignment="Top"Width="120" Grid.Column="1" Background="#FFEFB5B5" />
<
TextBox Height="23" HorizontalAlignment="Left" Margin="13,36,0,0" Name="TextBox2" VerticalAlignment="Top"Width="120" Grid.Column="1" Grid.Row="1" Background="#FFCFE8FF" />
<
TextBox Height="23" HorizontalAlignment="Left" Margin="13,44,0,0" Name="TextBox3" VerticalAlignment="Top"Width="120" Grid.Column="1" Grid.Row="2" Background="#FFC0F2C0" />
<
Button Content="SUBMIT" Height="34" HorizontalAlignment="Left" Margin="42,127,0,0" Name="Button1"VerticalAlignment="Top" Width="75" Grid.Column="2" Grid.Row="2" />

The output will look this

diffcntrlbtn.png
 

Auto generated columns

Automatically generates columns according to the public properties of your data objects by using of AutoGenrateColumn Property. Data Grid provides this feature. It generates these types of columns.

 

 

  •  Textbox columns for string values.
  •  Checkbox columns for boolean values.
  •  Combobox columns for enumerable values.
  •  Hyperlink columns for Uri values.

 

Resize columns and rows
 
We can resize the columns and rows by the help of GridSplitter. WPF provides this feature. Code will look like this in XAML.

<
Grid Height="257" Name="Grid1" Width="352" >
<
Grid.ColumnDefinitions>
<
ColumnDefinition Width="174*"/>
<
ColumnDefinition Width="Auto"/>
<
ColumnDefinition Width="0*"/>
<
ColumnDefinition Width="173*" />
</
Grid.ColumnDefinitions>
<
Label Content="LEFT SIDE" Margin="12,0,0,0" Background="#FFE7A3A3" />
<
GridSplitter HorizontalAlignment= "Right" VerticalAlignment="Stretch" 
Grid.Column="1" ResizeBehavior="PreviousAndNext"
Width="5" Background="#FFBCBCBC"/>
<Label Content="RIGHT SIDE" Grid.Column="3" Background="#FFB0EDB0" />
</
Grid>

output will look like this.

splitter.png

Categories

More Articles

© 2018 DotNetHeaven. All rights reserved.