A lot of Silverlight developers have experience in ASP.NET control development. If you do, you may have created several ASP.NET server controls that inherit from a base control. I quickly found myself wanting to perform the same type of functionality in Silverlight, however the solution was not obvious. In this post, I will show you how to create a base control in Silverlight and inherit from it.
First thing we will do is setup our solution. I’ve added a Silverlight application, web, and control projects within our solution. The controls project is a Silverlight class library project. I made a reference to the controls project in our Silverlight application project. Here is a screenshot of the solution heirarchy below.
Once our solution is ready, we first need to create our base control and add it to our controls project. In my example, I created a class called MyBaseControl that inherits from UserControl. I then proceed to create a method I want my children controls that inherit from it to be able to use. For our example, I simply made a function which returns the current date & time.
1: Option Explicit On
2: Option Strict On
3:
4: Public Class MyBaseControl
5: Inherits UserControl
6:
7: Public Function GetCurrentDateTime() As Date
8: Return Date.Now()
9: End Function
10: End Class
Now that our base control is in place, we can create a new user control and inherit from MyBaseControl. Here’s where the meat of this post lies. We add a New Silverlight User Control to the controls project. We are going to alter the user control to inherit from our MyBaseControl. First, we’ll need to alter the XAML that was generated for us. Instead of opening with <UserControl… we are going to use MyBaseControl. I open with <local:MyBaseControl… and then I also include our control project’s namespace.
1: <local:MyBaseControl
2: x:Class="SLInheritedUserControl.Controls.MyControl"
3: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5: xmlns:local="clr-namespace:SLInheritedUserControl.Controls">
6: <Grid x:Name="LayoutRoot">
7: <TextBlock x:Name="tbkCurrentDT" FontSize="14" />
8: </Grid>
9: </local:MyBaseControl>
Once our XAML is finished, we then need to tell the code behind to inherit from MyBaseControl instead of UserControl. I also make a call to the GetCurrentDateTime() method which was defined in MyBaseControl and set the text of tbkCurrentDT of MyControl on the Loaded event. Take a look.
1: Partial Public Class MyControl
2: Inherits MyBaseControl
3:
4: Public Sub New
5: InitializeComponent()
6: End Sub
7:
8: Private Sub MyControl_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
9: Me.tbkCurrentDT.Text = Me.GetCurrentDateTime().ToString()
10: End Sub
11: End Class
Simply add the control to your Silverlight’s application root page and you are good to go! Here’s the XAML of my root page and also a screenshot of the final deliverable.
1: <UserControl x:Class="SLInheritedUserControl.Page"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: xmlns:myctls="clr-namespace:SLInheritedUserControl.Controls;assembly=SLInheritedUserControl.Controls"
5: Width="300" Height="100">
6: <Grid x:Name="LayoutRoot" Width="300" Height="100">
7: <Grid.Background>
8: <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
9: <GradientStop Color="#FF0959F3"/>
10: <GradientStop Color="#FFABC4F5" Offset="1"/>
11: </LinearGradientBrush>
12: </Grid.Background>
13: <myctls:MyControl x:Name="MyControl1" HorizontalAlignment="Center" VerticalAlignment="Center" />
14: </Grid>
15: </UserControl>
SLInheritedUserControl_Soln.zip (624.20 kb)