How to subclass a WPF ComboBox to add an extra button

Question

I saw a similar question and hoped for a solution, but simply giving an advice to subclass the ComboBox is not enough for me. I need it in small spoons...

The case is I need an extra button on my special comboBox for adding new records to the item list. I have this as an UserControl today but it doesn't look good and I need more controls on my views, so I started making a custom control trying to extend ComboBox.

I didn't get far... Please lend me a hand... :)

My code so far:

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

In Generic.xaml I have this:

<Style TargetType="{x:Type local:ComboBoxWithAdd}" BasedOn="{StaticResource {x:Type ComboBox}}">        
</Style>

Answer 1

When making the decision to create a custom control you need to determine whether you need to add actual behavior or just UI. Just adding a button can be done by just customizing the ControlTemplate. It sounds like you want a button that causes an action that will update the Items of the ComboBox which would point to the direction you started down of deriving a control from ComboBox. You'll need to add a few things on the code and XAML side. In your Style you'll need to add a Setter for the ControlTemplate and start with a copy of the default template for ComboBox (I usually do this with Blend but there are other sources out there). You can then add in your new Button wherever you want it in the template.

<Style TargetType="{x:Type local:ComboBoxWithAdd}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:ComboBoxWithAdd}">
                ... copy of default template with your modifications
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

There are a few different ways you could connect the button but the most robust is to use a command that you can bind to in your control code. You can declare your own RoutedCommand in your control code later but to get started just use a built in one.

public ComboBoxWithAdd()
{
    CommandBindings.Add(new CommandBinding(ApplicationCommands.New, NewExecutedMethod));
}

Then in the NewExecutedMethod just add whatever logic you want to do the actual action to add an item (probably working with the ComboBox's Items/ItemsSource). To connect the button up just set Command="ApplicationCommands.New". There's a lot more that can be done with a custom control but this should get you started.

Answer 2

Hi rozon,

I would suggest you to use the UserControl that you created by adding one more button and grouped them to make a user control and exposing the required events and commands.

Custom control is not advisable.

But, if you have requirement like that. Here we go: 1) You need to derive the control for what you are trying to extend the capability. 2) You need to create a default Template for the control. [Generic.Xaml]

Rest is your customization. But, one advantage is you could get a easily Skinnable control.

HTH