Silverlight Tip of the Day #32: How to Declare a Custom User Control from a XAML Page.
UserControls are a great way to separate objects into smaller, more manageable chunks of logic. These controls can reused by different applications and are independent from other controls. Each UserControl can contain any amount of content and logic and can be directly added to your Canvas tree (I.e. MyCanvas.Children.Add(myControl)).
Once you have a UserControl created, how do you reference or declare it from another XAML file (such as Page.xaml)? Doing this is relatively straight forward and we will demonstrate how to do this in this tutorial.
Run this application here to preview: http://silverlight.services.live.com/invoke/66033/Custom%20UserControl/iframe.html
To start, let’s create a custom UserControl called “Card”. In Visual Studio 2008, Right click on your Silverlight Application and choose “Add->New Item…”.
In the Add New Item dialog, choose “Silverlight User Control” and change the name to “Card.xaml”.
Add the following two images to your Silverlight application project:
CardDiamond3.png CardHeartAce.png
Now, open up Card.xaml and:
- Add an Image in the UserContol.
- Set the “x:Name” of the Image to “CardImg”.
- Set the source default value to”CardHeartAce.png”
- Remove the controls Width, Height and Grid tags as they are not needed. Your Card.xaml should now look like this:
<UserControl x:Class="UserCtrl.Card"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Image x:Name="CardImg" Source="CardHeartAce.png"></Image>
</UserControl>
Next we want to give users the ability to change the image of the card. Open Card.xaml.cs and add the following code which will allow the user to change the image:
namespace UserCtrl
{
public partial class Card : UserControl
{
public Card()
{
InitializeComponent();
}
public ImageSource CardImage
{
get { return CardImg.Source; }
set
{
this.CardImg.Source = value;
}
}
}
}
Our final step is to show you how to reference this UserControl from a xaml file such as Page.xaml.
In Page.xaml:
- Add a local reference to your Page.xaml UserControl which will allow you to reference objects in your assembly:
<UserControl x:Class="UserCtrl.Page"
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
xmlns:local="clr-namespace:UserCtrl;assembly=UserCtrl"
Width="480" Height="300" >
- Declare a couple references to your Card control like this:
<UserControl x:Class="UserCtrl.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:UserCtrl;assembly=UserCtrl"
Width="480" Height="300" >
<Canvas x:Name="MyCanvas" Background="Gray">
<local:Card Canvas.Left="50" Canvas.Top="20" x:Name="MyCard" CardImage="CardDiamond3.png" >
</local:Card>
<local:Card Canvas.Left="250" Canvas.Top="20" x:Name="MyCard2" CardImage="CardHeartAce.png" >
</local:Card>
</Canvas>
</UserControl>
- Run the application and you will see two cards are shown!
Thank you,
--Mike Snow
Subscribe in a reader