Monday, October 28, 2013

Major controls in silverlight part 1 (Grid Control)

          In this Article, we are going to see major controls in silverlight, There are so many controls in silverlight in those these 3 controls are widly used and important
1                            1.  Grid Control
2                            2. Stack panel
3                            3.  Canvas

Grid Control:

                Grid is one of the most widly used controls in silverlight, this control is included by default in user control (by default only one control is allowed inside User Control).
                Grid control is used to give fixed and consistant layout in silverlight, its like table in HTML which is used to place controls horizontally or vertically in web page.
                Like HTML table, grid also has rows and columns but with slight changes.

Example:

<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>

In the above example we defined three rows and three columns, the out of the above will be like this
[0,0]
[0,1]
[1,0]
[1,1]

You can create as many number of rows and columns you want.

Grid with controls example:

<Grid x:Name="LayoutRoot" Background="BlanchedAlmond">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Row[0], Col[0]" Grid.Row="0" Grid.Column="0" />
<TextBlock Text="Row[0], Col[1]" Grid.Row="0" Grid.Column="1" />
<TextBlock Text="Row[1], Col[0]" Grid.Row="1" Grid.Column="0" />
<TextBlock Text="Row[1], Col[1]" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="Row[2], Col[0]" Grid.Row="2" Grid.Column="0" />
</Grid>

We can define only Height for Row and Width for Column, the possible values for the Height and Width are

Row:

<RowDefinition Height="100"/>
                Height in pixel.
Or
<RowDefinition Height="Auto"/>
                Height based on control inside row.
Or
<RowDefinition Height="*"/>



No comments:

Post a Comment