This article has a corresponding video that can be viewed here.
Are you new to Silverlight? This walkthough will enable you to have a successful first time experience with the Silverlight Designer and creating your first Silverlight application. You will learn to easily create, move and align controls and edit control collections using the powerful features of the Silverlight Designer for Visual Studio 2010. We will complete the exercise by developing a Survey Silverlight application.
View the Setting up Visual Studio for WPF and Silverlight Development topic.
The first three short sections of this walk though introduce you to using the Silverlight Designer for creating, moving, aligning and sizing controls.
Silverlight applications are all hosted on a web page. The Silverlight application can consume the entire web page, or be integrated into a web page and interact with other web controls. This application will be a small survey application that simply displays in the upper left corner of the web page.
To create your first Silverlight Application Project
Figure 1 New Project Menu Selection
Figure 2 New Project Dialog
The Target Framework Version ComboBox value defaults to the last selection made. When creating a new project, verify the desired Target Framework Version is selected.
In Silverlight applications, the Target Framework Version refers to the ASP.NET Web Site that will be hosting the Silverlight application and not the Silverlight application itself.
While it is permissible to have spaces in the project name this practice discouraged.
Figure 3 Add Silverlight Application
Controls can be added to an application using the ToolBox or by editing the XAML text directly in the XAML Editor.
Figure 4 Create Control
The Silverlight Designer displays control adorners on the design surface to assist developer when using the mouse to move or resize a control. Adorners also supply visual feedback about control alignment and other control specific information.
When controls are being moved or resized, the Silverlight Designer displays various types of snaplines to assist the developer in positioning a control on the design surface relative to other controls.
Figure 5 Alignment Adorners
The Margin property is of type Thickness. The property values are read left, top, right and bottom. A Thickness can also be represented with a single value or with two values. If a single value is supplied, all four sides are equal. If two values are supplied they are read (left and right), (top and bottom).
Figure 6 Alignment and Resize Adorners
Figure 7 Edge Snaplines
To turn off Snaplines when moving a control, hold the ALT key down while dragging the control around on the design surface.
Use arrow keys to nudge a control, pixel by pixel into perfect position!
Figure 8 Control Snaplines
At this time delete any buttons or other controls you have placed on the design surface. Select the control and press the DELETE key to delete the control.
Please save your application by pressing CTRL+S or by clicking the Save icon on the ToolBar.
The rest of this walk through will focus on creating this Simple Survey application. You will learn many new features of the Silverlight Designer while building this application.
Figure 9 Finished Application
Figure 10 Default Auto Sized Root
Figure 11 Fixed Size Root
Figure 12 Root Height and Width
The search feature of the Properties Window filters the properties and can save you lots of time during application development. Very handy.
Figure 13 Form Title - TextBlock Text
Figure 14 Form Title - TextBlock positioning
In Figures 13 and 14, notice the preview of the TextBlock in the Preview Icon displayed to the left of the control name. This same Preview Icon is also displayed in the Document Outline when the mouse is hovered over controls listed there.
It's time to give our user interface (UI) some controls the user can interact with at run-time.
Figure 15 Form Controls
Figure 16 TextBlock Text Property
Figure 17 ComboBox Items Collection
Figure 18 Collection Editor
In this section we will use a Border to surround the RadioButtons. RadioButtons are mutually exclusive; meaning that when one is selected the previously selected RadioButton is deselected automatically.
We will also introduce a new panel control, the StackPanel. StackPanels stack their child controls either horizontally or vertically based on their Orientation property.
Figure 19 Border
Figure 20 Parenting Control on Creation
You can also drag controls from the ToolBox to the XAML Editor. When a control is dragged to the XAML editor, no properties are given default values.
Figure 21 StackPanel as a child of the Border
Figure 22 Resetting Property Values
Figure 23 Auto Sized StackPanel
Figure 24 Multi-Selection Control Editing
You can also multi-select all controls in a container by selecting the container and pressing CTRL+A. In figure 24 above, select the StackPanel and press CTRL+A to select the three RadioButtons.
Figure 25 Resizing GroupBox
Figure 26 Border Caption
Figure 27 RadioButton Content
Figure 28 Completed Border
Figure 29 ComboBox Selected Index
To complete our application we need to add two Buttons and add some code that will execute when the Button is clicked.
Figure 30 Properties Window Events Tab
Visual Basic Code
Partial Public Class Page
Public Sub New()
Private Sub btnOK_Click(ByVal sender As System.Object,
ByVal e As System.Windows.RoutedEventArgs) Handles btnOK.Click
MessageBox.Show("Thank you for your feedback")
Private Sub btnCancel_Click(ByVal sender As System.Object,
ByVal e As System.Windows.RoutedEventArgs) Handles btnCancel.Click
public partial class Page : UserControl
private void btnOK_Click(object sender, RoutedEventArgs e)
MessageBox.Show("Thank you for your feedback");
private void btnCancel_Click(object sender, RoutedEventArgs e)
Figure 31 Document Outline Selecting Root Grid
Figure 32 Root Grid Background
Figure 33 Running the Application
Microsoft values your opinion about our products and documentation. In addition to your general feedback it is very helpful to understand:
Thank you for your feedback and have a great day,
Visual Studio Cider Team
Thank you Karl!
Very nice hello walkthrough.
Very Nice. Learn how to show default selection in Combobox