Layout Controls

All layout controls derive from the basic abstract class Panel.

It is clear from the name these controls define the layout. Silverlight2 proides several Layout Controls like :

Canvas – Its nothing but just similar to <div> tag of html. It exists from the first version of Silverlight and is a very basic Layout Control. It provides the basic facility to set the child elements using Canvas.Top, Canvas.Left properties.

Simple Canvas:
We can directly use the Layout control without specifying any other additional tasks:
<UserControl x:Class="myFirstSilverlightApp.TestControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas>
<TextBlock Text="Testing Layout Control : Canvas."
Canvas.Top="50" Canvas.Left="50" />
</Canvas>
</UserControl>
Paste above the code in ‘Page.xaml’ in test project. This is simply display a TextBlock with : “Testing Layout Control : Canvas” as Text.

Now lets do something extra with this:

Nested Canvas:
<UserControl x:Class="myFirstSilverlightApp.TestControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas>
<TextBlock Text="This is text on a blank canvas."
Canvas.Top="50" Canvas.Left="50" />
<Canvas Canvas.Top="50" Canvas.Left="50" Background="Red">
<TextBlock Text="This is text on a blank canvas."
Canvas.Top="50" Canvas.Left="50" />
</Canvas>
</Canvas>
</UserControl>
Now, just look at above code, there are two Canvas used in above, in child canvas we have give the Top and Left values. Try the above code and see the results.

Grid– Yes, I can understand you are confused, I was too confused when I have read this word ‘Grid’ as a Asp.net guy, I was confused it with DataGrid. But, don’t worry Grid is not a DataGrid. Its another Layout Control just similar to Table of HTML. As a table Grid layout control provides the Row/ Column facility. One most exciting feature if Grid is it supports both fixed-width column and dynamic-width column. Its will be cleared from following example:
<UserControl x:Class="myFirstSilverlightApp.TestControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="650" Height="300">
<Grid x:Name="myGrid" Background="White" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="400"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="100"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="First Column of ROW1" Grid.Column="0" Grid.Row="0" />
<TextBlock Text="Second Column ROW1" Grid.Column="1" Grid.Row="0" />
<TextBlock Text="First Column of ROW2" Grid.Column="0" Grid.Row="1" />
<TextBlock Text="Second Column of ROW2" Grid.Column="1" Grid.Row="1" />
<TextBlock Text="First Column of ROW3" Grid.Column="0" Grid.Row="2" />
<TextBlock Text="econd Column of ROW2" Grid.Column="1" Grid.Row="2" />
</Grid>
</UserControl>

Dynamic-Width can be assigned with the use of ‘*’
Grid provides some more extra feature like spanning and others same as HTML Table.

StackPanel– It provides the facility to arrange elements both Horizontally and vertically.
Now, suppose we have to draw three rectangles vertically, if you chose other layout controls then all rectangles will be overlapped [try the same] but with the help of StackPanel its not:
<UserControl x:Class="myFirstSilverlightApp.TestControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="650" Height="300">
<Grid x:Name="myGrid" Background="White" >
<StackPanel>
<Rectangle Width="100" Height="50" Fill="Blue" />
<Rectangle Width="75" Height="50" Fill="Red" />
<Rectangle Width="50" Height="25" Fill="Pink" />
</StackPanel>

</UserControl>
Note: By default orientation of StackPanel is Vertical
<UserControl x:Class="myFirstSilverlightApp.TestControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="650" Height="300">
<Grid x:Name="myGrid" Background="White" >
<StackPanel Orientation="Horizontal" Background="LightGray" >
<Rectangle Width="100" Height="250" Fill="Blue" />
<Rectangle Width="75" Height="175" Fill="Red" />
<Rectangle Width="50" Height="125" Fill="Pink" />
</StackPanel>

</UserControl>

Above code rearrange all rectangles horizontally.

Border – As it pronounced from name, it creates a border. Any control can put in the border and it creates just a border for its child controls, lets check some taste of examples:
<UserControl x:Class="myFirstSilverlightApp.TestControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="650" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Border x:Name="thickBlackBrdr" BorderBrush="Black" BorderThickness="4"
Width="200" Height="150">
</Border>
</Grid>

</UserControl>

Above code simply creates a Black Border with Thickness=4.
<UserControl x:Class="myFirstSilverlightApp.TestControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="650" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Border x:Name="brdTest" BorderThickness="4" Width="200" Height="150">
<Border.BorderBrush>
<LinearGradientBrush x:Name="borderLinearGradientBrush" MappingMode="RelativeToBoundingBox"
StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="Yellow" Offset="0" />
<GradientStop Color="Blue" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
</Grid>

</UserControl>
Try above code and see the results.

Popularity: 1%

Tweet This Post

Related posts:

1. Using Combobox in Silverlight – in a smarter way After reading this article we will be able to use...
2. File Handling in Silverlight ...
3. Isolated Storage in the Silverlight Application Isolated Storage Isolated Storage in the Silverlight Application Definition: Isolated...

Related posts brought to you by Yet Another Related Posts Plugin.