Creating the Code Behind

Expression Blend isn’t a coding tool—Visual Studio is. Now that you have a completed user interface, it’s time to add some code behind. Reopen MainPage.xaml in Visual Studio by clicking its entry in Solution Explorer. You’ll immediately see the familiar split display with a visual presentation of the user control at the top and the associated XAML at the bottom. If you worked through the example in the previous article, A Microsoft Silverlight 3 Primer, you’ll see that the XAML produced by Expression Blend is the same as the XAML you produced by hand. The difference, of course, is that you didn’t have to write the XAML this time around.

To add linkage between btnTest and the code behind, type Click=”btnTest_Click” in the btnTest portion of the XAML. The tag should look like this:

<Button x:Name="btnTest"
        Content="Click Me"
        Canvas.Top="70"
        Canvas.Left="20"
        Width="80"
        Height="25"
        Click="btnTest_Click"/>

Right click the Click=”btnTest_Click” entry and choose Navigate to Event Handler from the context menu. At this point, you can enter some really interesting event handler code like the code shown here.

private void btnTest_Click(object sender, RoutedEventArgs e)
{
    lblOutput.Content = txtInput.Text.ToUpper();
}

At this point, you can test your application by choosing one of the options on the Debug menu. Visual Studio will start the ASP.NET Development Server and point your browser in the right direction. If you choose to debug your application, you’ll see the Debugging Not Enabled dialog box. Select the appropriate option and click OK. After a few moments, the application runs in the browser.