CODEWITHSUNDEEP
c#wpfcomboboxcustom-controls
MPD
MPD

Reputation: 605

WPF Combobox with clear button

I am trying to create a WPF ComboBox control which contains a clear button when something is selected. The control should have two states: if something is selected the control looks like a label with a clear button. If nothing is select then a normal ComboBox is display. The two states are showing in the picture below.

enter image description here

Researching my problem I came across the following SO questions which are very similar to mine:

Adding a button to a combobox in wpf

How to subclass a WPF ComboBox to add an extra button

Both suggest subclassing the ComboBox providing a modified template with the extra button. But this is where I am a tad confused. The answer by John Bowen to the second linked question indicates that I should copy the ComboBox's default template; modifying it to include a button getting the template from Blend. Not being proficient with blend I found the template on MSDN here:

http://msdn.microsoft.com/en-us/library/ms752094(v=vs.85).aspx

My problem is I am not quite sure what I should change. Looking at the Default template I think I need to do something along the lines of:

Does this seem right and any pointers on how I do it or other suggestions if I am barking up the wrong tree.

Upvotes: 4

Views: 5671

Answers (1)

Blablablaster
Blablablaster

Reputation: 3348

Maybe you will accept a simpler solution - just place a TextBlock with a Button above your ComboBox?

The xaml will look like this:

<Grid>
    <ComboBox ItemsSource="{Binding ...}" x:Name="cbox"/>
    <Grid Background="Gray" Visibility="{Binding SelectedItem, ElementName=cbox, Converter={StaticResource NullItem2Visibility}}">
        <TextBlock Text="{Binding SelectedItem, ElementName=cbox}" HorizontalAlignment="Left"/>
        <Button Content="Clear" HorizontalAlignment="Right" Click="ClearItem"/>
    <Grid>
</Grid>

Codebehind will have method ClearItem:

public void ClearItem(object sender, EventArgs e){
    cbox.SelectedItem=null;
}

And the converter to show and hide textblock and a button:

class NullItem2Visibility:IValueConverter{
    public object Convert(object value, Type type, object parameter, CultureInfo i){
        return value == null ? Visibility.Collapsed : Visibility.Visible;
    }
    public object ConvertBack(...){...}
}

Upvotes: 4

Related Questions