Skip navigation

Silverlight 3 Controls Quick Start Guide

Get acquainted with new layout, input, and items controls in Silverlight 3 Beta

Silverlight 101

Silverlight 3 Controls Quick Start Guide

Get acquainted with new layout, input, and items controls in Silverlight 3 Beta

By Dan Wahlin

Controls are where it's at in the world of software development. Whether you're building web, desktop, or mobile applications, controls can minimize the amount of code that has to be written leading to greater overall productivity. Although the initial release of Silverlight lacked any line-of-business controls, Silverlight 3 provides a rich set of controls that can be used to build applications capable of collecting and displaying a variety of data. Here I'll introduce you to some of the controls available in Silverlight 3 Beta and demonstrate how they can be used. I'll provide an overview of layout controls, user-input controls, and items controls. Let's start by examining how to define and use layout controls.

Layout Controls

Layout controls are a key part of Silverlight applications, since they allow other types of controls to be arranged on a UI. Silverlight provides several different controls that you can use, such as Canvas, Grid, StackPanel, and Border. The Canvas control allows controls to be arranged using absolute positioning techniques. For example, to lay out rectangle and square shapes, you could use the following XAML:

Canvas.Top="50" Canvas.Left="10" RadiusX="10" RadiusY="10" />

Canvas.Top="50" Canvas.Left="200" />

Both shapes are positioned using the Canvas.Top and Canvas.Left "attached properties," which positions the respective shape within the parent Canvas container. In this example, the Rectangle is positioned 10 pixels in from the left of the Canvas (not from the overall UI) and 50 pixels from the top of the Canvas, while the Ellipse is positioned 200 pixels from the left and 50 pixels from the top.

The Canvas control works great when you need absolute control over the position of controls, but in many cases it's more effective to position controls using more of a flow layout, so that they can adapt to changes in the width and height of the UI. The StackPanel control provides a great way to "stack" controls vertically or horizontally. It stacks controls vertically by default, but if you'd like to stack the controls horizontally, you can set the Orientation property to Horizontal. Following is an example of using the StackPanel to stack the two shapes shown earlier; Figure 1 shows an example of what Silverlight renders.

Figure 1: Using the StackPanel controls to stack controls vertically

RadiusX="10" RadiusY="10" />

You can add additional spacing between the controls by setting their respective Margin property. The margin property allows left, top, right, and bottom values to be set, as the following example shows:

Margin="5,10,5,0" />

You can also apply a single value to the Margin property in cases where spacing should be applied equally around all four sides. This example would add a margin of 10 pixels around all sides of an Ellipse:

In cases where you need more control over layout precision than the StackPanel provides but don't want to resort to absolute positioning, you can use the Grid control to lay out controls and data in a tabular format, much like the standard HTML table element. Figure 2 shows an example of using the Grid control to arrange a few controls for a simple form.

HorizontalAlignment="Left"

VerticalAlignment="Top"

Width="150" Grid.Column="1" />

HorizontalAlignment="Left"

VerticalAlignment="Top" Width="150"

Grid.Row="1" Grid.Column="1" />

HorizontalAlignment="Left">

Hide comments

Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish