How can I set a ComboBox text to a comma-delimited list of selected items?

Question

I have WPF ComboBox containing CheckBox items, and it allows the user to select multiple items.

I want to display the list of selected items as comma seperated text on the combobox after the user has selected an item from the combobox.

XAML:

<ComboBox  Name="cmbEnvironment"  >
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <CheckBox IsChecked="{Binding IsSelected}" Content="{Binding Name}" />
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

Code Behind:

var lstEnvironment = new List<Environment>();
lstEnvironment.Add( new Environment() { Name = "Env1", IsSelected = false});
lstEnvironment.Add(new Environment() { Name = "Env2", IsSelected = false });
lstEnvironment.Add(new Environment() { Name = "Env3", IsSelected = false });
cmbEnvironment.ItemsSource = lstEnvironment;

Model:

public class Environment
{
    public string Name { get; set; }
    public bool IsSelected { get; set; }
}

How can I accomplish this?

Due to the behavior you want, wouldn't a better solution be that expands on click (`Expander`, `Popup`, etc) with something like an `ItemsControl` or `ListView` used to display your items? Otherwise you might get some strange selection or open/close behavior. — Rachel, Jan 09 '13 at 16:24
What is the actual question? (I'm sure you don't just want to know that yes, somebody has probably implemented a similar combobox). — Wonko the Sane, Jan 09 '13 at 16:25
The question is how to show selected items comma seperated string as combobox text. Thanks. — developer, Jan 09 '13 at 16:30

score 0 · Answer 1 · edited May 23 '17 at 12:14

Due to the behavior you want, wouldn't a better solution be that expands on click (Expander, Popup, etc) with something like an ItemsControl or ListView used to display your items? Otherwise you might get some strange selection or open/close behavior.

But anyways, personally I would create a data class containing:

string SelectedItems { get; set; }
ObservableCollection<Enviornment> AvailableItems { get; set; }

And do something like this:

and add PropertyChange notifications to your Enviornment class so you can do something like this:

foreach(var item in AvailableItems)
    item.PropertyChanged += Environment_PropertyChanged;

...

void Environment_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    if (e.PropertyName == "IsSelected")
        SelectedItems = string.Join(",", 
            availableItems.Where(p => p.IsSelected)
            .Select(p => p.Name).ToArray());
}

(I can't remember if ToArray() is part of the framework or not, however if not then this answer has a good extension method to easily converting a List to an Array so you can use it in string.Join)

However using your current setup you could also just add some code-behind to the CheckBox.CheckChanged or ComboBox.SelectionChanged to cast cmbEnvironment.ItemsSource to List<Environment>, build a comma-delimited string of the Checked items, then set cmbEnvironment.Text equal to your comma-delimited string.

Thanks for the reply. I have used expander control with a listview to achive the same. — developer, Jan 14 '13 at 15:15

score 0 · Answer 2 · answered Aug 02 '16 at 07:14

0

For future readers: I recommend the (free) Extended WPF toolkit for this, it includes a CheckComboBox that does exactly this.

answered Aug 02 '16 at 07:14

DdW

890
1
18
30

How can I set a ComboBox text to a comma-delimited list of selected items?

2 Answers2