College of Computer & Information Sciences

Prince Sultan University

College of Computer & Information Sciences

Department of Computer Science

CS371: Web development

Worksheet 7: SiverLight Layout Controls

What is SilverLight ?

SilverLight is an RIA (Rich Internet Applications) technology that makes it possible to build rich interface web applications. The technology is based on vector graphics and an xml based language called XAML.

Specifically, Silverlight is a cross-platform, cross-browser plug-in that renders user interfaces and graphical assets on a canvas that can be inserted into an HTML page.

The markup used to define a Silverlight canvas is called Extensible Application Markup Language (XAML, pronounced “zammel”). XAML is an XML-based language that is similar to HTML in some ways.

Like HTML, XAML defines which elements appear, as well as the layout of those elements. However, unlike HTML, XAML goes far beyond simple element definition and layout. Using XAML, you can also specify timelines, transformations, animations, and events.

Layout Management in SilverLight:

The Canvas:

1- Open Visual Studio 2010 and create a new Silverlight application called CanvasPanel. Allow Visual Studio to create a Web Application project to host the application.

2- When the project is created, you should be looking at the MainPage.xaml file. If you do not see the XAML source, switch to that view so you can edit the XAML.

3- Within the main Grid element, add a Canvas element. Assign it a Width property of 300 and a Height property of 300. In order to see the Canvas panel in the application, also set the background color to green. The following XAML adds this Canvas:

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

<Canvas Background="Green" Width="300" Height="200">

</Canvas>

</Grid

4- Add two buttons to the canvas as shown below (take a look at the XAML code below the figure):

The Corresponding XAML Code:

UserControl x:Class="CanvasPanel.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">

Canvas Background="Green" Width="300" Height="200">

Button Width="100" Height="30" Content="Button 1" />

Button Width="100" Height="30" Content="Button 2"

Canvas.Left="10" Canvas.Top="40" />

</Canvas

</Grid

</UserControl

If you run the application you get:

5- Omit the width and height attributes of the user controls and comment on the effect of this.

The Stack Panel:

The StackPanel provides developers with a quick layout option for positioning objects. The StackPanel

control allows you to position Silverlight objects in more of a flow layout, stacking objects either

horizontally or vertically.

1- In Visual Studio 2010, create a new Silverlight application named StackPanel and allow Visual Studio to create a Web Site project to host the application.

2- Within the main Grid element, add a StackPanel control and also three buttons with the labels Button 1, Button 2, and Button 3.

3- Give all three buttons a width of 100 and a height of 30.

The Corresponding XAML code:

UserControl x:Class="StackPanel.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="Vertical" HorizontalAlignment="Center">

Button Width="100" Height="30" Content="Button 1"

Margin="5"</Button

Button Width="100" Height="30" Content="Button 2"

Margin="5"</Button

Button Width="100" Height="30" Content="Button 3"

Margin="5"</Button

</StackPanel

</Grid

</UserControl

4- Change the orientation of the StackPanel to Horizontal to get:

Nested SatckPanels:

1- In Visual Studio 2010, create a new Silverlight application named NestedStackPanel and allow Visual Studio to create a Web Application project to host the application.

2- In the MainPage.xaml file, add the following items:

• A StackPanel control to the root Grid with its Orientation property set to Horizontal and the HorizontalAlignment property set to Center.

• Within that StackPanel, add two buttons with the labels Button Left and Button Right.

· In between the two buttons, add another StackPanel with Orientation set to Vertical and VerticalAlignment set to Center.

· Within that nested StackPanel, include three buttons with the labels Button Middle 1, Button Middle 2, and Button Middle 3

The Resulting XAML Code:

UserControl x:Class="NestedStackPanel.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 Width="100"

Height="30"

Content="Button Left"

Margin="5" />

StackPanel VerticalAlignment="Center">

Button Width="100"

Height="30"

Content="Button Middle 1"

Margin="5"</Button

Button Width="100"

Height="30"

Content="Button Middle 2"

Margin="5"</Button

Button Width="100"

Height="30"

Content="Button Middle 3"

Margin="5"</Button

</StackPanel

Button Width="100"

Height="30"

Content="Button Right"

Margin="5"</Button

</StackPanel

</Grid

</UserControl

What you get:

The Grid Control:

The Grid control provides more fine-tuned layout in Silverlight applications. As a comparison, you can think of using the Grid layout control as similar to using table elements to position items in HTML, only more flexible. With the Grid control, you can define rows and columns, thus creating grid cells, and then add objects to individual cells in the grid or to multiple cells, by using spanning.

To specify in which cell to place an object, you use the Grid.Column and Grid.Row attached properties.

Build the Grid Panel implied by the following XAML Code:

UserControl x:Class="GridPanel.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="400" d:DesignWidth="600">

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="100"

Height="30"

Content="Top Left"

Margin="5"

Grid.Row="0"

Grid.Column="0"</Button

Button Width="100"

Height="30"

Content="Top Right"

Margin="5"

Grid.Row="0"

Grid.Column="2"</Button

Button Width="100"

Height="30"

Content="Bottom Left"

Margin="5"

Grid.Row="2"

Grid.Column="0"</Button

Button Width="100"

Height="30"

Content="Bottom Right"

Margin="5"

Grid.Row="2"

Grid.Column="2"</Button

</Grid

</UserControl

Try to nest the following grid within the grid of the above application:

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

Grid.RowDefinitions

RowDefinition Height="*" />

</Grid.RowDefinitions

Grid.ColumnDefinitions

ColumnDefinition Width="*" />

</Grid.ColumnDefinitions

Button Width="100"

Height="30"

Content="Nested Top Left"

Margin="5"

Grid.Row="0"

Grid.Column="0"</Button

Button Width="100"

Height="30"

Content="Nested Top Right"

Margin="5"

Grid.Row="0"

Grid.Column="2"</Button

Button Width="100"

Height="30"

Content="Nested B. Left"

Margin="5"

Grid.Row="2"

Grid.Column="0"</Button

Button Width="100"

Height="30"

Content="Nested B. Right"

Margin="5" Grid.Row="2"

Grid.Column="2"</Button

Button Width="100"

Height="30"

Content="Nested Center"

Margin="5"

Grid.Row="1"

Grid.Column="0"

Grid.ColumnSpan="2"</Button

</Grid

You get:

Layouts to Explore:

Explore the following layout controls and try to discover the differences between them and the previous controls:

· WrapPanel Layout Control

· Dock Layout Control