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

Mark Ingram picture Mark Ingram · Oct 22, 2008 · Viewed 26.1k times · Source

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

Amanda Mitchell picture Amanda Mitchell · Oct 22, 2008

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().