This is a fairly typical problem. You have created a Silverlight control that has built-in controls such as buttons. Each of these built-in controls has events that you want to expose to the page that is to consume the custom control. How do we go about accomplishing this you may ask? That is what this post is all about.
To begin let's create a simple Silverlight application. I'll be demonstrating using the VB.NET language, but feel free to use C# or any managed language you fell comfortable with. After you have created the Silverlight application the solution should look similar to Figure 1.
Figure 1: Initial Solution
Next we will add a New Project to the solution using the Silverlight Class Library project template. I chose to name it ExposedButton. By default a class is added to this project. Delete it and add a New Item using the Silverlight User Control template. Name this new item ExposedButton.xaml. You should now have a solution that is similar in structure to Figure 2.
Figure 2: Solution with the Silverlight User Control
For the purposes of this demo we will keep the XAML to a minimum. Add a button to the ExposedButton.xaml user control. Listing 1 shows the markup for the ExposedButton user control.
1 <UserControl x:Class="ExposedButton.ExposedButton"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 Width="400" Height="300">
5
6 <Grid x:Name="LayoutRoot" Background="White">
7 <Button x:Name="btnChangeColor"
8 Content="Change Color"
9 FontSize="16"
10 Width="150" Height="50"/>
11 </Grid>
12
13 </UserControl>
Listing 1: The ExposedButton markup.
The next step is to expose an event in the code behind. There are many ways of accomplishing this, I've decide to implement a custom event. Listing 2 shows the code behind for this the ExposedButton user control.
1 Partial Public Class ExposedButton
2 Inherits UserControl
3
4 Public Sub New
5 InitializeComponent()
6 End Sub
7
8 Public WriteOnly Property BackColor() As Color
9 Set(ByVal value As Color)
10 LayoutRoot.Background = New SolidColorBrush(value)
11 End Set
12 End Property
13
14 Custom Event ExposedButtonClick As RoutedEventHandler
15 AddHandler(ByVal value As RoutedEventHandler)
16 AddHandler btnChangeColor.Click, value
17 End AddHandler
18 RemoveHandler(ByVal value As RoutedEventHandler)
19 RemoveHandler btnChangeColor.Click, value
20 End RemoveHandler
21 RaiseEvent(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs)
22 End RaiseEvent
23 End Event
24
25 End Class
Listing 2: The ExposedButton code behind
The code contains a custom event and write only property. The custom event simply takes a delegate and adds it to the underlying button click event. Later we will show how to attach a delegate to ExposedButtonClick event. The Property is used to change the background color. That's all for the user control. The next step is to use the ExposedButton control in a Silverlight application. Before proceeding make sure that you have recently built the entire solution.
In the ExposingEvents project, add a reference to the ExposedButton project. The next step is add the ExposedButton namespace to the Page.xaml file. As shown in Figure 3, our favourite friend intellisense will make it easy to add the namespace.
Figure 3: Intellisense support for adding namespace
Now. as shown in Listing 3, add the ExposedButton user control the Page.xaml markup.
1 <UserControl x:Class="ExposingEvents.Page"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:eb="clr-namespace:ExposedButton;assembly=ExposedButton"
5 Width="400" Height="300">
6 <Grid x:Name="LayoutRoot" Background="White">
7 <eb:ExposedButton x:Name="ebtn"></eb:ExposedButton>
8 </Grid>
9 </UserControl>
Listing 3: Adding the ExposedButton user control to Page.xaml
We are now in a position to add the event handler code to the code behind. Again we will rely on intellisense to wire-up the click event to an event handler. Figure 4 shows the intellisense support for adding the event handler.
Figure 4: Using intellisense to wire up the event handler.
You should now have markup that is similar to Listing 4.
1 <UserControl x:Class="ExposingEvents.Page"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:eb="clr-namespace:ExposedButton;assembly=ExposedButton"
5 Width="400" Height="300">
6 <Grid x:Name="LayoutRoot" Background="White">
7 <eb:ExposedButton x:Name="ebtn"
8 ExposedButtonClick="ebtn_ExposedButtonClick">
9 </eb:ExposedButton>
10 </Grid>
11 </UserControl>
Listing 4: Final markup for Page.xaml
All that's left to do is to add some code in the code behind. The code is simple, just change the background color of the user control. Listing 5 contains the code behind.
1 Partial Public Class Page
2 Inherits UserControl
3
4 Public Sub New()
5 InitializeComponent()
6 End Sub
7
8 Private Sub ebtn_ExposedButtonClick( _
9 ByVal sender As System.Object, _
10 ByVal e As System.Windows.RoutedEventArgs)
11 ebtn.BackColor = Colors.Red
12 End Sub
13
14 End Class
Listing 5: Code behind for Page.xaml
That's it run the application and click the button, the background color should change to red.
Guess the movie
Almost at the moment He died, I heard Him say, "Father, forgive them for they know not what they do."