How to set CheckBox.IsChecked based on existence of bound object in a List

Question

There are 2 lists - AvailableItems and SelectedItems.

AvailableItems is displayed in a ListBox, and each ListBoxItem contains a CheckBox. The intention is that the CheckBox is checked if the bound item is in SelectedItems.

Can I achieve this without handling Checked and Unchecked in the code-behind, and without adding an IsSelected property to my item class?

Here's the XAML so far:

   <ListBox Name="ListBox1" ItemsSource="{Binding Path=AvailableItems}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel></StackPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <DockPanel>
                    <CheckBox Name="cb1"></CheckBox>
                    <TextBlock Text="{Binding}"></TextBlock>
                </DockPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ListBox>

and the code-behind:

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            _availableItems.Add(Colors.Red);
            _availableItems.Add(Colors.Green);
            _availableItems.Add(Colors.Blue);

            _selectedItems.Add(Colors.Green);

            this.DataContext = this;
        }

        ObservableCollection<Color> _selectedItems = new ObservableCollection<Color>();
        public ObservableCollection<Color> SelectedItems
        {
            get { return _selectedItems; }
            set { _selectedItems = value; }
        }

        ObservableCollection<Color> _availableItems = new ObservableCollection<Color>();
        public ObservableCollection<Color> AvailableItems
        {
            get { return _availableItems; }
            set { _availableItems = value; }
        }
    }

The above xaml/code can be copied straight into a new WPF project for testing.

score 5 · Accepted Answer · answered Feb 03 '11 at 07:05

You define a multi value converter that takes an item and a collection and returns a boolean:

public class CollectionContainsConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var item = values[0];
        var collection = values[1] as IList;
        return collection.Contains(item);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

and then you use it like this:

    <ListBox Name="ListBox1" ItemsSource="{Binding Path=AvailableItems}">
        <ListBox.Resources>
            <local:CollectionContainsConverter x:Key="contains"/>
        </ListBox.Resources>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel></StackPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <DockPanel>
                    <CheckBox Name="cb1">
                        <CheckBox.IsChecked>
                            <MultiBinding Converter="{StaticResource contains}" Mode="OneWay">
                                <Binding Mode="OneWay"/>
                                <Binding ElementName="ListBox1" Path="DataContext.SelectedItems" Mode="OneWay"/>
                            </MultiBinding>
                        </CheckBox.IsChecked>
                    </CheckBox>
                    <TextBlock Text="{Binding}"></TextBlock>
                </DockPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ListBox>

Handling the reverse conversion is left as an exercise.

score -1 · Answer 2 · answered Feb 03 '11 at 07:27

A rough mock up using MVVM

create a class to represent all the data you need for each item eg Checked and description

class CustomItem : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private bool _isSelected;
        private string _customColour;

        public bool IsSelected
        {
            get { return _isSelected; }
            set 
            { 
                _isSelected = value;
                if (PropertyChanged != null)
                {
                    PropertyChanged.Invoke(this, new PropertyChangedEventArgs("IsSelected"));
                }
            }
        }

        public string CustomColour
        {
            get { return _customColour; }
            set
            {
                _customColour = value;
                if (PropertyChanged != null)
                {
                    PropertyChanged.Invoke(this, new PropertyChangedEventArgs("CustomColour"));
                }
            }
        }        
    }

create a class to represent the item collection you want displayed

   class CustomItems : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        private ObservableCollection<CustomItem> _listOfCustomItems;

        public CustomItems()
        {
            ListOfCustomItems = new ObservableCollection<CustomItem>();

            var c = new CustomItem
                        {
                            IsSelected = false, 
                            CustomColour = "Red"
                        };
            ListOfCustomItems.Add(c); 

            c = new CustomItem
                    {
                        IsSelected = true, 
                        CustomColour = "Green"
                    };
            ListOfCustomItems.Add(c);

            c = new CustomItem
                    {
                        IsSelected = false, 
                        CustomColour = "Blue"
                    };

            ListOfCustomItems.Add(c);
        }

        public ObservableCollection<CustomItem> ListOfCustomItems
        {
            get { return _listOfCustomItems; }
            set 
            { 
                _listOfCustomItems = value;
                if (PropertyChanged != null)
                {
                    PropertyChanged.Invoke(this, new PropertyChangedEventArgs("ListOfCustomItems"));
                }
            }
        }

        public List<CustomItem> SelectedItems
        {
            get
            {
                return (from customItem in ListOfCustomItems 
                        where customItem.IsSelected 
                        select customItem).ToList();
            }
        }
    }

Add to window

 <Window.Resources>
        <WpfApplication1:CustomItems x:Key="CI"/>
    </Window.Resources>
    <Grid DataContext="{StaticResource CI}">
        <ListBox ItemsSource="{Binding Path=ListOfCustomItems}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel></StackPanel>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <DockPanel>
                        <CheckBox IsChecked="{Binding Path=IsSelected}"/>
                        <TextBlock Text="{Binding Path=CustomColour}"/>
                    </DockPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ListBox>
    </Grid>

You maintain a single list of items, and supply a property to get the selected ones which does a simple LINQ select. Easy. Change datatypes as you need.

Thanks, but the question was pretty clear - `without adding an IsSelected property to my item class`. — Greg Sansom, Feb 03 '11 at 08:03

How to set CheckBox.IsChecked based on existence of bound object in a List

2 Answers2