Introduction to Panels - Silverlight tutorial Chapter 3

Go to previous chapter - Introduction to Silverlight Application Development

Overview of Panels

There are total six numbers of panels available in Silverlight. They are as below:

1. Grid
2. Canvas
3. StackPanel
4. ScrollViewer
5. Border
6. ViewBox

You will find Grid, Canvas, StackPanel and Border as most useful panel while you start working with them in your Silverlight application. Let us discuss about those in depth.

“Grid” Layout Panel

The Grid layout panel is the most useful panel you ever use. This is the default panel inserted inside every xaml when you create a UserControl. When we created our first Silverlight example or even the first UserControl, you noticed that there was a Grid panel named “LayoutRoot” where we created Rows and Column definitions to place our control to create the Employee View.

The Grid layout control allows you to define the Grid structure to place individual elements as Rows & Column structure in Matrix format. Once you divide your Grid panel in Rows and Columns you can place your element in the appropriate cell by using Grid.Row or Grid.Column property.

See the Grid structure in the below image:

Picture: Grid Layout Panel Structure

Now lets discuss about creating rows and columns, then place some rectangles in each cells. We will create three rows and three columns as described in the above image: 

1. Create a UserControl named “GridPanelDemo” in our Silverlight Application.

2. Open the GridPanelDemo.xaml file. You will see that there is a Grid named “LayoutRoot” inside your UserControl.

3. Now enter the following XAML code between the Grid tags (<Grid>…</Grid>):

<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>

4. This will divide your Grid in three rows and three columns of equal height and equal width.

5. You can also set height for Rows and widths for Columns by specifying the value to the properties like this:

<RowDefinition Height="100"/> 
and 
<ColumnDefinition Width="100"/>

6. You can specify the value for Height & Width in three different ways:

a. Pixel Value (like: “90”, means the height or width of 90 pixel)
b. Percentage Value (like: “5*”, means the height or width of 50% or “*”, means 100%)
c. Automatic Value (like: “Auto”, means the height or width of the Row or Column will resize automatically as  per the size of content of the respective Row or Column.

7. Now we will put some texts using TextBlock and will put them in appropriate cells of the Grid control. You can achieve this by using the Grid.Row=”ROW_NUMBER” and Grid.Column=”COLUMN_NUMBER” as the property of your TextBlock control. Modify your XAML to set this texts like this:

<Grid x:Name="LayoutRoot" Background="BlanchedAlmond">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="Row[0], Col[0]" Grid.Row="0" Grid.Column="0" />
<TextBlock Text="Row[0], Col[1]" Grid.Row="0" Grid.Column="1" />
<TextBlock Text="Row[0], Col[2]" Grid.Row="0" Grid.Column="2" />
<TextBlock Text="Row[1], Col[0]" Grid.Row="1" Grid.Column="0" />
<TextBlock Text="Row[1], Col[1]" Grid.Row="1" Grid.Column="1" />
<TextBlock Text="Row[1], Col[2]" Grid.Row="1" Grid.Column="2" />
<TextBlock Text="Row[2], Col[0]" Grid.Row="2" Grid.Column="0" />
<TextBlock Text="Row[2], Col[1]" Grid.Row="2" Grid.Column="1" />
<TextBlock Text="Row[2], Col[2]" Grid.Row="2" Grid.Column="2" />
</Grid>

8. Also, you can use Grid.RowSpan and Grid.ColumnSpan properties to span your rows and columns. If you are familiar with HTML table tag & properties you can easily understand it properly.

<TextBlock Text="Row[0], Col[0]" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2" /> 

If we use the above code, it will span the 0th Row and 0th Column to two Rows & Columns. This is nothing but merging rows and columns of Grid Layout.

9. Now, open the MainPage.xaml.cs file & in the constructor create the instance of the GridPanelDemo usercontrol and add it as the child of the LayoutRoot i.e. Grid.

LayoutRoot.Children.Add(new GridPanelDemo());

10. Run your Silverlight application. You will see that, the TextBlocks are arranged in the Page in matrix manner.

Picture: Grid Layout Panel Demo

You will find this useful when you have to position your controls in proper way, in proper Row & Column. Note that, if you don’t create rows or columns and place multiple controls inside your naked Grid, you will see them overlapping each other. So, if you are using Grid be sure that you splitted your Grid in proper rows and columns.

“Canvas” Layout Panel

Canvas is the simplest layout available in Silverlight. It is very easy to understand and using this you can place any content any where inside the canvas. Not only this, you can also layered your application and by layering you can put your content front or back of any other control.

You can think Canvas as a HTML div Tag, where you can put your content in specific location by providing absolute left and top position. Have a look into the below image to get a brief idea on the same.

Picture: Canvas Layout Panel Structure

Lets think there are two Rectangles placed inside the Canvas as mentioned in the above figure. The first Rectangle (Blue one) is placed at the (10, 10) position. This is the coordinate location of your first Rectangle. First one stands for “Left” and second one stands for “Top”. So, What is the coordinate position of the second Rectangle (Orange one)? Exactly, it is Left =50 and Top = 30 i.e. (50, 30).

I think it is the right time to go for writing a sample code to create the above canvas with two Rectangles inside it. I am pretty much confident that, you have now a good confidence on the Canvas positioning.

Let us create a new UserControl named “CanvasPanelDemo” and then we will create two Rectangles in it and will place it in proper location.

1. Create a UserControl named “CanvasPanelDemo” in our Silverlight Application.

2. Open the CanvasPanelDemo.xaml file. You will see that there is a Grid named “LayoutRoot” inside your UserControl.

3. Now replace your Grid tag (<Grid>…</Grid>) with a Canvas tag (<Canvas>…</Canvas) and set the background color as Green:

<Canvas Background="Green" >
</Canvas>

4. Now, open your MainPage.xaml.cs file and modify your constructor to load the newly created CanvasPanelDemo Usercontrol in page load as a child to your LayoutRoot Grid:

LayoutRoot.Children.Add(new CanvasPanelDemo());

5. If you run your application now, you will see that your Canvas has taken the full screen of your browser window. Why? You didn’t set the Height & Width of your UserControl and placed inside a Grid. That’s why it took the full size of the browser window and that’s why you can see your Green canvas taking the whole screen.

6. We will now create two Rectangles and place it inside the Canvas. For the first time, we will not set any position to the rectangles. Lets see what happens then. Modify your XAML to look like this:

<Canvas Background="Green" >
<Rectangle x:Name="rectFirst" Fill="Blue" Height="80" Width="120"/>
<Rectangle x:Name="rectSecond" Fill="Orange" Height="100" Width="150"/>
</Canvas>

7. If you run your application again, you will see only one Rectangle present inside your Canvas. Which one? Yes, only the orange one. So, there you will ask “We added two Rectangle, one Green and another Orange. But why only the orange one is visible in the UI? What happened to the first rectangle?” So, my answer will be “Nothing happened to any of your added control. They all are placed inside the Canvas”.

Yes, that’s right. All the two rectangles are available inside your canvas. As we didn’t specify the position of the rectangles and the second rectangle is bigger than the first one, it placed on top of the other i.e. the orange one placed on top of the green rectangle. Whatever control you add at the end of the Canvas will have a higher Z-Index which places your control on top of the other. I will discuss on this later in this chapter.

Picture: Canvas Panel Demo 1 (without position)

8. Now, lets go for positioning the rectangles. We will set coordinate position (50, 50) to the first rectangle and coordinate position (200, 100) to the second rectangle. For doing this, we have to set the Canvas.Left and Canvas.Top properties of each Rectangle. Have a look into the following code. You will understand easily how to do this.

<Canvas Background="Green">
<Rectangle x:Name="rectFirst" Fill="Blue" Height="80" Width="120" 
Canvas.Left="50" Canvas.Top="50" />
<Rectangle x:Name="rectSecond" Fill="Orange" Height="100" Width="150" 
Canvas.Left="200" Canvas.Top="100" />
</Canvas>
 

9. Run your application and you will notice that the first rectangle has been placed at (Left=50, Top=50) location and the second one has been placed at (Left=200, Top=100) location. Your application will look similar to this:

Picture: : Canvas Panel Demo 2 (with proper position)

10. Now if you want to play around it, just modify your XAML to place the rectangle controls in various positions inside the canvas.

I think you are now familiar with positioning silverlight controls inside the Canvas. Let us discuss something on the Z-Index property. Z-Index stands for layering out your Silverlight application. If you are familiar with Photoshop you knew that, photoshop creates layers to position them on top of each other. Those who don’t know about it can learn it from here.

Suppose you want to create an application where two rectangles are there (similar to the previous example) and one rectangle is partially blocking the another. You have to write a logic to modify your application such that, when you click on the first rectangle it will come front of the another. Similar kind of logic for the second rectangle too.

So, how can we develop this? We have to use the Z-Index property for each rectangle. Lets say we will set the Z-Index of the first rectangle to 1 (one) and the second rectangle to 2 (two). Initially the second rectangle is blocking the first one partially. Now once you click on the first rectangle we will set the Z-Index of it to 2 and the Z-Index of the other rectangle to 1. As the Z-Index of the first rectangle is greater than the second it will come on top of the other. The same behaviour will be for the second rectangle. Once we click on the second rectangle (which is hiding behind the first) will come top the other will go behind. For doing this, we will set the Z-Index of the first rectangle to 1 and the second to 2.

1. Open the CanvasPanelDemo.xaml file and modify the Rectangle properties of Canvas.Left and Canvas.Top to place the rectangle on top of each other.

2. Now add the Canvas.ZIndex property to each rectangle. Set it to 1 for the first rectangle and set it to 2 for the second rectangle. After these modifications your xaml will look like this:

<Canvas Background="Green">
<Rectangle x:Name="rectFirst" Fill="Blue" Height="80" Width="120" 
Canvas.Left="50" Canvas.Top="50" Canvas.ZIndex="1" />
<Rectangle x:Name="rectSecond" Fill="Orange" Height="100" Width="150" 
Canvas.Left="92" Canvas.Top="74" Canvas.ZIndex="2" />
</Canvas>

3. Run your Silverlight application and you will see them in action. You will see the orange rectangle blocking a part of the blue rectangle.

Picture: Panel Demo (ZIndex - 1)

4. Now let us write some logic to code behind (C#) to change the ZIndex property of the rectangles. To do this, first we will register the MouseLeftButtonDown event of both the rectangles in the constructor:

public CanvasPanelDemo()
{
InitializeComponent();
rectFirst.MouseLeftButtonDown += (rectFirst_MouseLeftButtonDown);
rectSecond.MouseLeftButtonDown += (rectSecond_MouseLeftButtonDown);
}
 

5. Now in the MouseLeftButtonDown event of the first rectangle we will set the ZIndex of the first rectangle to 2 and the second rectangle to 1. This will cause the first rectangle to come on top of the second rectangle.

private void rectFirst_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Canvas.SetZIndex(rectFirst, 2);
Canvas.SetZIndex(rectSecond, 1);
}
 

6. In the MouseLeftButtonDown event of the second rectangle we will set the ZIndex of the first rectangle to 1 and the second rectangle to 2. This will cause the second rectangle to come on top of the first one.

private void rectSecond_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Canvas.SetZIndex(rectFirst, 1);
Canvas.SetZIndex(rectSecond, 2);
}
 

7. Run your application to see it in action. At the initial time the second rectangle will be on top of the first one. When you click on the first rectangle it will come in front. Once you click on the second rectangle the first will go behind and thus the second rectangle will come at the front.

Picture: Canvas Panel Demo (ZIndex - 2)

Picture: Canvas Panel Demo (ZIndex - 3)

“StackPanel” Layout Panel

StackPanel is one of the most important panel in Silverlight. You will find it useful when you want to show some of your Silvelright elements either Horizontally or Vertically. It has a property called “Orientation”. You can set it appropriately as per your requirement.

Once you add some elements inside StackPanel, you will notice that they will place as a Stack on top of each other. Have a look into the following figure to get a clear understanding of the same.

Picture: StackPanel Orientation (Horizontal & Vertical)

Let us create an example to showcase the StackPanel demo: 

1. Create a UserControl named “StackPanelDemo” in your Silverlight project

2. Now, open your MainPage.xaml.cs file and modify your constructor to load the newly created StackPanelDemo Usercontrol in page load as a child to your LayoutRoot Grid:

LayoutRoot.Children.Add(new StackPanelDemo());

3. Open the StackPanelDemo.xaml file and inside the Grid tag named “LayoutRoot” we will add two StackPanels (one Horizontal and another Vertical) with some Rectangles as Children.

4. The following XAML code will create a Vertical StackPanel which consists of four rectangles of different colors:

<StackPanel Orientation="Vertical" Background="SkyBlue" Height="200" 
Width="100" Grid.Column="0">
<Rectangle Height="50" Width="100" Fill="Red" />
<Rectangle Height="50" Width="100" Fill="Green" />
<Rectangle Height="50" Width="100" Fill="Blue" />
<Rectangle Height="50" Width="100" Fill="Yellow" />
</StackPanel>

5. The following code will create a Horizontal StackPanel which also contains four rectangles of different colors:

<StackPanel Orientation="Horizontal" Background="SkyBlue" Height="100" 
Width="300" Grid.Column="1">
<Rectangle Height="100" Width="60" Fill="Red" />
<Rectangle Height="100" Width="60" Fill="Green" />
<Rectangle Height="100" Width="60" Fill="Blue" />
<Rectangle Height="100" Width="60" Fill="Yellow" />
</StackPanel>

6. Now run your application and you will notice the following UI of your StackPanel Demo application. The left panel is your Vertical StackPanel whereas the right panel is the Horizontal StackPanel.

Picture: StackPanel Demo

“ScrollViewer” Layout Panel

ScrollViewer is another layout container, which you will find interesting in some cases. Though it is not require to use in all the scenarios to hold elements but to show contents inside a scrollable panel like ListBox or Editor window you have to use ScrollViewer. ListBox, TextBox, RichTextBox internally uses ScrollViewer to implement the scrolling functionality.

Now come the question of implementing the scrollviewer functionality to our previous sample of StackPanel demo. If you add more Rectangles in the Vertical StackPanel in the previous demo application, you will notice that the rectangles are cropping inside the StackPanel as it has a fix height of 100. Now do the following to implement the scrolling functionality in the Vertical StackPanel: 

1. Open the StackPanelDemo.xaml file to edit our previous XAML file

2. Remove the Height & Grid.Column properties from the StackPanel

3. Surround the StackPanel with ScrollViewer tag (<ScrollViewer> … </ScrollViewer>) and set the Height of the ScrollViewer to 200. Also add the Grid.Column = “0” to the ScrollViewer.

4. Add some more rectangles inside the StackPanel, so that, the ScrollBar got enabled for the ScrollViewer. After the modification of your XAML will look like this:

<ScrollViewer Height="200" Grid.Column="0">
<StackPanel Orientation="Vertical" Background="SkyBlue" Width="100">
<Rectangle Height="50" Width="100" Fill="Red" />
<Rectangle Height="50" Width="100" Fill="Green" />
<Rectangle Height="50" Width="100" Fill="Blue" />
<Rectangle Height="50" Width="100" Fill="Yellow" />
<Rectangle Height="50" Width="100" Fill="Red" />
<Rectangle Height="50" Width="100" Fill="Green" />
<Rectangle Height="50" Width="100" Fill="Blue" />
<Rectangle Height="50" Width="100" Fill="Yellow" />
<Rectangle Height="50" Width="100" Fill="Red" />
<Rectangle Height="50" Width="100" Fill="Green" />
<Rectangle Height="50" Width="100" Fill="Blue" />
<Rectangle Height="50" Width="100" Fill="Yellow" />
</StackPanel>
</ScrollViewer>

5. If you run the application now, you will see a ScrollBar on the right side of the panel. Thus it make your Rectangles to scroll properly.

Picture: ScrollViewer Panel Demo

Here note that, we set the Height to the ScrollViewer and not to the StackPanel. The reason behind this is, if you set the Height of the StackPanel it will have a fix height, thus it will not create the Scrolling behaviour. As we set the Height to the ScrollViewer the StackPanel height increases as and when you add child to it but the ScrollViewer here does a great job and creates a scrollbar cropping the StackPanel to the height of the ScrollViewer.

“Border” Layout Panel

It’s an another type of Layout Panel in Silverlight. But as like other panels it can’t contain multiple contents in it. Border supports only one child as a content. If you want to use Border as a container of multiple controls, you have to wrap those with anyother panel like Grid, Canvas etc. and then place it in the Border. So, what is Border actually? The name says it. It is a border. If we want to add some border in our Silverlight application, we can use it at that time.

Look into the following figure. Here you will see four different shapes. These shapes you can create using Border element. You can create your border filled with Solid color or Gradient color or you can use a transparent color.

Picture: Border Panel Example

After seeing the above figure, I think one question came to you mind that “I can create the same thing using the Rectangle too. Then what is the benefit of using Border?” Yes right. You can create the same thing using Rectangle too as we did earlier, but the main difference is “You can create a rounded corner shape using Border. It has the property called “CornerRadius”. If you set it to 45, means your shape will have a corner radius of 45 degree.

Let us create some borders in a demo application:

1. Create a UserControl named “BorderDemo” in your Silverlight project

2. Now, open your MainPage.xaml.cs file and modify your constructor to load the newly created BorderDemo Usercontrol in page load as a child to your LayoutRoot Grid:

LayoutRoot.Children.Add(new BorderDemo());

3. Open the BorderDemo.xaml file and inside the Grid tag named “LayoutRoot” we will add a Border as Content.

4. Let us add the first Border of Height=100 and Width=150 with a brown colored BorderThickness of 2:

<Border Height="100" Width="150" BorderThickness="2" BorderBrush="Brown"/>

Once run in browser you will see the following view:

Picture: Border Panel Demo 1

5. Now we will modify this border to create a Rounded Corner border. To do this, we will add a property “CornerRadius” to it. We will set the value to 25 i.e. 25 degree. Your modified XAML will look like this:

<Border Height="100" Width="150" CornerRadius="25" BorderThickness="2" BorderBrush="Brown"/> 

Picture: Border Panel Demo 2

6. Now we will change it a little to set a background color to it. Border has a property called “Background”. You can set the color there which you like. Here is the modified XAML of the same:

<Border Height="100" Width="150" CornerRadius="25" BorderThickness="2" BorderBrush="Brown" Background="Brown"/> 

If you run your Silverlight application now, you will see the following:

Picture: Border Panel Demo 3

7. Let us modify it a little bit more to add a child inside it. We will put a Text “I am a TextBlock inside Border control”. Put the below code in your XAML. You will notice that I placed a TextBlock inside the <Border> … </Border> tag. You can place any control or panel inside the Border like this.

<Border Height="100" Width="250" CornerRadius="25" BorderThickness="2" BorderBrush="Brown" Background="Brown">
<TextBlock Text="I am a TextBlock inside Border control" 
VerticalAlignment="Center" 
HorizontalAlignment="Center"/>
</Border>
 

Once you run, it will show similar to this:

Picture: Border Panel Demo 4

Remember that, you can add only one child to the Border panel. If you need to add more than one child, add a different panel like Grid, Canvas or StackPanel inside the Border and then add the child elements to that panel. Think before chosing your panels.

“ViewBox” Layout Panel

ViewBox panel is another useful panel in Silverlight. It is actually not a new panel in Silverlight. It was available in Silverlight 3 toolkit, but Microsoft added it in the Silverlight 4 runtime for it’s demand. You can use ViewBox panel to stretch and scale a element control. Like Border it also has only and only one child. If you want to set more than one child, you have to use any other panel inside the ViewBox to hold other children controls.

As I told earlier, you can stretch and scale your control inside your ViewBox. It has a property called “Stretch” which has the following values:

1. Fill:

If you set the Stretch property to Fill, the content will fill the entire space of the ViewBox. It doesn’t preserve the aspect ratio.

<Viewbox Stretch="Fill" MaxWidth="100" MaxHeight="100" Name="viewBox1">
<Image Source="images/microsoft_silverlight.jpg"/>
</Viewbox>
<Viewbox Stretch="Fill" MaxWidth="200" MaxHeight="200" Name="viewBox2">
<Image Source="images/microsoft_silverlight.jpg"/>
</Viewbox>
<Viewbox Stretch="Fill" MaxWidth="300" MaxHeight="300" Name="viewBox3">
<Image Source="images/microsoft_silverlight.jpg"/>
</Viewbox>

 

//Set the Stretch property to Fill
private void stretchFill(object sender, RoutedEventArgs e)
{
viewBox1.Stretch = Stretch.Fill;
viewBox2.Stretch = Stretch.Fill;
viewBox3.Stretch = Stretch.Fill;
}

Picture: ViewBox Demo 1

2. None:
If you set the Stretch property to None, the content will preserve its original size.

<Viewbox Stretch="Fill" MaxWidth="100" MaxHeight="100" Name="viewBox1">
<Image Source="images/microsoft_silverlight.jpg"/>
</Viewbox>
<Viewbox Stretch="Fill" MaxWidth="200" MaxHeight="200" Name="viewBox2">
<Image Source="images/microsoft_silverlight.jpg"/>
</Viewbox>
<Viewbox Stretch="Fill" MaxWidth="300" MaxHeight="300" Name="viewBox3">
<Image Source="images/microsoft_silverlight.jpg"/>
</Viewbox>

//Set the Stretch property to None
private void stretchNone(object sender, RoutedEventArgs e)
{
viewBox1.Stretch = Stretch.None;
viewBox2.Stretch = Stretch.None;
viewBox3.Stretch = Stretch.None;
}

Picture: ViewBox Demo 2

3. Uniform:
If you set the Stretch property to Uniform, the content will resize to fit the ViewBox. The ViewBox will take as much space as require to show the entire content and also preserves the aspect ratio.

<Viewbox Stretch="Fill" MaxWidth="100" MaxHeight="100" Name="viewBox1">
<Image Source="images/microsoft_silverlight.jpg"/>
</Viewbox>
<Viewbox Stretch="Fill" MaxWidth="200" MaxHeight="200" Name="viewBox2">
<Image Source="images/microsoft_silverlight.jpg"/>
</Viewbox>
<Viewbox Stretch="Fill" MaxWidth="300" MaxHeight="300" Name="viewBox3">
<Image Source="images/microsoft_silverlight.jpg"/>
</Viewbox>

//Set the Stretch property to Uniform
private void stretchNone(object sender, RoutedEventArgs e)
{
viewBox1.Stretch = Stretch.Uniform;
viewBox2.Stretch = Stretch.Uniform;
viewBox3.Stretch = Stretch.Uniform;
}

Picture: ViewBox Demo 3

4. UniformToFill:
If you set the Stretch property to UniformToFill, the content will resize to fill the destination dimension. If the original size differs than the aspect ratio of the ViewBox, the content is then clipped to fit the ViewBox dimension.

<Viewbox Stretch="Fill" MaxWidth="100" MaxHeight="100" Name="viewBox1">
<Image Source="images/microsoft_silverlight.jpg"/>
</Viewbox>
<Viewbox Stretch="Fill" MaxWidth="200" MaxHeight="200" Name="viewBox2">
<Image Source="images/microsoft_silverlight.jpg"/>
</Viewbox>
<Viewbox Stretch="Fill" MaxWidth="300" MaxHeight="300" Name="viewBox3">
<Image Source="images/microsoft_silverlight.jpg"/>
</Viewbox>

//Set the Stretch property to UniformToFill
private void stretchNone(object sender, RoutedEventArgs e)
{
viewBox1.Stretch = Stretch.UniformToFill;
viewBox2.Stretch = Stretch.UniformToFill;
viewBox3.Stretch = Stretch.UniformToFill;
}

Picture: ViewBox Demo 4