Wpf – Databinding a ListBox with SelectionMode = Multiple

data-bindinglistboxwpf

I have a WPF ListBox that I would like to

Enable multiple selection in the ListBox, and
Databind the ListBox to my view model.

These two requirements appear to be incompatible. My view model has an ObservableCollection<T> property to bind to this ListBox; I set up a binding in XAML from the property to the ListBox.SelectedItems property. When I compiled, I got an error saying that the SelectedItems property was read only and could not be set from XAML.

Am I binding to the wrong control property? Is there a way to bind a multiple-selection ListBox in XAML to a view model collection property? Thanks for your help.

Best Answer

What you can do to get around this:

Create an IsSelected property on the items you are displaying in the list. Im assuming these are represented by a view model as well. So it shouldn't be a drama to add an extra property. If they are just business objects consider using a wrapper class to painlessly wrap them in view model items (shameless plug - here is one such system. I use it daily to wrap my business objects)

Use an items container style to bind the IsSelected property of the list box item to the IsSelected property of the items you are displaying, like so

    <ListBox.ItemContainerStyle>
       <!-- This Style binds a ListBoxItem to a the ViewModelItem. -->
       <Style
          TargetType="{x:Type ListBoxItem}">
          <Setter
             Property="IsSelected"
             Value="{Binding IsSelected, Mode=TwoWay}" />
       </Style>
    </ListBox.ItemContainerStyle>

(might need a based on attribute on the style, not sure)

Now whenever a list box item gets selected your view model will know about it and can update its internal collection as required.

Related Solutions

C# – Data binding to SelectedItem in a WPF Treeview

I realise this has already had an answer accepted, but I put this together to solve the problem. It uses a similar idea to Delta's solution, but without the need to subclass the TreeView:

public class BindableSelectedItemBehavior : Behavior<TreeView>
{
    #region SelectedItem Property

    public object SelectedItem
    {
        get { return (object)GetValue(SelectedItemProperty); }
        set { SetValue(SelectedItemProperty, value); }
    }

    public static readonly DependencyProperty SelectedItemProperty =
        DependencyProperty.Register("SelectedItem", typeof(object), typeof(BindableSelectedItemBehavior), new UIPropertyMetadata(null, OnSelectedItemChanged));

    private static void OnSelectedItemChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
        var item = e.NewValue as TreeViewItem;
        if (item != null)
        {
            item.SetValue(TreeViewItem.IsSelectedProperty, true);
        }
    }

    #endregion

    protected override void OnAttached()
    {
        base.OnAttached();

        this.AssociatedObject.SelectedItemChanged += OnTreeViewSelectedItemChanged;
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();

        if (this.AssociatedObject != null)
        {
            this.AssociatedObject.SelectedItemChanged -= OnTreeViewSelectedItemChanged;
        }
    }

    private void OnTreeViewSelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
    {
        this.SelectedItem = e.NewValue;
    }
}

You can then use this in your XAML as:

<TreeView>
    <e:Interaction.Behaviors>
        <behaviours:BindableSelectedItemBehavior SelectedItem="{Binding SelectedItem, Mode=TwoWay}" />
    </e:Interaction.Behaviors>
</TreeView>

Hopefully it will help someone!

Wpf – Multiselect ListBox

The ListBox has multiple selection already implemented. Just change SelectionMode property to Multiple or Extened.

You can use SelectedItems property to get all the selected items afterwards.

Best Answer

Related Solutions

C# – Data binding to SelectedItem in a WPF Treeview

Wpf – Multiselect ListBox

Related Topic