You can create a control in XAML or in code. If you create a control in XAML and you want to reference it later in the code-behind file, you must specify a name using the x:Name attribute in the XAML declaration. For more information, see x:Name Attribute. The following example demonstrates how to declare a button, name it, and set its content in XAML and in code.

Dim button1 As Button = New Button
button1.Content = "Click Me"

Button button1 = new Button();
button1.Content = "Click Me";

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

You can change the appearance of a control by setting control properties, such as Width, Height, or Background. You can make these changes in XAML or in code.

The following example demonstrates how to set properties that change the appearance of a button in XAML and 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";

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

To apply the same property settings over multiple controls of the same type, you can create and apply a style to the type. A style is basically a collection of property settings applied to multiple instances of the same 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 x:Key to the style and reference it by name when you declare a type. For more information about styles, see Style.

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

<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>


...


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

Property settings and styles change some aspects of a control's appearance, but applying a new template can completely change the look of the control. Although a template does not change the methods and events of the control type, it can change the appearance of the control, depending on different states, such as pressed or disabled. You define and set a control's template using XAML. Each control has a default template that you can replace with a custom template. You can find the default template for a control in the Control Styles and Templates section of the documentation. For more information about control templates, see Customizing the Appearance of an Existing Control by Using a ControlTemplate.

Each control has associated 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 assign a method, called an event handler, to handle the event. You typically associate an event with its event handler in XAML. However, you can do this in code, provided that you have set the name property for the control. The following example shows how to associate an event with its event handler in XAML and in code. For more information about events, see Events Overview for Silverlight.

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

AddHandler button6.Click, AddressOf Me.button6_Click

button6.Click += new RoutedEventHandler(button6_Click);

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

Concepts

Other Resources