This article is for Silverlight 2 beta 1
There is a common misconception that User Controls in Silverlight must be placed in the assembly from which they are referenced. However, this is not true, you can have user controls in an assembly and use them from another assembly. This is not a direct process, however, so let's see how to proceed:
Preparing the control
-
Create a new Silverlight 2 application in Visual Studio. In this example, we'll name this application "UserControlsPacking". For this first application, you can choose to generate a test web application, or to use a basic HTML test page.
-
In the same solution, create another Silverlight application. Let's name it "UserControlsPacking.Controls". Choose the "Generate a HTML test page" option, to avoid creating unnecessary test projects.
In the moment, Silverlight 2 beta 1 has only 2 project templates available: "Silverlight Application" and "Silverlight Class Library". Ideally, we would need a "Silverlight User Control Library", just like there is a "WPF User Control Library" for WPF. This option is not available however, so we will "misuse" an Application template to pack our user controls.
-
In the application named "UserControlsPacking.Controls", delete the following files: App.xaml, App.xaml.cs, Page.xaml, Page.xaml.cs.
-
Right-click on the "UserControlsPacking.Controls" project in the Solution explorer, and select "Add / New Item...".
-
Under "Silverlight", select the "Silverlight User Control" item template.
-
Implement the new user control, for example by opening the XAML file in Blend, and adding some code.
Note: You should probably delete the "Width" and "Height" property as the very first thing you do in your XAML. Studio fix-codes these properties automatically, but let's be frank, noone wants this in a control.
Using the User Control in Studio
After implementing the user control, now it's time to use it. First we must add a reference to the "UserControlsPacking.Controls" project in the main application project.
-
Right-click on the "UserControlsPacking" project and choose "Add Reference...".
-
In the tab "Projects", select the "UserControlsPacking.Controls" project and click OK.
From this moment on, you can use the User Control in the main project. You can either add the User Control in Blend (see below) or in XAML.
-
In Studio, open the file "Page.xaml".
-
You need to add a reference to the namespace containing the new UserControl. This gets added as an XML prefix in the UserControl tag.
(Note: Studio assists you there: Simply type "xmlns:control=" and Intellisense will propose you a list of all the XML namespaces, including those located in referenced assemblies).
<UserControl x:Class="GalaSoft.SL.UserControlsPacking.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:GalaSoft.SL.UserControlsPacking.Controls;
assembly=GalaSoft.SL.UserControlsPacking.Controls"
Width="400"
Height="300">
-
Once this is done, you can use the control in the XAML code, for example:
<Grid x:Name="LayoutRoot"
Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*" />
<ColumnDefinition Width=".5*" />
Grid.ColumnDefinitions>
<Border BorderBrush="Magenta"
BorderThickness="2"
Padding="5">
<StackPanel>
<TextBlock FontSize="15"
FontWeight="Bold">Billing:TextBlock>
<controls:AddressControl />
StackPanel>
Border>
<Border BorderBrush="Magenta"
BorderThickness="2"
Grid.Column="1"
Padding="5">
<StackPanel>
<TextBlock FontSize="15"
FontWeight="Bold">Shipping:TextBlock>
<controls:AddressControl />
StackPanel>
Border>
Grid>
Using the control in Blend
Like you would expect, you can also find the User Control in Blend's asset library, even though it is located in an external assembly. To find the control, simply open the asset library (that's the last button down in the Toolbox bar). Then click on the tab "Custom Controls". You should be able to see your user control in the list. Note however that the control sometimes doesn't show up immediately. Make sure that you saved your whole solution in Visual Studio, make sure that you built everything, and try to open the asset library a few times to update the list.
Note that Blend takes care of adding the necessary namespaces to the XAML, so you don't need to worry what we did in the first code snippet above.
Resources
You can download a sample application demonstrating this. Simply open the SLN file in Studio 2008.
Conclusion
User controls are often presented as a way to encapsulate parts of the UI, and much less as a way to reuse UI elements in different projects. This is often what Custom Controls are used for.
However, User Controls are a bit easier to understand. While the "lookless-ness" of a CustomControl is bigger than of a UserControl, while the "canonic" way of creating reuseable controls is to rather use CustomControls, I find myself using UserControls time and time again. It's good to know that you can actually use UserControls very much in the same way that you can use CustomControls. HTH!