Custom Image Button and Radio/Toggle Button from Common Base Class

Question

I would like to create a set of custom controls that are basically image buttons (it's a little more complex than that, but that's the underlying effect I'm going for) that I've seen a few different examples for. However, I would like to further extend that to also allow radio/toggle buttons.

What I'd like to do is have a common abstract class called ImageButtonBase that has default implementations for ImageSource and Text, etc. That makes a regular ImageButton implementation pretty easy.

The issue I am having is creating the RadioButton flavor of it. As I see it, there are at least three options:

1. It would be easy to create something that derives from RadioButton, but then I can't use the abstract class I've created.
2. I could change the abstract class to an interface, but then I lose the abstract implementations, and will in fact have duplication of code.
3. I could derive from my abstract class, and re-implement the RadioButton-type properties and events (IsChecked, GroupName, etc.), but that certainly doesn't seem like a great idea.

Note: I have seen How to get a group of toggle buttons to act like radio buttons in WPF?, but what I want to do is a little more complex.

I'm just wondering if anybody has an example of an implementation, or something that might be adapted to this kind of scenario. I can see pros and cons of each of the ideas above, but each comes with potential pitfalls.

Thanks, wTs

Answer 1

I think your best solution here is to use attached properties instead of subclassing. This will allow you to have your cake and eat it too.

Instead of writing this:

<my:CustomButton ImageSource="Abc" Text="Def" ... />

you would write this:

<Button my:ButtonLook.ImageSource="Abc" my:ButtonLook.Text="Def" ... />

This will work with data binding and everything. To implement this, create your "ButtonLook" class deriving from DependencyObject, and create the two attached properties using the "propa" snippet in Visual Studio. Then set a PropertyChangedCallback on each to construct update the ContentControl.Content property on whatever they are attached to.

An alternative solution is to embed a hidden RadioButton inside your CustomRadioButton subclass, give it an empty template to make it invisible, and bind the IsChecked and GroupName properties:

<ControlTemplate TargetType="my:CustomRadioButton">
  <Grid>
    <RadioButton IsChecked="{Binding ToggleButton.IsChecked, RelativeSource={RelativeSource TemplatedParent}}"
                 GroupName="{TemplateBinding GroupName}">
      <RadioButton.Template><ControlTemplate /></RadioButton.Template>
    </RadioButton>
    ... visual part here ...

Be sure that your CustomToggleButton and CustomRadioButton subclasses use AddOwner to create DependencyProperties such as IsChecked and GroupName rather than creating new ones.