{Dev Tricks}

January 14th, 2009 by Julien Palard

This article is my first about creating Custom Controls in Silverlight 2.
So let’s build a simple one :
You need :

• A .cs file, named with your new Custom Control name
• A directory named Themes
• A generic.xaml file in it (just delete generic.xaml.cs if it was created)

A basic custom control .cs file (the logic part):

using System.Windows.Controls;

namespace Custom_Control_1
{
    public class EditableTextBlock : Control
    {
        public EditableTextBlock()
        {
            DefaultStyleKey = typeof(EditableTextBlock);
        }
    }
}

Download this code: EditableTextBlock.cs

A basic custom control generic.xaml file (the graphic part):

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:controls="clr-namespace:Custom_Control_1">
    <Style TargetType="controls:EditableTextBlock">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:EditableTextBlock">
                    <Grid Background="AliceBlue">
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Download this code: generic.xaml

Now, to test, you need to add the xmlns of your namespace, and add the usercontrol :

<UserControl x:Class="Custom_Control_1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ctrl="clr-namespace:Custom_Control_1"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <ctrl:EditableTextBlock></ctrl:EditableTextBlock>
    </Grid>
</UserControl>

Download this code: page.xaml

In the next article, we’ll see how to bind properties with TemplateBinding.
Don’t forgot to read the MSDN !

This entry was posted on Wednesday, January 14th, 2009 at 6:31 pm and is filed under silverlight. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.