Introduction to Layouts & Controls in Silverlight 2.0. Part - I

 

In this third lab we will have introduction to Layout management in Silverlight 2.0. Below are the steps –:

In Silverlight 2.0 we have few Layouts as follows -

1) Grid Panel.

2) Canvas.

3) Stack Panel.

To work with these Panels, follow below steps -

1) Create Silverlight 2.0 Project as shown in previous Blog and give name to it as SLLayoutManagement.

2) Add an Image of your choice in Silverlight project as shown bellow -

3) We will first have a look at Grid Layout. By using Grid Layout you can arrange the contents in Rows and Columns by Specifying the Margin for the contents to appear perfect on your screen.

4) Open Page.xaml and Start typing bellow code -

<UserControl x:Class="FirstSLApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="Black" ShowGridLines="True" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Height="50"  Width="120" Content="Click To See Time" Grid.Column="0" Grid.Row="0"/>
        <Button Height="50"  Width="120" Content="Click To See Time" Grid.Column="0" Grid.Row="1"/>
        <Button Height="50"  Width="120" Content="Click To See Time" Grid.Column="0" Grid.Row="2"/>
        <Image Height="75" Width="120" Stretch="Fill" Source="Butterfly.jpg" Grid.Column="1" Grid.Row="0"/>
        <Image Height="75" Width="120" Stretch="Fill" Source="Butterfly.jpg" Grid.Column="1" Grid.Row="1"/>
        <Image Height="75" Width="120" Stretch="Fill" Source="Butterfly.jpg" Grid.Column="1" Grid.Row="2"/>
        <Ellipse Height="75" Width="120" Fill="Yellow" Grid.Column="2" Grid.Row="0"/>
        <Ellipse Height="75" Width="120" Fill="Yellow" Grid.Column="2" Grid.Row="1"/>
        <Ellipse Height="75" Width="120" Fill="Yellow" Grid.Column="2" Grid.Row="2"/>

    </Grid>
</UserControl>

 

5) Once you are done, hit F5 to test the application of Silverlight 2.0.

Note : If you want to Create new project, please follow the steps to create a new project of Silverlight Or modify the existing one. I am modifying existing one.

1) Now as you have seen how Grid Layout works, let’s have a look at Stack Panel . Stack Panel can be used to arrange the contents either Horizontally or Vertically. The default alignment of the contents using Stack Panel is Vertical.

2) If you are using the same project like I am doing in this demo, please comment out the Grid code and start typing the bellow code in Page.xaml-

<UserControl x:Class="FirstSLApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="Black" ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Vertical" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Center">
            <Ellipse Height="50"  Width="100" Fill="Red"/>
            <Ellipse Height="50"  Width="100" Fill="Green"/>
            <Ellipse Height="50"  Width="100" Fill="Blue"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Ellipse Height="50"  Width="100" Fill="Yellow"/>
            <Ellipse Height="50"  Width="100" Fill="Wheat"/>
            <Ellipse Height="50"  Width="100" Fill="BurlyWood"/>
        </StackPanel>
    </Grid>
</UserControl>

 

3) Once you are done, hit F5 to test the application of Silverlight 2.0.

If you observe above code, we are actually using Stack Panel within Grid Panel !! Exciting !!

Note : If you want to Create new project, please follow the steps to create a new project of Silverlight Or modify the existing one. I am modifying existing one.

1) Now let’s have a look on Canvas Panel. Unlike Grid Panel Or Stack Panel Canvas allows us to place the contents as per our flexibility. So, when we use Canvas for content alignment, we have to remember few properties.

2) First property is : Canvas.Left

3) Second Property is : Canvas.Top

4) If you are using the same project like I am doing in this demo, please comment out the Grid code and start typing the bellow code in Page.xaml.

<UserControl x:Class="FirstSLApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Canvas Background="Black" x:Name="LayoutRoot">
        <Ellipse Height="20" Width="20" Canvas.Left="200" Canvas.Top="15" Fill="AliceBlue"/>
        <Ellipse Height="20" Width="20" Canvas.Left="200" Canvas.Top="40" Fill="AntiqueWhite"/>
        <Ellipse Height="20" Width="20" Canvas.Left="200" Canvas.Top="65" Fill="Aqua"/>
        <Ellipse Height="20" Width="20" Canvas.Left="200" Canvas.Top="90" Fill="Aquamarine"/>
        <Ellipse Height="20" Width="20" Canvas.Left="200" Canvas.Top="115" Fill="Azure"/>
        <Ellipse Height="20" Width="20" Canvas.Left="200" Canvas.Top="140" Fill="Beige"/>
        
        <Ellipse Height="20" Width="20" Canvas.Left="175" Canvas.Top="15" Fill="BlanchedAlmond"/>
        <Ellipse Height="20" Width="20" Canvas.Left="150" Canvas.Top="15" Fill="Blue"/>
        <Ellipse Height="20" Width="20" Canvas.Left="125" Canvas.Top="15" Fill="BlueViolet"/>
        
        <Ellipse Height="20" Width="20" Canvas.Left="225" Canvas.Top="15" Fill="BurlyWood"/>
        <Ellipse Height="20" Width="20" Canvas.Left="250" Canvas.Top="15" Fill="Yellow"/>
        <Ellipse Height="20" Width="20" Canvas.Left="275" Canvas.Top="15" Fill="Gold"/>
    </Canvas>
</UserControl>

5) Once you are done, hit F5 to test the application of Silverlight 2.0.

Now as you have completed writing the third Silverlight Lab, let’s have few controls introduction and continue with our third Lab – “Introduction to Layouts & Controls in Silverlight 2.0.”