Chandradev's Blog

Hi
If you are planning to work on silverlight, then you have to be perfect in panel of silverlight. Using panel we can design any page in very easy ways.

In silverlight,generally there are the following panel

1.Stack Panel
2.Grid Panel
3.Canavas Panel
4.ScrollViewer
5.Border

Stack Panel
If our requirement is to display the control in horizontal or vertical in stack format, then we should have to go for stack panel.This is one of the easiest method to do alignment in silverlight

<StackPanel Orientation="Vertical" Background="CornflowerBlue">
<TextBlock Text="This is the sample of stack panel"></TextBlock>

<Button Content="Button1" Width="200"></Button>
<Button Content="Button2" Width="200"></Button>
<Button Content="Button3" Width="200"></Button>
<Button Content="Button4" Width="200"></Button>

</StackPanel>

Grid Panel

This is one of the most famous and most powerful layout container in silverlight. This is similar to table in asp.net

If our requirement to arrange the element on tabular or Grid format on basis of row and column style, then we should have to use this panel

<Grid x:Name="LayoutRoot" ShowGridLines="True" Background="Azure">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>

</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>

<Button Grid.Row="0" Grid.Column="0" Content="Top Left(0,0)"></Button>
<Button Grid.Row="0" Grid.Column="1" Content="Middle left(0,1)"></Button>
<Button Grid.Row="1" Grid.Column="2" Content="Button Right(1,2)"></Button>
<Button Grid.Row="1" Grid.Column="1" Content="Botton Middle(1,1)"></Button>

</Grid>

Canavas Panel

This is also one of the easiest way to arrange the layout on basis of left and top coordinate.It is also very flexible to use in silverlight design.

<Canvas Background="LightBlue" Height="600" Width="500">

<Button Canvas.Left="10" Canvas.Top="10" Content="Button1 (10,10)" ></Button>
<Button Canvas.Left="120" Canvas.Top="30" Content="Button2 (120,30)"></Button>
<Button Canvas.Left="60" Canvas.Top="80" Content="Button3 (60,80)"></Button>
<Button Canvas.Left="70" Canvas.Top="120" Content="Button4 (70,120)"></Button>

</Canvas>

Scrollviewer

This panel is generally used to group the collection of controls in scrolling format like this image

<ScrollViewer Height="200" Width="150">

<StackPanel Orientation="Vertical" Background="SkyBlue" Width="100">

<Button Content="Button1" Height="40" Width="100"></Button>
<Button Content="Button2" Height="40" Width="100"></Button>
<Button Content="Button3" Height="40" Width="100"></Button>
<Button Content="Button4" Height="40" Width="100"></Button>
<Button Content="Button4" Height="40" Width="100"></Button>
<Button Content="Button6" Height="40" Width="100"></Button>
<Button Content="Button7" Height="40" Width="100"></Button>
<Button Content="Button8" Height="40" Width="100"></Button>
<Button Content="Button9" Height="40" Width="100"></Button>

</StackPanel>

</ScrollViewer>

Border Panel
This is also one panel in silverlight. But it support only one child as content. It doest not support multiple content on itself like other panel.It is generally used for giving border layout on some content.

<Border Margin="25" Padding="8" Background="LightYellow" BorderBrush="SteelBlue" BorderThickness="8" CornerRadius="3">
<Button Margin="3" Content="Click Here" ></Button>

</Border>