Silverlight -StackPanel Layout Control Example

In this article we will be seeing how to create Silverlight StackPanel Layout using Visual studio 2010.

The term layout describes the process of sizing and positioning objects in your Silverlight-based application. In Silverlight we have 3 layout elements namely Canvas, StackPanel and Grid. In this we will be seeing how to create StackPanel layout in Silverlight.

StackPanel:

It defines an area where you can arrange the child elements in a horizontal or vertical list. We can set the Orientation property to change the direction of the list. The default value for the Orientation is Vertical.

Orientation - Horizontal:

It is used to arrange the child elements in the horizontal list.


Orientation - Vertical:

It is used to arrange the child elements in the vertical list.


Steps Involved:

Creating a Silverlight Application:

I. Open Visual Studio 2010.

ii. Go to File => New => Project.

iii. Select Silverlight from the Installed templates and choose the Silverlight Application template.

iv. Enter the Name and choose the location.

v. Click OK.

vi. In the New Silverlight Application wizard check the "Host the Silverlight Application in a new Web site".

vii. Click OK.

Creating the StackPanel Layout:

Orientation-Vertical:

I. Open MainPage.xaml file and replace the code with the below one.

<UserControl x:Class="SilverlightStackPanelLayout.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">   
    <StackPanel Orientation="Vertical">
        <Rectangle Height="50" Width="50" Fill="Gray" Opacity="0.2"></Rectangle>
        <Rectangle Height="50" Width="50" Fill="Gray" Opacity="0.4"></Rectangle>
        <Rectangle Height="50" Width="50" Fill="Gray" Opacity="0.6"></Rectangle>
        <Rectangle Height="50" Width="50" Fill="Gray" Opacity="0.8"></Rectangle>
        <Rectangle Height="50" Width="50" Fill="Gray" Opacity="1"></Rectangle>
    </StackPanel>
</UserControl>

ii. Build the solution.

iii. Hit ctrl+F5.


Orientation-Horizontal:

I. Open MainPage.xaml file and replace the code with the following.

<UserControl x:Class="SilverlightStackPanelLayout.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">   
    <StackPanel Orientation="Horizontal">
        <Rectangle Height="50" Width="50" Fill="Gray" Opacity="0.2"></Rectangle>
        <Rectangle Height="50" Width="50" Fill="Gray" Opacity="0.4"></Rectangle>
        <Rectangle Height="50" Width="50" Fill="Gray" Opacity="0.6"></Rectangle>
        <Rectangle Height="50" Width="50" Fill="Gray" Opacity="0.8"></Rectangle>
        <Rectangle Height="50" Width="50" Fill="Gray" Opacity="1"></Rectangle>
    </StackPanel>
</UserControl>

ii. Build the solution.

iii. Hit ctrl+F5.