Telerik UI for Windows Phone by Progress

The RadUniformGrid control is a layout panel that allows the ordering of items in rows and columns. You can easily specify the row and the column count of the panel, and its children will be ordered accordingly.

This topic will make you familiar with the following:

Creating a RadUniformGrid instance

In order to use the RadUniformGrid control in your Windows Phone 7 applications, you have to add a reference to the following assembly:

  • Telerik.Windows.Controls.Primitives.dll

After adding reference to the aforementioned dll, you can declare a new RadUniformGrid instance as any normal Silverlight control.


To use the RadUniformGrid control in the XAML you have to add the following namespace declaration:

<telerikPrimitives:RadUniformGrid x:Name="radUniformGrid" />

Defining Rows and Columns

Unlike the standard Grid control, when using the RadUniformGrid control, you don't have to define each column separately, you just have to set the number of the desired columns and rows. This is done by setting the NumberOfColumns and the NumberOfRows properties to the desired value.

<telerikPrimitives:RadUniformGrid x:Name="radUniformGrid" NumberOfColumns="2" NumberOfRows="2"></telerikPrimitives:RadUniformGrid>

Adding Children

In order to add child elements inside the RadUniformGrid control you just have to place them inside its tag or add them to its Children collection when using the code-behind. The items will be automatically ordered in the available cells by filling one by one the first row and sequentially the others.

To learn how to change the ordering directions read about the Children Flow feature.
<telerikPrimitives:RadUniformGrid NumberOfColumns="2" NumberOfRows="2">
<TextBlock Text="1" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Text="2" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Text="3" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Text="4" HorizontalAlignment="Center" VerticalAlignment="Center" />
for( int i = 1; i < 5; i++ )
TextBlock child = new TextBlock();
child.Text = i;
this.radUniformGrid.Children.Add( child );

Here is a snapshot of the result.

Uniform Grid-Getting Started-01