Create Silverlight Application Introduction to Panels.Net 3

In this Chapter I will describe about different Panels available in Silverlight. After reading this chapter you will be familiar with various types of Silverlight Panels. 

Previous chapter - Introduction to Silverlight Application 2

Layout management:

Silverlight provides a very flexible layout management system that lets you specify how controls will

appear in your Silverlight application. You can use a static layout as well as a liquid layout that allows

your layout to automatically adjust as your Silverlight application is resized in the browser.

Each of the five layout controls provided in Silverlight has its advantages and disadvantages

Control : Canvas

Description : Based on absolute

position of

controls.

Pros : Very simple layout.

Cons : Requires that every control have a

Canvas.Top and Canvas.Left

property attached to define its

position on the canvas.

<UserControl x:Class="HelloWorld.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">

        <TextBlock x:Name="helloWorld" Text="Hello World" FontSize="30"></TextBlock>

        <Canvas Background="Blue" Height="200" Width="200">

            <Button x:Name="btn1" Content="Hi" Height="30" Width="30"></Button>

            <Button x:Name="btn2" Content="bye" Height="30" Width="30" Canvas.Left="10" Canvas.Top="40"></Button>

            <Button x:Name="btn3" Content="welcome" Height="30" Width="60" Canvas.Left="50" Canvas.Top="80">

            </Button>

        </Canvas>

    </Grid>

</UserControl>

Control : StackPanel

  

Description : Based on

horizontal or

vertical “stacks” of

controls.

Pros : Allows for a quick dynamic

layout. Nesting StackPanel

controls can provide some

interesting layouts.

Cons The layout is limited to stacks of

items. Spacing is limited to adding

margins to the individual controls

and to adjusting the alignment

(with the VerticalAlignment and HorizontalAlignment properties).

<UserControl x:Class="HelloWorld.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">

        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

            <Button x:Name="btn1" Content="button1" Height="60" Width="60"></Button>

            <Button x:Name="btn2" Content="button1" Height="60" Width="60"></Button>

            <Button x:Name="btn3" Content="button1" Height="60" Width="60"></Button>

        </StackPanel>

    </Grid>

</UserControl>

Control : Grid

  

Description : Mimics using table

elements in HTML to

lay out controls

Pros : The most flexible and

powerful layout control.

You can define just about

any type of layout using

the Grid control.

Cons : Grid definitions can get somewhat

complex at times. Nesting Grid

components can be confusing

<UserControl x:Class="HelloWorld.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

    <Grid ShowGridLines="True" x:Name="LayoutRoot" Background="White">

        <Grid.RowDefinitions>

            <RowDefinition Height="70"/>

            <RowDefinition Height="*"/>

            <RowDefinition Height="70"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="150"/>

            <ColumnDefinition Width="*"/>

            <ColumnDefinition Width="150"/>

        </Grid.ColumnDefinitions>

        <Button Width="30" Height="30" Content="top left"

                Grid.Row="0" Grid.Column="0"></Button>

        <Button Width="30" Height="30" Content="top right"

                Grid.Row="0" Grid.Column="2"></Button>

        <Button Width="30" Height="30" Content="bottom left"

                Grid.Row="2" Grid.Column="0"></Button>

        <Button Width="30" Height="30" Content="bottom right"

                Grid.Row="2" Grid.Column="2"></Button>

       

        <Grid Grid.Column="1" Grid.Row="1" ShowGridLines="True">

            <Grid.RowDefinitions>

                <RowDefinition Height="*"/>

                <RowDefinition Height="*"/>

                <RowDefinition Height="*"/>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="*"/>

                <ColumnDefinition Width="*"/>

                <ColumnDefinition Width="*"/>

            </Grid.ColumnDefinitions>

        </Grid>

        <Button Width="30" Height="30" Grid.Column="1" Grid.Row="1" Content="center"></Button>

    </Grid>

   

</UserControl>

  

Control : WrapPanel

  

Description : Based on horizontal

or vertical “stacks” of

controls wrapping to

a second row or

column when the

width or height is

reached.

Pros : Very similar to the

StackPanel, except the

WrapPanel automatically

wraps items to a second

row or column so that it is

ideal for layouts containing

an unknown number of

items.

Cons : Limited control of layout because

wrapping is automatic when items

reach the maximum width or

height.

Control : DockPanel

  

Description : Layout is based on

“docked” horizontal

or vertical panels.

Pros : Provides an easy way to

create a basic layout,

consuming the entire

application space in vertical

or horizontal panels.

Cons Layout is limited to horizontal or

vertical “fill” panels, often used in

conjunction with other nested

layout controls.