• Article

Getting Started with Controls

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Controls are designed to be consistent. Once you understand the basics of one type of control, it is easy to use other controls. For example, adding a control to your application, changing the control appearance, and handling control events are similar across all Silverlight controls. You can complete all these tasks easily with the Silverlight Designer for Visual Studio if you are using Visual Studio 2010. You can also complete these tasks with XAML or code. This topic describes some of the control tasks that are shared among Silverlight controls.

NoteNote:

For a list of all the controls you can use in Silverlight-based applications, see Controls and Dialog Boxes.

This topic contains the following sections.

  • Adding a Control to an Application
  • Using Properties to Change the Appearance of a Single Control
  • Using Styles to Change the Appearance of Multiple Controls
  • Creating Control Event Handlers
  • Related Topics

Adding a Control to an Application

You can add a control to your application in XAML, in code, or by using the Silverlight Designer. If you want to reference the control in the code-behind file, you must specify a name for the control by using the x:Name attribute in the XAML declaration. For more information, see x:Name Attribute. 

When you use a control from the Silverlight SDK or Silverlight Toolkit, you have to reference the correct assembly, and you have to add a namespace mapping in your XAML file. One advantage of using the designer is that when you drag controls from the Toolbox, the assembly reference and a namespace mapping is added automatically. If you add controls in XAML or code, you have to manually add an assembly reference and a namespace mapping. For more information about XAML namespace mappings, see Silverlight XAML Namespaces, and Mapping XAML Namespaces as Prefixes.

To add a control to the application using the designer

  1. In the Toolbox, locate the control you want to use.

    The following illustration shows an example of the Silverlight Toolbox.

    Silverlight toolbox

  2. Double-click the control to add it to the design surface.

    -or-

    Drag the control to the desired location on the design surface.

To add a control to the application using XAML

  1. If necessary, in Solution Explorer, add a reference to the assembly.

  2. If necessary, in the XAML file, add a namespace mapping.

  3. Declare the control in XAML.

    The following example demonstrates how to declare a button, name it, and set its content in XAML.

    <Button Margin="5" Width="100" Content="Click Me" x:Name="button1"/>

To add a control to the application using code

  1. If necessary, in Solution Explorer, add a reference to the assembly.

  2. If necessary, in the XAML file, add a namespace mapping.

  3. In the code-behind file, create the control in code.

  4. Add the control to the visual tree so that it will display in the application.

    The following example demonstrates how to create a button, name it, set its content in code, and add it to the Children collection of the LayoutRoot.

    Dim button1 As Button = New Button
button1.Content = "Click Me"
button1.Name = "button1"
LayoutRoot.Children.Add(button1)

    Button button1 = new Button();
button1.Content = "Click Me too";
button1.Name = "button1";
this.LayoutRoot.Children.Add(button1);

Using Properties to Change the Appearance of a Single Control

You can change the appearance of a control by setting control properties, such as Width, Height, or Background. You can make these changes in the Silverlight Designer by manipulating the control on the design surface or by setting these properties in the Properties window. Alternatively, you can make these changes in XAML or in code.

To change the size of a control in the designer

  1. Select the control on the design surface.

    Resizing handles will appear.

  2. Drag one of the resizing handles to resize the control.

    The following illustration shows a button being resized with the resizing handles.

    Control resizing tools

To set properties for a control using the Properties window

  1. Right-click the control to show its context menu.

    The following illustration shows an example of the context menu.

    Control context menu

  2. Select Properties.

  3. In the Properties window, locate the property you want to set and specify the new value.

    The following illustration shows an example of the Properties window.

    Properties window

To set properties in XAML

  1. In XAML view, locate the control you want to change.

  2. Change existing properties or add new properties. Where applicable, an IntelliSense window will appear.

    The following example demonstrates how to set properties that change the appearance of a button in XAML. The properties used in this example apply to many Silverlight controls.

    <Button Margin="5" Height="50" Width="100" Background="Blue" Content="Click Me!" x:Name="button2" />

To set properties in code

  • In the code-behind file, specify property values for a control in code.

    The following example demonstrates how to set properties that change the appearance of a button in code. The properties used in this example apply to many Silverlight controls.

    Dim button2 As Button = New Button
button2.Height = 50
button2.Width = 100
button2.Background = New SolidColorBrush(Colors.Blue)
button2.Content = "Click Me"

    Button button2 = new Button();
button2.Height = 50;
button2.Width = 100;
button2.Background = new SolidColorBrush(Colors.Blue);
button2.Content = "Click Me";

Using Styles to Change the Appearance of Multiple Controls

To apply the same property settings over multiple controls of the same type, you can create and apply a style to the control. A style is basically a collection of property settings that targets a particular type. Styles are typically defined in XAML. The targetType of the style determines what type of control it is applied to. Alternatively, you can assign a key to the style (by using the x:Key attribute) and reference it by name when you declare a type. For more information about styles, see Style.

You can either assign a style to a control in code, or use the designer.

To declare a style and apply it to a control

  1. In a XAML file, create a resources section, such as Grid.Resources or StackPanel.Resources.

  2. Add a Style element with an x:Key Attribute.

  3. Add one more Setter elements to the Style.

  4. In the XAML declaration for the control, add a Style property along with a StaticResource Markup Extension.

    The following example demonstrates how to declare a style as a resource, assign it a key, and apply it to a button control in XAML.

    <StackPanel.Resources>
    <Style TargetType="Button" x:Key="myButtonStyle">
    <Setter Property="Background" Value="Purple" />
    <Setter Property="Foreground" Value="#9900FF" />
    <Setter Property="Height" Value="50" />
    <Setter Property="Width" Value="100" />
    <Setter Property="Margin" Value="5" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Cursor" Value="Hand" />
    <Setter Property="FontSize" Value="14" />
    </Style>
</StackPanel.Resources>


...


<Button x:Name="button3" Width="130" Content="Click Me Instead!" Style="{StaticResource myButtonStyle}"/>

Apply a style to a control with the designer

  1. As described in the previous procedure, create a style as a resource.

  2. Select the control you want to apply the style to.

  3. Open the Properties window and find the Style property.

  4. Click the value column on the right to open the property resource editor.

  5. Expand the Local section and select the style from the list.

    A Style property along with a StaticResource Markup Extension is added to control in XAML.

Property settings and styles enable you to change only some aspects of a control's appearance. To completely change the look and behavior of the control, you need to work with the control's template. A ControlTemplate is defined in XAML, either inline or in a separate file, and it contains the visual appearance and visual behavior of a control. To change a control's template, you set the Template property in XAML when you create a style. Most controls have a default control template. You can replace the default control template or you can modify the template to add, rearrange, or delete parts of a control. You can find the default template for a control in Control Styles and Templates. For more information about changing the template for a control, see Control Customization and Customizing the Appearance of an Existing Control by Using a ControlTemplate.

Creating Control Event Handlers

Each control has events that enable you to respond to actions from the user. For example, a button control contains a click event that is raised when the button is clicked. You create a method, called an event handler, to handle the event. You can create an event handler in the Silverlight Designer or in XAML. You can also create an event handler manually in code, provided that you have set the name property for the control. For more information about events, see Events Overview for Silverlight.

To create an event handler using the Properties window

  1. In Design view, select the control you want to create an event handler for.

  2. In the Properties window, click the Events button.

    The events for the control are shown, with the default event selected.

    Properties window, events button

  3. Double-click the event you want to handle to create a new event handler.

    The event handler for the control is created. The code-behind file is opened and the cursor is positioned in the event handler. For Visual C# projects, an attribute that specifies the event handler is added to the XAML file. For Visual Basic projects, the XAML file is not modified.

To create an event handler in the XAML editor

  1. In XAML view, select the control you want to create an event handler for.

  2. In the start tag for the element, begin typing the event name that you want to handle, for example Click or the MouseEnter event.

    When you begin typing the event name, an IntelliSense window appears with the available events as shown in the following illustration.

    IntelliSense list showing available events

  3. Select the event and then press TAB.

    A window should appear as shown in the following illustration.

    IntelliSense for new event handler

  4. Double-click <New Event Handler>.

    The default name for the event handler appears in XAML and an event handler is created in the code-behind file.

  5. Right-click the event and in the context menu, select Navigate to Event Handler as shown in the following illustration.

    Navigate to Event Handler shortcut menu

    The code-behind file is opened and the cursor is positioned in the event handler.

    The following example shows a Click event for a Button that is associated with an event handler named button5_Click.

    Private Sub button5_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

End Sub

    private void button5_Click(object sender, RoutedEventArgs e)
{

}

    <Button Margin="5" Width="100" Content="Click Me" x:Name="button5" Click="button5_Click"/>

To create an event handler in code

  1. In XAML, make sure the control has a name.

  2. In the code-behind, use the Handles keyword for Visual Basic or the += operator for C# to specify the event handler you want to use. For more information, see Events Overview for Silverlight.

    The following example shows a Click event for a Button that is associated with an event handler named button6_Click.

    Private Sub button6_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) Handles button6.Click

End Sub

    button6.Click += new RoutedEventHandler(button6_Click);


...


private void button6_Click(object sender, RoutedEventArgs e)
{

}

    <Button Margin="5" Width="100" Content="Click Me" x:Name="button6" />