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.

Requirements

View the Setting up Visual Studio for WPF and Silverlight Development topic.

New Project 

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

1. Start Visual Studio 2010.
2. From the File menu hover over New, then select New Project…

    

   Figure 1 New Project Menu Selection

3. New Project Dialog will be displayed.

    

   Figure 2 New Project Dialog

• Step 1 – Select language; Visual Basic or C# then select Silverlight.
• Step 2 – Select Silverlight Application.
• Step 3 – Enter project name.

• Step 4 – Click OK. The Add Silverlight Application dialog will display.

1. Add Silverlight Application dialog allows the developer to choose how the Silverlight Application will be hosted during development.

    

   Figure 3 Add Silverlight Application

   1. Step 1 – Select, "Automatically generate a test page to host Silverlight at build time." This is the simplest way to develop a Silverlight application as it does not require an ASP.NET web site to be created. When the Silverlight application is run, Visual Studio will create web page on the fly to host the Silverlight application and open that web page in the default browser.
   2. Step 2 – Select the version of Silverlight you are targeting.
   3. Step 3 – Click OK to create your new Silverlight Application.

Creating Controls 

Controls can be added to an application using the ToolBox or by editing the XAML text directly in the XAML Editor.

1. Several techniques can be used to add a control from the ToolBox.
   1. Select a control from the ToolBox by clicking it, then clicking the design surface where you want the control to be created.
   2. Select a control from the ToolBox by clicking it, and then draw the control on the design surface where you want the control to be created.
   3. Click and drag a control from the ToolBox to the design surface. See Figure 4 below.
   4. With the target control selected on the design surface, double click the control in the ToolBox.

    

   Figure 4 Create Control

   1. Practice creating a button control using the above techniques on the design surface. When done create a button in the position shown in Figure 4.
   2. Notice when you drag the button to the design surface, the Grid control's blue adorner is displayed.

Control Adorners and Snaplines 

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.

1. Alignment Adorners
   1. Select the button on the design surface.
   2. In the Properties Window, select Category View and scroll the Layout category into view as in Figure 5 below.
   3. The button in Figure 5 is aligned to the Top, Left. This is similar to Windows Forms Docking.
      1. The button's top edge is pinned 37 pixels down from the top of the Grid. (see second value in the Margin property below)
      2. The button's left edge is pinned 31 pixels from the Grid. (see first value in the Margin property below)

    

   Figure 5 Alignment Adorners

1. Change the HorizontalAlignment property value using the Properties Window and notice the different adorners that are rendered. The green arrow in Figure 6 below indicates the HorizontalAlignment adorner.
   1. You can also change the HorizontalAlignment property by clicking on the adorner arrow or the round adorner pointed to by the green arrow.
2. Repeat for the VerticalAlignment property. The blue arrow in Figure 6 below indicates the VerticalAlignment adorner.
3. Return the button back to Top, Left alignment.
4. The red arrow in Figure 6 points to the resize adorner. Clicking and dragging a resize adorner will resize the control in the direction of the mouse movement.

Figure 6 Alignment and Resize Adorners

1. Edge Snaplines
   1. To move a control on the design surface, select it, hold the left mouse down and move the control using the mouse. Release left mouse button when move is complete.
   2. When moving a control near the edge of a container control like a grid an edge snapline will appear. This snapline makes it very easy to uniformly position one or more controls against the containers edge.
   3. In Figure 7 below, notice the two numbers in the left red rectangle. 12 and 12 indicate that the top left corner of the button is 12 pixels from the top and 12 pixels from the left of the grid.
   4. The right red rectangle in Figure 7 contains 213. This indicates the number of pixels from the right edge of the button to the edge of the grid.
   5. When moving a control, if you move the control past the edge snapline, the control will snap to the edge of the container control.

   

   Figure 7 Edge Snaplines

1. Control Snaplines
   1. Add another button to the form as picture below.
   2. Figure 8 shows the control snaplines that are displayed when the edges of one control line up with another. The number 20 is the number of pixels that separate the two buttons.

   

   Figure 8 Control Snaplines

Survey Application – Form Title 

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.

First Silverlight Application 

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

1. Fixed Sized Layout
   1. By default the root UserControl is auto sized at runtime. At design time the root UserControl is explicitly sized to make it easy to design.

    

   Figure 10 Default Auto Sized Root

   1. For this survey application we want a fixed size root so that our application will not consume the entire Internet browser window. To change from auto sized root to fixed size root, click the Size Mode button inside the red rectangle. See Figure 11 below. After you click the Size Mode button the button icon changes to reflect the current root size mode. Additionally a fixed Height and Width are now set on the root UserControl.

    

   Figure 11 Fixed Size Root

   1. Setting the root UserControl layout size.
      1. Select the root UserControl by clicking anywhere on the designer outside the UserControl's border.
      2. Change the Properties Window to Category View and scroll the Properties Window until Layout is visible as pictured in Figure 12 below.
      3. Change the Height and Width as indicated in Figure 12.

       

      Figure 12 Root Height and Width

2. Create a TextBlock control to the design surface.
   1. The TextBlock control is located in the Silverlight Controls tab of the ToolBox.
3. With the new TextBlock selected, set the Properties Window to Alpha View and enter, "text" in the Search Box. Notice as you type, the list of properties is quickly filtered.

1. Change the Text property to Survey.

    

   Figure 13 Form Title - TextBlock Text

2. We will now use the Properties Window to position the Title TextBlock.
   1. Change the Properties Window to Category View and scroll to the Layout category as shown in Figure 14 below.
   2. Set the HorizontalAlignment, VerticalAlignment and Margin properties as indicated below. Notice how the TextBlock is positioned on the design surface.
3. Using the Search Box, enter font. Use the Font Category editor and increase the Font Size to 18.

    

   Figure 14 Form Title - TextBlock positioning

Survey Application – Form Controls Part I 

It's time to give our user interface (UI) some controls the user can interact with at run-time.

1. Add the four controls pictured in Figure 15, two TextBlocks, TextBox and a ComboBox.
   1. Align all controls Top, Left.
   2. Use the control snaplines to assist in aligning and positioning the controls
   3. Select the TextBox. Using the Properties Window change the Name to txtName.
   4. Select the ComboBox. Change the Name to cboProduct.

   

   Figure 15 Form Controls

2. Select the top TextBlock on the design surface.
   1. Use Properties Window search feature and type in, "tex".
   2. Change the Text property to, "Name".
3. Click the bottom TextBlock on the design surface.
   1. Notice that the Text property for that TextBlock is now selected in the Properties Window.
   2. Change the Text property to, "Product".

   

   Figure 16 TextBlock Text Property

4. There are several ways to add items to a ComboBox. In this walk through we will add three static items to the ComboBox.
   1. Select the ComboBox.
   2. Search for items in the Properties Window. See Figure 17 below.
   3. Click the Items property ellipsis icon to open the Collection Editor for the Items property.

   

   Figure 17 ComboBox Items Collection

5. Adding items is very easy using the Collection Editor.
   1. Click on the Add button.
   2. Locate the Content property and change the value.
   3. You can also order the items or remove an item.
6. Using the Collection Editor in Figure 18, add three items, setting the Content property to the following strings:
   1. Deluxe Photo Paper
   2. Financial Calculator
   3. 4GB USB Thumb Drive
7. Click OK when done.
   1. In the XAML Editor, look at the XAML markup that was generated for you.

   

   Figure 18 Collection Editor

Survey Application – Form Controls Part II 

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.

1. Below the ComboBox add a Border control from the ToolBox Controls tab.

Figure 19 Border

1. The Border control can contain a single child control.
2. To add a StackPanel as a child of the Border drag the StackPanel control from the ToolBox to the Border. See Figure 20 below. Notice the blue adorner surrounding the Border. This indicates the parent control that your StackPanel will be a child of if dropped at the current location.

   

   Figure 20 Parenting Control on Creation

3. When controls are added to the design surface using the ToolBox some properties are given default values.

1. After creating the StackPanel the design surface will look similar to Figure 21 below. Notice in the XAML Editor and Document Outline that the StackPanel is a child of the Border.

Figure 21 StackPanel as a child of the Border 

1. For our application we want the StackPanel to automatically consume all the space inside the Border so that if the Border is resized at design or run-time, the StackPanel will grow or shrink with the Border.
2. Let's use the Properties Window to accomplish this task. See Figure 22 below.
   1. With the StackPanel selected, search for "wid" in the Properties Window.
   2. Click the Property Marker for the Width property and select Reset Value. This will change the Width property to Auto.

   

   Figure 22 Resetting Property Values

   1. Repeat for the Height property, setting its value to Auto.
   2. Search for "align". Reset the property value for the HorizontalAlignment and VerticalAlignment properties. When reset, their value will be changed to Stretch. The StackPanel is now auto sized and should look like Figure 23.

   

   Figure 23 Auto Sized StackPanel

3. With the StackPanel selected, add a TextBlock and three RadioButtons as children of the StackPanel by double clicking the TextBlock once and double clicking the RadioButton in the ToolBox three times. When completed the design surface will look similar to Figure 24 below.
4. A powerful feature of the Silverlight Designer is the ability to select multiple controls and edit common property values.
5. Select all four controls by control clicking them. (CTRL+Click). Notice that the Properties Window Name changes to Multiple objects selected.
   1. Use the Properties Window to reset the Height and Width property values for the selected controls.
   2. Using the Properties Window, search for "margin" and set the value to 3.5. Depending on the size of your Border the setting of the Margin property may cause one or more RadioButtons to disappear from view, we will correct that next.
6. Select the TextBlock by clicking on it. Change its Margin property to 0,3.5. This will cause the TextBlock to render slightly left of the RadioButtons.

   

   Figure 24 Multi-Selection Control Editing 

1. On the design surface select the Border, use the resize adorner on the bottom and resize the Border so it looks like Figure 25 below.
   1. Notice how the child StackPanel automatically resizes when its parent Border is resized.

   

   Figure 25 Resizing GroupBox

2. Use the Properties Window to assign the TextBlock Text property to Value. See Figure 26 below.

   

   Figure 26 Border Caption

3. Use the Properties Window to assign the following values to the three RadioButtons Content properties.
   1. Outstanding
   2. Good
   3. Unsatisfied

   

   Figure 27 RadioButton Content

4. Select the Border. Use the Properties Window to set the follow properties:
   1. CornerRadius to 5
   2. BorderBrush to LightGray
   3. BorderThickness to 1
   4. Padding to 3.5
5. The Border and contents should now look like Figure 28.

   

   Figure 28 Completed Border

6. You can set a default value for the ComboBox by assigning a value to the SelectedIndex property.
7. Select the ComboBox, use the Properties Window change the SelectedIndex property to 0.
   1. Notice how the ComboBox now displays the value of the ComboBoxItem at index 0. See Figure 29 below.

    

   Figure 29 ComboBox Selected Index

Survey Application – Form Controls Part III 

To complete our application we need to add two Buttons and add some code that will execute when the Button is clicked.

1. Add two buttons as pictured in Figure 30 below.
   1. Change the left Button Content property to OK and set the Name property to btnOK.
   2. Change the right Button Content property to Cancel and set the Name property to btnCancel.
2. The Silverlight Designer provides three ways to wire up code to a control event.
   1. Double clicking a control will wire up the default event.
   2. Using the Properties Window Events tab, locate the desired event and double click the region indicated in Figure 30.
      1. If the event code is already in the code behind, you can select the method name in the ComboBox instead of double clicking to create a new event handler.
   3. Using the XAML Editor to create a new event handler or select a method.
3. Select the OK Button. Using the Properties Window Events tab, double click next to the Click event. This will wire up the Click event handler and add code the code behind.

   

   Figure 30 Properties Window Events Tab 

   1. Visual Basic wires up the event using the Handles construct.
   2. C# wires up the event by adding the event name and event handler to the XAML markup.
4. On the design surface, double click the Cancel Button to generate the event handler for this Button.
   1. Add the MessageBox.Show method call to the generated event handlers.

Visual Basic Code

Partial Public Class Page
    Inherits UserControl

    Public Sub New()
        InitializeComponent()
    End Sub

    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")
    End Sub

    Private Sub btnCancel_Click(ByVal sender As System.Object,
                                ByVal e As System.Windows.RoutedEventArgs) Handles btnCancel.Click
        MessageBox.Show("Survey cancelled")
    End Sub
End Class

C# Code

namespace FirstSilverlightApplication
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }

        private void btnOK_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Thank you for your feedback");
        }

        private void btnCancel_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Survey cancelled");
        }
    }
}

1. Use the Document Outline to select root Grid. See Figure 31 below.

   

   Figure 31 Document Outline Selecting Root Grid 

2. Using the Brush Editor in the Properties Window, change the Background color to WhiteSmoke as picture in Figure 32.
   1. The reason we are changing the Background color is so that you can see the boundaries of the Silverlight application when its run while being hosted in a white web page.

    

   Figure 32 Root Grid Background

3. Run your completed application by pressing F5.
   1. Enter a name in the name TextBox.
   2. Select a product from the ComboBox.
   3. Click the RadioButtons to see how only one is selected at time.
   4. Clicking the OK or Cancel buttons will cause the MessageBox to display its message.

   

   Figure 33 Running the Application

Comments 

Microsoft values your opinion about our products and documentation. In addition to your general feedback it is very helpful to understand:

• How the above feature enables your workflow
• What is missing from the above feature that would be helpful to you

Thank you for your feedback and have a great day,

Karl Shifflett
Visual Studio Cider Team