Exploring Grid Panel in Silverlight 3 Using Blend 3

Introduction

In this article we will explore how can we add Rows and Columns in Silverlight 3 using Blend 3.



Crating Silverlight Project

Fire up Blend 3 and create a Silverlight Application. Name it as GridPanelInSL3.

Now you have created the Silverlight 3 Application, by default A Grid Panle is added to the User Control and named as LayoutRoot.
Select the Grid and in the Properties Pane find out the properties called RowDefinitions and ColumnDefinitions.

To find it easily in the Property Search Box type "def" and you wiil get it fast.



Now you know that you can get it from Layout Tab.

We will add four Columns to the Grid. Click the ColumnDefinitions (Collection) and you will find a dialog box pop up as follows:



There are four options available as Delete, Move Up, Move Down and Add another Item.



Now that we don't have any columns defined add four columns and you will see as follows:



Now if you press ok and see your Grid you will find four columns added to the Grid.

Now go back to the ColumnDefinitions Properties Dialog Box. We will change properties there.

Select the third column and see the right side pane you will find several properties too.



I have changed the Width to 100 and type to Pixel.

We have three types for the Layout as:

• Star
• Auto
• Pixel

We have two more Properties as MaxWidth and MinWidth.
Go ahead and play with it.

Similarly we will add RowDefinitions to the Grid as follows:



Our Grid Layout will look like the following.

Enjoy Coding.