To walk you through creating your first user control, we will create a simple control that combines a TextBlock control and a Button control. Each time the button is clicked, the TextBlock control's text will indicate the number of clicks of the button. We will add three of these controls to the main page of the application, each in a grid row of its own. The first step you need to take is to create a new Silverlight application within Visual Studio 2010 and name it Chapter2-MyFirstUserControl. If you don't remember how to create a new project, refer to the earlier section—Creating your first Silverlight application—in this chapter.

As soon as Visual Studio finishes creating your application, you are faced with the MainPage.xaml file. As the default container is a grid, all we have to do now is split it into three rows. As we have already discussed how to work with the Grid element, the following code snippet should look familiar to you. Add the following code snippet inside your Grid element:

<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>

Now we will move on to creating the user control itself. Right-click on the Chapter2-MyFirstUserControl project and select Add and New Item. Locate the Silverlight user control template and name it ClickCounter.xaml.

We are now looking at our brand new user control! True, it is a bit empty at the moment, but we will fill it up shortly. We mentioned earlier that our user control should contain Button and TextBlock. We also want our user control to have a fixed height and width so that every instance of it will look the same, no matter where it was added. To give the user control a fixed height and width, locate the following line of code:

d:DesignHeight="300" d:DesignWidth="400"

Replace the preceding line of code with the following line of code:

Height="60" Width="200"

Next, we need to add the button and textblock. Our user control is quite simple in UI terms and all it needs is a textblock with a button next to it. The perfect layout control for such a scenario is StackPanel with a horizontal orientation. Replace the LayoutRoot Grid element with the following code snippet:

<StackPanel Orientation="Horizontal" x:Name="LayoutRoot" Background="White">
<TextBlock VerticalAlignment="Center" Text="I was clicked 0 times!" x:Name="countTb"/>
<Button Height="40" Content="Click me!" Margin="10,0,0,0" x:Name="countButton" Click="countButton_Click"/>
</StackPanel>

The resulting UI should look as follows:

The only thing left to do in the user control is hook up the Click event handler so that it will increase the number in the TextBlock control. As we have already defined the name of the event handler in XAML (countButton_Click), all that's left to do is to add its logic in the code behind file. Open ClickCounter.xaml.cs and add the following private global variable above the constructor method:

private int _counter = 0;

We will use this variable to count the number of times a button was clicked. Now it's time to add the event handler's logic. Add the following method right after the constructor method:

private void countButton_Click(object sender, RoutedEventArgs e)
{
_counter++;
countTb.Text = string.Format("I was clicked {0} times!", _counter);
}

Quite simple, isn't it? Every time a button is clicked, the counter variable goes up by one and the text property of the TextBlock control is being set.

We are now finished with our user control. To see it in action, we need to add it to the page, but before we can do anything with it we have to build the application first. Right-click on the Chapter2-MyFirstUserControl project and select Build. Switch over to the MainPage.xaml file. As our user control resides in a namespace that isn't referenced in the file, we have to add a reference to it. We've discussed namespaces in the previous chapter so if you don't feel comfortable with the subject, please refer back to the Namespaces section from Chapter 1, Overview of Silverlight. Add the following declaration code inside the UserControl node:

xmlns:local="clr-namespace:Chapter2_MyFirstUserControl"

Your UserControl node should now look as follows:

<UserControl x:Class="Chapter2_MyFirstUserControl.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup- compatibility/2006"
xmlns:local="clr-namespace:Chapter2_MyFirstUserControl"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

We have added a new namespace called local, which points to the namespace of our application. If we create another user control in our application now, we won't need to add another reference as the namespace is already referenced in our file.

Scroll down to the closing element of the RowDefinitions property and add the following line of code below it:

<local:

IntelliSense has picked up the namespace, and we can select our new user control!

Now we will add three instances of our newly created user control to the page, each will reside in its own row in the grid:

<local:ClickCounter Grid.Row="0"/>
<local:ClickCounter Grid.Row="1"/>
<local:ClickCounter Grid.Row="2"/>

That's it! Build and run your application. The finished application will look like the following screenshot:

As you can see, each user control is independent and clicking on one changes only the text next to it.

To get a deeper understanding of the user control, it is encouraged that you read the MSDN documentation—UserControl Class—at http://msdn.microsoft.com/enus/library/system.windows.controls.usercontrol%28v=vs.95%29.aspx.