Silverlight Controls Part -2

Posted by in Silverlight category on for Beginner level | Points: 250 | Views : 5880 red flag

In this Article we are going to learn Silverlight controls like Grid and TextBlock and related properties.
This article is the continuation of my last article in Silverlight controls series, read last article here.

Lets start this article by learning Grid Silverlight control.


Grid is the most powerful control in Silverlight; it allows us to define rows and columns to place child elements into it.

Get 500+ ASP.NET web development Tips & Tricks and ASP.NET Online training here.


<Grid x:Name="LayoutRoot" Background="White">


<RowDefinition />

<RowDefinition />

<RowDefinition />



<ColumnDefinition />

<ColumnDefinition />


<TextBlock Grid.Column="0" Grid.Row="0" Text="First row first cell"/>

<TextBlock Grid.Column="1" Grid.Row="0" Text="First row second cell"/>

<TextBlock Grid.Column="0" Grid.Row="1" Text="Second row first cell"/>

<TextBlock Grid.Column="1" Grid.Row="1" Text="Second row second cell"/>

<TextBlock Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" Text="Third row and first cell - Third row and first cell"/>


If you are familiar with Grids in ASP.NET (like GridView, DataGrid etc.), you will notice that Silverlight Grid is little different. In this we first define the Rows and Columns and then define the child elements with Grid.Column and Grid.Row property to place them into respective rows and columns of the Grid.

In the Grid

RowDefinitions > RowDefinition is used to specify the number of rows into the Grid

ColumnDefinitions > ColumnDefinition is used to specify the number of columns into the Grid.

In the above code snippet, we have defined three rows and two columns. In the first two rows we have two cells with TextBlock elements and the last row has only one cell as we have set Grid.ColumnSpan property of the last TextBlock to 2 that spans over last two columns of the Grid.

In case we want an element to span over more than one rows of the Grid, we can set Grid.RowSpan properties as we have done for the Grid.ColumnSpan property.

(In summary, the Columnspan and RowSpan works in almost similar fashion as it works in the HTML table)



TextBlock control is used to display the text. It has some properties/child elements that can be used to write content for this control as well as format the text.


Used to provide value for the TextBlock.

<TextBlock Text="This is simple text" /> 


In case we want to set large amount of text as the value to the TextBlock we can use TextBlock.Text child element and specify its content.

<TextBlock x:Name="myText" Canvas.Top="25">


This is the first line

in continuation of first line.





In case we want to write multi-line content to the TextBlock, we can use LineBreak element.


<TextBlock x:Name="myText1" Canvas.Top="50">

This is the first line


This is the second line.



In case we want to format the content of the TextBlock we can use the Run child element. It has its own attribute that is used to set the foreground color, font style or size.

<TextBlock Canvas.Top="100">

This is simple Text

<Run Foreground="CadetBlue" FontFamily="Georgia" FontSize="15">

This is Georgia font



<Run Foreground="DarkGreen" FontFamily="Georgia" FontSize="15">

This is Georgia font in Green color





Hope this article was useful. Thanks for reading, hope you liked it.

Keep reading my forth coming articles on Silverlight. To read my series of articles,click here.

Page copy protected against web site content infringement by Copyscape

About the Author

Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan

Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on | |

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)