Silverlight Controls Part -2

Grid

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.

Code

<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<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"/>
</Grid>

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)

Output

TextBlock

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" /> 

TextBlock.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">
<TextBlock.Text>
This is the first line
in continuation of first line.
</TextBlock.Text>
</TextBlock>
 

LineBreak

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
<LineBreak/>
This is the second line.
</TextBlock>

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>
<LineBreak/>
<Run Foreground="DarkGreen" FontFamily="Georgia" FontSize="15">
This is Georgia font in Green color
</Run>
</TextBlock>
 

Output

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.