Open Visual Studio 2010 and create a new Silverlight project called EventHandlers. Allow Visual Studio to create a Web Application project to host the application.

When the project is created, you should be looking at the MainPage.xaml file. If you do not see the XAML source, switch to that view so that you can edit the XAML. Within the root Grid of the Silverlight page, add grid row and column definitions (as explained in Chapter 3) to define four rows and two columns, as follows:

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="70" />
        <RowDefinition Height="70" />
        <RowDefinition Height="70" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
</Grid>

Next, add a Button control to the upper-left grid cell and a TextBlock control in the upper-right cell.

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="70" />
        <RowDefinition Height="70" />
        <RowDefinition Height="70" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Button
        Width="125"
        Height="35"
        Content="XAML Event" />
    <TextBlock
        Text="Click the XAML Event!"
        Grid.Column="1"

VerticalAlignment="Center"
        HorizontalAlignment="Center" />
</Grid>

Add the Click property to the button. When you type Click=, Visual Studio will prompt you with the option of automatically creating a new event handler, as shown in Figure 4-2. When the <New Event Handler> option is displayed, simply press Enter, and Visual Studio will complete the Click property, as follows:

<Button Width="125" Height="35"
    Content="XAML Event" Click="Button_Click" />

Figure 4.2. Visual Studio's automatic creation of an event handler

In addition, Visual Studio automatically adds an event handler called Button_Click to the code-behind class for the Silverlight application, as follows:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {

    }
}

For this example, you will change the Text property within the TextBlock. In order to do this, you first need to give the TextBlock a name so you can access it from the code behind. Add the following code:

<TextBlock
    Name="txtXAMLEventText"
    Text="Click the XAML Event!"
    Grid.Column="1"
    VerticalAlignment="Center"
    HorizontalAlignment="Center" />

Now change the Text property of the TextBlock within the Button_Click event, as follows:

private void Button_Click(object sender, RoutedEventArgs e)
{
    txtXAMLEventText.Text = "Thank you for clicking!";
}

Run the application and click the XAML Event button. The text to the right of the button will change to "Thank you for clicking." Figures 4-3 and 4-4 show the application before and after clicking the XAML Event button.

Figure 4.3. The TextBlock before the button is clicked

Now that you have seen how to define an event handler in the XAML markup, in the next exercise you will continue by adding another event handler using managed code.

Figure 4.4. The TextBlock after the button is clicked

Add another Button and TextBlock in the second row of the Grid, as follows:

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="70" />
        <RowDefinition Height="70" />
        <RowDefinition Height="70" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Button
        Width="125"
        Click="Button_Click"
        Height="35"
        Content="XAML Event" />
    <TextBlock
        Name="txtXAMLEventText"
        Text="Click the XAML Event!"
        Grid.Column="1"
        VerticalAlignment="Center"
        HorizontalAlignment="Center" />

    <Button
        Width="125"
        Height="35"
        Content="Managed Event"
        Grid.Row="1" />
    <TextBlock
        Text="Click the Managed Event!"
        Grid.Column="1"
        VerticalAlignment="Center"
        HorizontalAlignment="Center"
        Grid.Row="1" />
</Grid>

In order to reference the new Button control in managed code, you must give it and the TextBlock control a name, as shown in the following snippet:

<Button
    Name="btnManaged"
    Width="125"
    Height="35"
    Content="Managed Event"
    Grid.Row="1" />
<TextBlock
    Name="txtManagedEventText"
    Text="Click the Managed Event!"
    Grid.Column="1"
    VerticalAlignment="Center"
    HorizontalAlignment="Center"
    Grid.Row="1" />

Your page should now appear as shown in Figure 4-5.

Figure 4.5. The updated Silverlight page

Next, you need to add the event handler. Right-click the Silverlight page and select View Code. This will switch to the code behind of the page.

From here, you will use the standard CLR language-specific syntax for adding event handlers. Since you are using C#, the syntax is to use the += operator and assign it to a new EventHandler. Visual Studio will help you with this.

After the InitializeComponent() method call in the Page constructor, start typing "this.btnManaged.Click +=". At this point, Visual Studio will display the message "new RoutedEventHandler(bntManaged_Click); (Press TAB to insert)," as shown in Figure 4-6. Press Tab to complete the event handler definition.

Figure 4.6. Visual Studio assisting with wiring up an event handler in managed code

Visual Studio will once again prompt you for the name of the event handler. Go ahead and press Tab again to accept the default name. At this point, your source should look like this:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        this.btnManaged.Click += new RoutedEventHandler(btnManaged_Click);
    }
    void btnManaged_Click(object sender, RoutedEventArgs e)
    {
        throw new NotImplementedException();
    }

private void Button_Click(object sender, RoutedEventArgs e)
    {
        txtXAMLEventText.Text = "Thank you for clicking!";
    }
}

Now the only thing left to do is add the code to the event handler. You will notice that, by default, Visual Studio added code to automatically throw a NotImplementedException. Remove that line and replace it with the following line to change the TextBlock control's text.

void btnManaged_Click(object sender, RoutedEventArgs e)
{
    txtManagedEventText.Text = "Thank you for clicking";
}

Run the application and click the Managed Event button. You will see the text for the second TextBlock is updated to say "Thank you for clicking," as shown in Figure 4-7.

Figure 4.7. The result of the managed code event handler

In Visual Studio, create a new Silverlight application named TextBoxControl. Allow Visual Studio to create a Web Application project to host your application.

In the MainPage.xaml file, within the root Grid element, add three RowDefinition items, as follows:

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
        <RowDefinition />
    </Grid.RowDefinitions>
</Grid>

Add three TextBox and TextArea controls contained in a horizontal-oriented StackPanel to the first row, a Button control to the second row, and an Ellipse control to the third row. In addition, place a TextBlock in the third row to stack on top of the Ellipse control for error-reporting purposes. Name each of the TextBox controls, as well as the Button control and the TextBlock. These additions are shown in the following code:

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
        <RowDefinition />
    </Grid.RowDefinitions>

    <StackPanel
        Orientation="Horizontal"
        HorizontalAlignment="Center">

        <TextBlock
            VerticalAlignment="Center"
            Text="Red:" />
        <TextBox
            Name="txtRed"
            Height="24"
            Width="50"
            Margin="5" />
        <TextBlock
            VerticalAlignment="Center"
            Text="Green:" />
        <TextBox
            Name="txtGreen"
            Height="24"
            Width="50"
            Margin="5" />
        <TextBlock
            VerticalAlignment="Center"
            Text="Blue:" />
        <TextBox
            Name="txtBlue"
            Height="24"
            Width="50"
            Margin="5" />
    </StackPanel>

    <Button
        Name="btnTry"
        Content="Try Color"
        Grid.Row="1"
        Width="100"
        Height="24" />
    <Ellipse
        Name="ellipse"
        Grid.Row="2"
        Stroke="Black"
        StrokeThickness="5"
        Margin="20" />
    <TextBlock
        Name="lblColor"

Grid.Row="2"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        FontSize="20"
        FontFamily="Arial"
        FontWeight="Bold"  />

</Grid>

Now add the Click event to the Button control. Do this in the code behind, as explained earlier in the section "Try It Out: Declaring an Event in XAML."

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        this.btnTry.Click += new RoutedEventHandler(btnTry_Click);
    }

    void btnTry_Click(object sender, RoutedEventArgs e)
    {
        throw new NotImplementedException();
    }
}

When the button is clicked, the application will change the Fill property of the Ellipse control, which expects a SolidColorBrush. You can create the SolidColorBrush using the Colors.FromArgb() method, which accepts four arguments: one for opacity, and one byte each for the red, green, and blue values. You will get the red, green, and blue values from the TextBox controls using the Text property.

void btnTry_Click(object sender, RoutedEventArgs e)
{
    this.ellipse.Fill = new SolidColorBrush(
        Color.FromArgb(
            255,
            byte.Parse(this.txtRed.Text),
            byte.Parse(this.txtGreen.Text),
            byte.Parse(this.txtBlue.Text)
        ));

}

Since the values for red, green, and blue must be an integer from 0 to 255, you can either validate them using Silverlight validation or take the easy way out and just wrap your code in a try/catch block, and then report the error using the TextBlock. You'll go with the latter approach here. To keep things clean, you will make sure the error message is cleared if all works correctly. Here is the updated code:

void btnTry_Click(object sender, RoutedEventArgs e)
{
    try
    {
        this.ellipse.Fill = new SolidColorBrush(
        Color.FromArgb(
            255,
            byte.Parse(this.txtRed.Text),
            byte.Parse(this.txtGreen.Text),
            byte.Parse(this.txtBlue.Text)
        ));

        this.lblColor.Text = "";
    }
    catch
    {
        this.lblColor.Text = "Error with R,G,B Values";
    }
}

Build and run the application to see what you get. Type 255, 0, and 0 in the Red, Green, and Blue text boxes, respectively, and then click the Try Color button. You should see the ellipse turn red. Just for the fun of it, if you leave one of the values blank or enter a value other than 0 through 255, you will see the error message.

Create a new Silverlight application in Visual Studio and call it CheckBoxRadioButton. Allow Visual Studio to create a Web Application project to host the application.

In the MainPage.xaml file, divide the root Grid into two rows. In each row, place a StackPanel with vertical orientation and a Margin property set to 10.

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>

    <StackPanel Orientation="Vertical" Grid.Row="0" Margin="10">
    </StackPanel>

    <StackPanel Orientation="Vertical" Grid.Row="1" Margin="10">
    </StackPanel>
</Grid>

The top row will be used to demonstrate the use of the RadioButton control, and the bottom row will feature the CheckBox control. Let's begin with the RadioButton.

The RadioButton control allows users to select only one selection out of a number of RadioButton controls that share the same group name. This is set using the RadioButton's Grouping property.

Although you could simply type in each of the color choices for the radio buttons as text using the Content property, I thought it would be less boring to use colored rectangles instead. As we discussed earlier in the section "Nesting Controls Within Controls," one of the benefits of Silverlight controls is that you can nest just about anything within the different controls. This is just another example of that flexibility.

Place five RadioButton controls in the first StackPanel, each with a Rectangle control of a different color. For the group name, use FavoriteColor. To make the content of the RadioButton controls display as left-justified, set the HorizontalAlignment property to Left for each one. Here is the code:

<StackPanel Orientation="Vertical" Grid.Row="0" Margin="10">
    <TextBlock
        Text="What is your favorite color?" />
    <RadioButton HorizontalAlignment="Left" GroupName="FavoriteColor">
        <Rectangle Width="100" Height="10" Fill="Red" />
    </RadioButton>
    <RadioButton HorizontalAlignment="Left" GroupName="FavoriteColor">
        <Rectangle Width="100" Height="10" Fill="Blue" />
    </RadioButton>
    <RadioButton HorizontalAlignment="Left" GroupName="FavoriteColor">
        <Rectangle Width="100" Height="10" Fill="Green" />
    </RadioButton>
    <RadioButton HorizontalAlignment="Left" GroupName="FavoriteColor">
        <Rectangle Width="100" Height="10" Fill="Yellow" />
    </RadioButton>
    <RadioButton HorizontalAlignment="Left" GroupName="FavoriteColor">
        <Rectangle Width="100" Height="10" Fill="Purple" />
    </RadioButton>
</StackPanel>

Next, do the same for the CheckBox controls in the bottom row, except here, just go the boring route and supply the choices as text. In addition, CheckBox controls are left-justified by default, and they do not need to be grouped. Here is the code for the CheckBox portion:

<StackPanel Orientation="Vertical" Grid.Row="1" Margin="10">
    <TextBlock Text="What Technologies are you familiar with?" />
    <CheckBox Content="Silverlight" />
    <CheckBox Content="ASP.NET" />
    <CheckBox Content="Visual Studio 2010" />
    <CheckBox Content="Expression Blend 4" />
</StackPanel>

Go ahead and run the solution to see the end result as it will appear in the browser. The output is shown in Figure 4-13. Notice that, as you would expect, you are able to select only one radio button at a time, but you can click as many check boxes as you wish.

Create a new Silverlight application in Visual Studio called GridSplitterControl. Allow Visual Studio to create a Web Application project to host the application.

In the MainPage.xaml file, divide the root Grid into two columns. The first column should be 150 pixels in width, and the second should take up the remainder of the application. To be able to see what is going on in the grid, set ShowGridLines to True. Also add two TextBlock controls to the application: one in the first column and one in the second column. Your source should appear as follows:

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <TextBlock
        Text="Apress, Inc." />
    <TextBlock
        Grid.Column="1"
        Text="Beginning Silverlight 4: From Novice to Professional" />
</Grid>

At this point, your Silverlight application should look like Figure 4-14.

Figure 4.14. The setup for the GridSplitter example

Notice that you cannot see all of the text in the second column. Let's add a GridSplitter control to the application so users can resize the two columns to be able to view all the text in both columns.

Within the XAML, place the cursor just below the TextBlock definitions you added. Then, in the Visual Studio Toolbox, double-click the GridSplitter control. This will add the xmlns to the System.Windows.Controls assembly, and it will also add the GridSplitter to the application. Then set the Background property of the GridSplitter to LightGray. The source appears as follows:

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <TextBlock
        Text="Apress, Inc." />
    <TextBlock
        Grid.Column="1"
        Text="Beginning Silverlight 4: From Novice to Professional" />
    <sdk:GridSplitter Name="gridSplitter1" Background="LightGray" />
</Grid>

xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

Run the application. It should look similar to Figure 4-15. Notice that you can now click and drag the GridSplitter to resize the two Grid columns.

Figure 4.15. The completed GridSplitter application