Another twitter question. As usual, I’m targeting WPF 4 here, but just about everything here works with Silverlight 4 as well.

(read from bottom up)

Let’s say you want to create a standardized “gadget” for your application, from which anyone can derive and create their own gadgets.

The desire:

• Provide a base gadget that has some sort of standardized chrome and some behavior to be inherited by all derived controls.

The challenge:

• Regular derived controls won’t be friendly for your users to create controls
• Regular usercontrols don’t enforce any control template
• Controls inherit functionality/behavior, but not template. Well, technically you do inherit the style and template, but you can’t really override just a part of the template, you have to modify the whole thing, which would let the users mess around with the chrome you’re trying to keep.

There are a bunch of ways to do that, depending on what part you need to standardize, but one of the more interesting is to create your own UserControl-like class deriving from ContentControl. Other options include allowing other people to make their gadgets using anything and you simply host them in a shim control that has the behavior. In some cases, that’s the better choice, but not in cases where you want them to be able to call methods you provide.

The Base Gadget Control

Our base control is simple, but contained in two parts. The first part is the code (the behavior and model of the control). The second part is the visual representation, contained in its style and template.

Control Behavior

Since we’re not providing any other functionality at this point (you can, but I didn’t want to get into Dependency Properties here), the code has only the static constructor required for styling. The constructor says the default style is the one that targets the Gadget type.

public class Gadget : ContentControl
{
    static Gadget()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(Gadget),
                   new FrameworkPropertyMetadata(typeof(Gadget)));
    }

}

All the other behavior is inherited from ContentControl. ContentControl is a specialization of Control which allows for a single element to be inserted as content. In a typical UserControl, this single element is the root Grid.

Control Template and generic.xaml

So from where does the Gadget pick up its style? In WPF and Silverlight, there exists the concept of a generic or default style for a control. That style is contained in the themes\generic.xaml resource dictionary for the library inside which the control exists. The name and location are special.

The contents of generic.xaml include styles for one or more controls. The styles contain the control templates which define what the UI of the control is made up of. Since this is a content control, we need to have a ContentPresenter (or another ContentControl) in there, bound to the Content property. Truthfully, you can have anything bound to that property, but if the types don’t match, you’ll get an exception at runtime.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:local="clr-namespace:WpfApplication22"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    
    <Style TargetType="{x:Type local:Gadget}">
        <Setter Property="Padding"
                Value="10" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:Gadget}">

                    <Border BorderBrush="Red"
                            BorderThickness="5"
                            CornerRadius="10">
                        
                        <ContentPresenter Content="{TemplateBinding Content}"
                                          Margin="{TemplateBinding Padding}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        
    </Style>
    
</ResourceDictionary>

The TemplateBinding syntax is what you use to bind to properties of the control that the template is applied to. 

So, our custom gadget simply enforces a red 5px border around all elements. You could also enforce a background, drag handles, close buttons etc.

The Custom UserControls (Gadgets)

Here are the custom UserControls. I simply added a UserControl to the project, and then changed the markup and codebehind to reference Gadget rather than UserControl. To make it friendlier to your users, I’d recommend creating a custom Visual Studio template for your Gadget. The template would set the base class and namespaces automatically.

First Gadget

There’s also a related code-behind, but it’s empty. In a real app, it’ll likely have code. Here’s the Xaml:

<local:Gadget x:Class="WpfApplication22.Gadgets.TestGadget"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="clr-namespace:WpfApplication22"
              mc:Ignorable="d"
              d:DesignHeight="300"
              d:DesignWidth="300">
    <Grid>
        <TextBlock Text="My Custom Gadget Content"
                   FontSize="20"
                   TextWrapping="Wrap"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />
    </Grid>
</local:Gadget>

Second Gadget

Similarly, here’s the second gadget’s markup. This control contains an ellipse.

<local:Gadget x:Class="WpfApplication22.Gadgets.SecondGadget"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="clr-namespace:WpfApplication22"
              mc:Ignorable="d"
              Padding="25"
              d:DesignHeight="300"
              d:DesignWidth="300">
    <Grid>
        <Ellipse x:Name="MyEllipse" Fill="Blue"/>
    </Grid>
</local:Gadget>

The Main Window

The main Window contains instances of both gadgets. The highlighted areas of the Window xaml are what are needed to load in our own gadgets.

<Window x:Class="WpfApplication22.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:gadgets="clr-namespace:WpfApplication22.Gadgets"
        Title="MainWindow" Height="450" Width="450">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <gadgets:TestGadget Grid.Row="0" Grid.Column="0" />
        <gadgets:SecondGadget Grid.Row="1" Grid.Column="1" />
    </Grid>
</Window>

Here’s how it looks at runtime:

That’s all there is to it for the basics of creating your own usercontrol stand-ins.

If you’re building add-ins or runtime-resolved Gadgets for your own app, take a look at MEF (Managed Extensibility Framework).