When you work with HTML, you build the basic visual structure of a page by using tables or divs (in more modern browsers, you can use a canvas as well). In Silverlight 5 we have three basic elements: Canvas, StackPanel, and Grid.
This layout control permits us to place Child controls in coordinates relative to the canvas parent (taking into account that the upper-left corner of the canvas is the (0,0) coordinate) X, Y, Z (Z for the ZIndex). It is perfect for the implementation of drawing applications or those devoted to diagram management.
In the following code you can see an example where a rectangle and an ellipse are drawn:
<Canvas>
<Rectangle
Canvas.Top="25" Canvas.Left="50"
Fill="Blue" Width="70"
Height="80" StrokeThickness="3" Stroke="Black" />
<Ellipse
Canvas.Top="50" Canvas.Left="80"
Fill="Yellow" Width="120"
Height="80" StrokeThickness="3" Stroke="Black"
/>
</Canvas>
Canvas.Top and Canvas.Left are attached properties. Such properties allow a child element to store a value associated with a property defined on an ancestor element.
The result is as shown in the following screenshot:
The StackPanel control allows us to pile up child controls in horizontal or vertical rows. We can nest several StackPanel controls. This combination makes it possible to implement complex layouts, as shown in the following code and the resulting screenshot:
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<Image Source="./images/Hydrangeas.jpg" Height="200" Margin="5"/>
<StackPanel Orientation="Horizontal">
<Image Source="./images/Chrysanthemum.jpg" Height="100" Margin="5"/>
<Image Source="./images/Hydrangeas.jpg" Height="100" Margin="5"/>
<Image Source="./images/Jellyfish.jpg" Height="100" Margin="5"/>
</StackPanel>
</StackPanel>
A grid permits us to place content in rows and columns. The concept is similar to an HTML table, but much more evolved. Before you start adding controls to the grid, you need to specify its layout. This is done with the Grid.RowDefinitions
and Grid.ColumnDefinitions
collection.
To set the position of the element inside the grid, we use the attached properties Grid.Row
and Grid.Column
. The first position starts at 0. To establish the width or height of a given row or column, we can use a fixed pixel width/height. Let the layout manager autoadjust the size to the space available (auto), or provide a given width/height based on percentages instead of pixels.
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="./images/Desert.jpg"
Height="100" Margin="5"
Grid.Row="0" Grid.Column="0"/>
<TextBlock Text="Desert"
Grid.Row="0" Grid.Column="1"/>
<TextBlock Text="Geographical area whose average annual precipitation is less than 250 millimeters (10 in) per year."
Grid.Row="0"
Grid.Column="2"
TextWrapping="Wrap"
/>
<Image Source="./images/Tulips.jpg"
Height="100" Margin="5"
Grid.Row="1" Grid.Column="0"/>
<TextBlock Text="Tulip"
Grid.Row="1"
Grid.Column="1"/>
<TextBlock Text="Perennial, bulbous plant which belongs to the family Liliaceae."
Grid.Row="1"
Grid.Column="2"
TextWrapping="Wrap"
/>
</Grid>
Silverlight offers us a series of user controls, which are available in the Toolbox palette. The most common ones are shown in the following screenshot:
You can find additional controls (for free) in the Silverlight Toolkit (http://silverlight.codeplex.com/). There are plenty of commercial libraries available.