WPF UniformGrid Control in VB.NET

In this article we will learn how to use UniformGrid Control in WPF using VB.NET.
  • 2259
 
In this article we will learn how to use UniformGrid Control in WPF using VB.NET.

UniformGrid control

The UniformGrid Control arranges content in its area so that all the cells in the grid have the same dimension. It represents a perfect solution if someone prefers to prevent the headache of ordering or arrange controls within an ordinary Grid. The Uniform grid belongs to the System.Windows.Controls. Primitives.

Properties - This control has the following properties.

ug4.gif

Figure 1.

Rows - Rows property are used to set the number of rows that are in the grid.

Columns - Columns property is used to set the number of columns that are in the grid.

Width - Width is used to set the width of the control.

Height - The height is used to set the height of the control.

For example

Here is a simple example a UniformGrid has two rows and three columns with six Image controls.

ug5.gif

Figure 2.

XAML code

<UniformGrid Margin="15,0,135,138" Name="uniformGrid1" Background="Chartreuse" Rows="2" Columns="3" Visibility="Visible">

            <Image Source="/WpfApplication28;component/Images/flowers-image.jpg"  Name="img1" Visibility="Hidden"></Image>

            <Image Source="/WpfApplication28;component/Images/flowers-image1.jpg"  Name="img2" Height="83"></Image>

            <Image Source="/WpfApplication28;component/Images/flowers-image1.jpg"  Name="img3" ></Image>

            <Image Source="/WpfApplication28;component/Images/flowers-image1.jpg"  Name="img4" ></Image>

            <Image Source="/WpfApplication28;component/Images/flowers-image1.jpg"  Name="img5" Height="79"></Image>

            <Image Source="/WpfApplication28;component/Images/flowers-image.jpg"  Name="img6" ></Image>

        </UniformGrid>

If we want that image will see at design time but it will not be visible at run-time. To do that click on the any image and press F4 for property window and set the visible property to hidden of the image.

ug6.gif

Figure 3.

If we add one more Image control.

ug7.gif

Figure 4.

we will have to add one more row to the grid.

XAML code

<UniformGrid Margin="15,0,135,138" Name="uniformGrid1" Background="Chartreuse" Rows="3" Columns="3" Visibility="Visible">

            <Image Source="/WpfApplication28;component/Images/flowers-image.jpg"  Name="img1" Visibility="Hidden"></Image>

            <Image Source="/WpfApplication28;component/Images/flowers-image1.jpg"  Name="img2" Height="83"></Image>

            <Image Source="/WpfApplication28;component/Images/flowers-image1.jpg"  Name="img3" ></Image>

            <Image Source="/WpfApplication28;component/Images/flowers-image1.jpg"  Name="img4" ></Image>

            <Image Source="/WpfApplication28;component/Images/flowers-image1.jpg"  Name="img5" Height="77"></Image>

            <Image Source="/WpfApplication28;component/Images/flowers-image.jpg"  Name="img6" ></Image>

            <Image Height="58" Name="Image1" Source="/WpfApplication28;component/Images/flowers-image1.jpg" />

        </UniformGrid>

The form looks like this.

ug8.gif

Figure 5.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.