How to correctly inherit from a usercontrol defined in XAML in Silverlight

Question

If I have a usercontrol (in Silverlight) that I've written, that uses XAML to define it's appearance, how can I make a customised version of it?

i.e. I have MyControl.xaml & MyControl.xaml.cs

What do I need to do if I want a "SpecialisedControl" child class? I assume I just make a new code file, then inherit from MyControl. But what if I want to change the appearance of the base class - then what do I do?

Answer 1

I wrote this thinking you were talking about WPF, rather than Silverlight, but there may be enough overlap for this to be helpful, so I'm posting it, anyway.

If by "change the appearance of the base class" you mean "provide a new template", then what you need is probably a CustomControl, not a UserControl.

The best way to accomplish this is to follow the example set by other Microsoft controls, such as Button or ListBox:

1. Create a class that derives directly from Control (or whatever is closest to your control).
2. If any properties will need to be exposed to the control (such as text on a button, for example), make sure that you properly define them as DependencyProperties.
3. As described here, create a ResourceDictionary called Themes/generic.xaml and add a style for your class that includes a template (don't give the style a key).
4. Use TemplateBindings for any properties of elements on your control that need to get values from your control.
5. If you'll need to attach any event handlers to elements in your template, give them a unique name. Microsoft uses the convention of prefixing these names with "PART_", and I think it's a good thing to do for the sake of consistency, but it's not strictly required.
6. Again, if you need to attach event handlers, overload OnApplyTemplate(). In this method, you should detach any old event handlers (we certainly don't want any memory leaks!), and look for elements that have the names your provided in your template--when you find them, attach event handlers, as necessary.

This is certainly much more work than simply deriving from UserControl, but if you want to be able to totally re-template controls, like you can with the built-in controls, this is the way to do it.

On the other hand, if all you want to do is to provide a certain amount of limited customization, such as changing the background, or associating a Command with some user action, then the best thing to do is to expose DependencyProperties, which can then be set in styles for your control, or on instances of your control, itself.

In the case you mentioned of wanting to customize the look in an inherited control, the process is pretty similar: just add a default style for the new control with a new template; if you need to add more event handlers, just be absolutely certain that you call base.OnApplyTemplate().

Answer 2

I dunno, I like doing things with just plain objects. Here's an article that describes an easy way to slip a XAML-designed control outside your inheritance hierarchy so that you can customize appearance and behavior using SimpleThingsLikeInheritance rather than MicrosoftStuffThatAlmostWorks

http://gen5.info/q/2009/02/10/subverting-xaml-how-to-inherit-from-silverlight-user-controls/

Answer 3

Hey,

You can solve this by using a wrapper as described in the link above. But you can also use the strategy pattern to solve this problem.

In this post I explain how you implement these two methods. http://www.lab101.be/2008/07/silverlight-usercontrol-inheritance/

Cheers

Answer 4

As Mihnea's link describes, the easiest solution is to simply add a namespace in your XAML:

C#

public class MyBase : UserControl
{
}

public class FirstUserControl : MyBase
{
...
}

XAML

<local:MyBase 
    x:Class="FirstUserControl" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:local="YourAssembly" ...>

    <!-- Sticking with UserControl instead of local:MyBase makes this clearer -->
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                ..
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>

..Your XAML
</local:MyBase>