Getting Started with Controls
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.
This topic contains the following sections.
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
In the Toolbox, locate the control you want to use.
The following illustration shows an example of the Silverlight Toolbox.
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
If necessary, in Solution Explorer, add a reference to the assembly.
If necessary, in the XAML file, add a namespace mapping.
Declare the control in XAML.
The following example demonstrates how to declare a button, name it, and set its content in XAML.
To add a control to the application using code
If necessary, in Solution Explorer, add a reference to the assembly.
If necessary, in the XAML file, add a namespace mapping.
In the code-behind file, create the control in code.
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.
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
Select the control on the design surface.
Resizing handles will appear.
Drag one of the resizing handles to resize the control.
The following illustration shows a button being resized with the resizing handles.
To set properties for a control using the Properties window
Right-click the control to show its context menu.
The following illustration shows an example of the context menu.
Select Properties.
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.
To set properties in XAML
In XAML view, locate the control you want to change.
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.
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.
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
In a XAML file, create a resources section, such as Grid.Resources or StackPanel.Resources.
Add a Style element with an x:Key Attribute.
Add one more Setter elements to the Style.
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> > </StackPanel.Resources> ... <Button x:
Apply a style to a control with the designer
As described in the previous procedure, create a style as a resource.
Select the control you want to apply the style to.
Open the Properties window and find the Style property.
Click the value column on the right to open the property resource editor.
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. 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
In Design view, select the control you want to create an event handler for.
In the Properties window, click the Events button.
The events for the control are shown, with the default event selected.
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
In XAML view, select the control you want to create an event handler for.
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.
Select the event and then press TAB.
A window should appear as shown in the following illustration.
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.
Right-click the event and in the context menu, select Navigate to Event Handler as shown in the following illustration.
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.
To create an event handler in code
In XAML, make sure the control has a name.
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.