UniformGrid In WPF

This article show how to use UniformGrid in WPF(Windows Presentation Foundation).

UniformGrid has a namespace System.Windows.Controls.Primitives. A good thing in UniformGrid is it displays child elements in columns and rows of the same size. The order of the elements is given by the order in which they have been added.

Here is a simple example --  a UniformGrid has two rows and two columns with four Image controls.

  1. <UniformGrid Columns="2" Rows="2" Name="uniformGrid1">  
  2.     <Image Source="ais176v.jpg"></Image>  
  3.     <Image Source="ais176v.jpg"></Image>  
  4.     <Image Source="ais176v.jpg"></Image>  
  5.     <Image Source="ais176v.jpg"></Image>  
  6. </UniformGrid>  

The result looks like this.

UniformGrid Result

If I add one more Image control then you will see that image at design time but it will not be visible at run-time.

  1. <UniformGrid Columns="2" Rows="2" Name="uniformGrid1">  
  2.     <Image Source="ais176v.jpg"></Image>  
  3.     <Image Source="ais176v.jpg"></Image>  
  4.     <Image Source="ais176v.jpg"></Image>  
  5.     <Image Source="ais176v.jpg"></Image>  
  6.     <Image Source="ais176v.jpg"></Image>  
  7. </UniformGrid>  

 UniformGrid Result

If you want to display all five images, you will have to add one more row to the grid, like this :

  1. <UniformGrid Columns="2" Rows="3" Name="uniformGrid1">  
  2.     <Image Source="ais176v.jpg"></Image>  
  3.     <Image Source="ais176v.jpg"></Image>  
  4.     <Image Source="ais176v.jpg"></Image>  
  5.     <Image Source="ais176v.jpg"></Image>  
  6.     <Image Source="ais176v.jpg"></Image>  
  7. </UniformGrid>  

UniformGrid Result

It's a cool control.