Layouts in Silverlight

The three important layouts used in Silverlight are:
Grid: Places elements in rows and columns
StackPanel: Stacks its children elements in a single row or column
Canvas: Positions elements using co-ordinates
The figure below shows clear separation between all the layouts.

Layouts in Siverlight

Layouts in Siverlight

Here is the very simple but lengthy code:

<UserControl
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;
x:Class=”Layouts_Example.Page”
Width=”800″ Height=”700″ xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243; xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243; mc:Ignorable=”d”>

<Grid x:Name=”LayoutRoot” Background=”White”>
<Grid Height=”227″ HorizontalAlignment=”Left” Margin=”73,56,0,0″ VerticalAlignment=”Top” Width=”282″ Background=”#FF818040″ ShowGridLines=”True”>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Row=”0″ Grid.Column=”0″ Height=”50″ Width=”100″ Content=”I am in Grid(0,0)”></Button>
<Button Grid.Row=”1″ Grid.Column=”0″  Height=”50″ Width=”100″ Content=”I am in Grid(1,0)”></Button>
<Button Grid.Row=”0″ Grid.Column=”1″ Height=”50″ Width=”100″ Content=”I am in Grid(0,1)”></Button>
<Button Grid.Row=”1″ Grid.Column=”1″  Height=”50″ Width=”100″ Content=”I am in Grid(1,1)”></Button>
</Grid>

<Canvas Height=”227″ HorizontalAlignment=”Right” Margin=”0,56,73,0″ VerticalAlignment=”Top”       Width=”270″      Background=”#FF5C2459″>
<TextBlock Height=”37″ HorizontalAlignment=”Right” VerticalAlignment=”Top” Width=”136.836″   Text=”Canvas.Top,Canvas.Left” TextWrapping=”Wrap” Canvas.Top=”23″ Canvas.Left=”15″ Foreground=”#FF67F68F”/>
<Ellipse Height=”69″ Width=”99″ Canvas.Left=”154″ Canvas.Top=”25″ Fill=”#FFFFFFFF” Stroke=”#FF000000″/>
<Rectangle Height=”62″ Width=”108″ Canvas.Left=”22″ Canvas.Top=”133″ Fill=”#FF6775CD” Stroke=”#FF000000″/>
</Canvas>
<StackPanel Orientation=”Vertical” Height=”235″ HorizontalAlignment=”Left” Margin=”73,0,0,108″ VerticalAlignment=”Bottom” Width=”282″ Background=”#FF07103C”>
<Button Height=”50″ Width=”200″ Content=”1.No alignment”></Button>
<Button Height=”50″ Width=”200″ Content=”2.Aligned left” HorizontalAlignment=”Left”></Button>
<Button Height=”50″ Width=”200″ Content=”3.Aligned right” HorizontalAlignment=”Right”></Button>
<TextBlock Text=”Orientation=Vertical” Padding=”10″ Foreground=”BlueViolet” FontSize=”18″></TextBlock>
</StackPanel>

<StackPanel  Orientation=”Horizontal” Height=”235″ HorizontalAlignment=”Right” Margin=”0,0,73,108″ VerticalAlignment=”Bottom” Width=”270″ Background=”#FF5E481D”>
<Button Height=”200″ Width=”60″ Content=”1.Bottom” VerticalAlignment=”Bottom”></Button>
<Button Height=”200″ Width=”60″ Content=”2.Top” VerticalAlignment=”Top”></Button>
<Button Height=”200″ Width=”60″ Content=”3.Center” VerticalAlignment=”Center”></Button>
<TextBlock Text=”Orientation Horizontal” Margin=”30″ Foreground=”Wheat” FontSize=”18″>
<TextBlock.RenderTransform>
<RotateTransform Angle=”90″></RotateTransform>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>

</Grid>
</UserControl>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s