» Text

Arranging Pictures to Learn Layout

Use the Grid, StackPanel, ScrollableViewer and Border to position Images

Each container control in Silverlight and are named in obvious manner based on their functionality. A Border draws a border around a single child control. A StackPanel organizes child controls into a single column or row. A ScrollableViewer renders Scrollbars when its content is hidden.

A Canvas is used for absolute XY positioning. And the Grid is the king of them all.

In this tutorial we will use the analogy of arranging pictures on the wall to learn about positioning and sizing Controls in a Silverlight application.

Tools Time Downloads
Expression Blend Silverlight 30 minutes
30 minutes
Word (.docx) Word
Acrobat (.pdf) PDF

01 An Empty Canvas

Download the BasicLayout project files and Open the project in Expression Blend.

02 Start with the Grid

Select the Image control displaying the flower picture. The Image control is a child of the Grid named LayoutRoot and its position and size is determined by the Grid based on a few properties: Alignment, Margin, Width and Height. With the HorizontalAlignment set to Right and the VerticalAlignment set to Top the Image control would be positioned in the upper right corner, but the Margin values are offsetting its position.

03 Clear the Margins

The Margin for the Image control is set to 0,95,64,0 and follows the pattern of Left, Top, Right, Bottom. To reset the Margin to its default of 0,0,0,0 you can fill out each textbox or as a shortcut click the small white square next to the Margin textboxes and select Reset from the popup menu. With no Margin, the Image control will move to the upper right corner due to the Alignment values.

04 Clear the Width and Height

Reset the Width and Height of the Image control to the default value of Auto. You can do this using the small white square menu mentioned in the last step or you can use the single-click Auto icon in the shape of two double arrows forming an X. When Width and Height are set to Auto, their values are determined by the parent panel. In this case the parent panel is a Grid, which by default sets the size of its children to fill its entire space.

05 Add a Column to the Grid

With the LayoutRoot Grid selected place your mouse over the blue thick line above the Grid. Notice the orange Column Indicator that’s displayed and click around the halfway point of the Grid. You’ve just created a new Column. A double-click on the existing Column Indicator will remove the Column. Additionally you can mange Columns and Rows under Advanced area of the Layout Section.

06 Position the Flower

Add a Row to the Grid at the halfway point using the techniques mentioned in the last step. Select the Image control and notice the Layout property values. Row and Column are set to the default value of 0, but Blend has set the RowSpan and ColumnSpan to 2 to maintain your layout after modifying the Grid. Reset RowSpan and ColumnSpan to 1. Set Column to 1 and the picture should return to the upper right corner.

07 Final Position for the Flower

Select the Image control and change the Stretch property to None. The Image control now lets the Grid know it would not like to stretch any larger than the natural size of its content, in this case 240x180 pixels. Change the Margin to 0,35,37,0 and the picture is almost back in its original spot. But we’ve made room and prepared the Grid for more pictures.

08 Add a StackPanel

Right-click the Grid Tool on the Tools bar and Select the StackPanel Tool. Draw a StackPanel in LayoutRoot that spans from position 0,0 to 1,0. Locate the Image icon in the Asset panel and with the StackPanel selected, double-click the Image icon to insert an Image Control as a child of the StackPanel. Double-click the Image icon again to add another Image Control. Set the Source of the first Image Control to “images/payphone.jpg” and the second to “images/moon.jpg”.

09 Place the Phone and Moon

The height of the Image Control is set to 100 as the default when inserted by Blend. Notice that the StackPanel arranges its children stacked in a vertical or horizontal direction depending on the value of its Orientation property. Set the HorizontalAlignment of the phone Image to Right and set the Height to 190. For the moon Image, set its HorizontalAlignment to Right, Height to 164 and Margin top to 43.

10 Add a ScrollViewer

Right-click the StackPanel Tool on the Tools bar and Select the ScrollViewer Tool. Draw a small ScrollViewer in LayoutRoot in position 1,1. Add an Image Control as a child of the ScrollViewer and set the Source to “images/curtain.jpg”. Notice the ScrollViewer hides content larger than itself and then adds ScrollBars dependent on its HorizontalScrollBarVisibility and VerticalScrollBarVisibility properties.

11 Add a Border

Right-click the ScrollViewer and choose Change Layout > Border. Resize the Border to be a little smaller than the moon image. Set the BorderBrush to a DarkRed color, BorderThickness to 6 and CornerRadius to 6. Select the curtain Image and reset the Margin to 0. The Image control defaults to a Uniform Stretch which means it keep its natural proportions when resizing. Set the Background Brush of the Border to Black to fill in any holes from the proportionate scaling.

12 Pop Quiz!

Now Hit F5 to Run the Project, look at the results and try to figure out why the pictures have ended up where they are. The first clue is that the default HTML sets the Silverlight application to a Width and Height of 100%. The second clue is that the LayoutRoot Grid does not have a defined Width and Height and the parent UserControl only has DesignTime values set.

» Next Step

If you've figured out the answers to the pop quiz, feel free to take A Look at Text in Silverlight

To continue learning about Layout in Expression Blend read this Arranging objects article on the Expression Community site.