Grid control WPF in VB.NET

Here we see how to create Grid control and also explains the basic use of Grid properties in xaml.
  • 5001
 

Here we see how to create Grid control and also explain the basic use of Grid properties in xaml.

Grid control

The Grid control contains row and columns as a table in HTML. It is also called the layout control. It supports arranging controls in multi-row and multi-column layouts.

Creating Grid control in XAML

<Grid x:Name="LayoutRoot" Background="White" Width="450" ShowGridLines="True"></Grid>

The Width and Height property represents the width and the height of the control. Name property represents name of the control.

Important Property

ColumnDefinitions - ColumnDefinitions collections is used to specify number of columns in Grid control.

ShowGridLines - ShowGridLines="True" This indicates that the grid lines will be visible. You can always set this property to False if you want to hide the grid lines.

Column Width, and Row Height

To provide the most flexibility, Grid columns and rows are sized by GridLength objects which use the GridUnitType, which in turn allows you to choose among:

Auto (size based on the size properties of the object being placed in the grid).
Pixel (size in pixels).
Star (size based on a weighted proportion of the available space).

For example

The following example explains how to use a Grid and how to create rows and columns:

XAML code

<Window x:Class="MainWindow"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="MainWindow" Height="350" Width="525">

    <Grid x:Name="LayoutRoot" Background="White" Width="400" >

        <Grid.RowDefinitions>

            <RowDefinition Height="81"></RowDefinition>

            <RowDefinition Height="101"></RowDefinition>

            <RowDefinition Height="118*"></RowDefinition>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="100"></ColumnDefinition>

            <ColumnDefinition Width="100"></ColumnDefinition>

            <ColumnDefinition Width="109*"></ColumnDefinition>

            <ColumnDefinition Width="114"></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <Image Height="86" HorizontalAlignment="Left" Margin="19,11,0,0" Name="Image1" Stretch="Fill" VerticalAlignment="Top" Width="65" Grid.Column="1" Grid.Row="2" Source="/WpfApplication70;component/Images/file1.jpg" />

        <TextBox Height="23" HorizontalAlignment="Left" Margin="12,30,0,0" Name="TextBox1" VerticalAlignment="Top" Width="75" Text="TextBox" />

        <Rectangle Height="53" HorizontalAlignment="Left" Margin="22,19,0,0" Name="Rectangle1" Stroke="Black" VerticalAlignment="Top" Width="65" Grid.Column="3" Grid.Row="1">

            <Rectangle.Fill>

                <ImageBrush ImageSource="/WpfApplication70;component/Images/image1.jpg.gif" />

            </Rectangle.Fill>

        </Rectangle>

    </Grid>

</Window>

Now run the application without ShowGridLines property.

g1.gif

Figure1.gif

Now run the application with ShowGridLines property.

ShowGridLines="True"

g2.gif

Figure2.gif

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.