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.
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.
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.
Figure 3.
If we add one more Image control.
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.
Figure 5.