How to Implement a ListBox of Checkboxes in WPF?

Question

Although somewhat experienced with writing Winforms applications, the... "vagueness" of WPF still eludes me in terms of best practices and design patterns.

Despite populating my list at runtime, my listbox appears empty.

I have followed the simple instructions from this helpful article to no avail. I suspect that I'm missing some sort of DataBind() method where I tell the listbox that I'm done modifying the underlying list.

In my MainWindow.xaml, I have:

    <ListBox ItemsSource="{Binding TopicList}" Height="177" HorizontalAlignment="Left" Margin="15,173,0,0" Name="listTopics" VerticalAlignment="Top" Width="236" Background="#0B000000">
        <ListBox.ItemTemplate>
            <HierarchicalDataTemplate>
                <CheckBox Content="{Binding Name}" IsChecked="{Binding IsChecked}"/>
            </HierarchicalDataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

In my code-behind, I have:

    private void InitializeTopicList( MyDataContext context )
    {
        List<Topic> topicList = ( from topic in context.Topics select topic ).ToList();

        foreach ( Topic topic in topicList )
        {
            CheckedListItem item = new CheckedListItem();
            item.Name = topic.DisplayName;
            item.ID = topic.ID;
            TopicList.Add( item );
        }
    }

Which, by tracing through, I know is being populated with four items.

EDIT

I have changed TopicList to an ObservableCollection. It still doesn't work.

    public ObservableCollection<CheckedListItem> TopicList;

EDIT #2

I have made two changes that help:

In the .xaml file:

ListBox ItemsSource="{Binding}"

In the source code after I populate the list:

listTopics.DataContext = TopicList;

I'm getting a list, but it's not automagically updating the checkbox states when I refresh those. I suspect a little further reading on my part will resolve this.

Gitagitel

Downvoter: exactly how does this question not show research effort, is unclear or not useful? – Gitagitel

Answer 1

Use ObservableCollection<Topic> instead of List<Topic>

Edit

it implements INotifyCollectionChanged interface to let WPF know when you add/remove/modify items

Edit 2

Since you set TopicList in code, it should be a Dependency Property, not a common field

    public ObservableCollection<CheckedListItem> TopicList {
        get { return (ObservableCollection<CheckedListItem>)GetValue(TopicListProperty); }
        set { SetValue(TopicListProperty, value); }
    }
    public static readonly DependencyProperty TopicListProperty =
        DependencyProperty.Register("TopicList", typeof(ObservableCollection<CheckedListItem>), typeof(MainWindow), new UIPropertyMetadata(null));

Edit 3

To see changes in items

1. implement INotifyPropertyChanged interface in CheckedListItem (each setter should call PropertyChanged(this, new PropertyChangedEventArgs(<property name as string>)) event)
2. or derive CheckedListItem from DependencyObject, and convert Name, ID, IsChecked to dependency properties
3. or update them totally (topicList[0] = new CheckedListItem() { Name = ..., ID = ... })

Ramachandra

Thanks to everybody who helped me cobble together a solution. It was your INotifyPropertyChanged suggestion that led me to this article: msdn.microsoft.com/en-us/library/ms229614.aspx which completed the solution. – Gitagitel

ObservableCollection<Topic> will spot added/removed items, but it will not spot modified items – Gwendolyn

Answer 2

Assuming TopicList is not an ObservableCollection<T> therefore when you add items no INotifyCollection changed is being fired to tell the binding engine to update the value.

Change your TopicList to an ObservableCollection<T> which will resolve the current issue. You could also populate the List<T> ahead of time and then the binding will work via OneWay; however ObservableCollection<T> is a more robust approach.

EDIT:

Your TopicList needs to be a property not a member variable; bindings require properties. It does not need to be a DependencyProperty.

EDIT 2:

Modify your ItemTemplate as it does not need to be a HierarchicalDataTemplate

   <ListBox.ItemTemplate>
     <DataTemplate>
       <StackPanel>
         <CheckBox Content="{Binding Name}" IsChecked="{Binding IsChecked}"/>
       </StackPanel>
     </DataTemplate>
   </ListBox.ItemTemplate>

Nanny

It doesn't need to be a DependencyProperty only if its value is set before first binding is done or container class implements INotifyPropertyChanged and calls PropertyChanged(...) on TopicList.set method – Ramachandra

You should bind to the IsSelected property on ListBoxItem: <CheckBox IsChecked="{Binding IsSelected, Mode=OneWay, RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}}" You should probably also set IsHitTestVisible and IsFocusable to false. – Dinar

Answer 3

First you dont need a HeirarchicalDataTemplate for this. Just regular DataTemplate as Aaron has given is enough. Then you need to instantiate the TopicList ObservableCollection somewhere inside the constructor of the class. which makes the ObservableCollection alive even before you add data in to it And binding system knows the collection. Then when you add each and every Topic/CheckedListItem it will automatically shows up in the UI.

TopicList = new ObservableCollection<CheckedListItem>(); //This should happen only once

private void InitializeTopicList( MyDataContext context )
{
    TopicList.Clear();

    foreach ( Topic topic in topicList )
    {
        CheckedListItem item = new CheckedListItem();
        item.Name = topic.DisplayName;
        item.ID = topic.ID;
        TopicList.Add( item );
    }
}

Diplomate

yes, this way you don't need TopicList dependency propertiy – Ramachandra

Answer 4

Others have already made useful suggestions (use an observable collection to get list-change notification, make the collection a property rather than a field). Here are two they haven't:

1) Whenever you're having a problem with data binding, look in the Output window to make sure that you're not getting any binding errors. You can spend a lot of time trying to fix the wrong problem if you don't do this.

2) Understand the role change notification plays in binding. Changes in your data source can't and won't get propagated to the UI unless the data source implements change notification. There are two ways to do this for normal properties: make the data source derive from DependencyObject and make the bound property a dependency property, or make the data source implement INotifyPropertyChanged and raise the PropertyChanged event when the property's value changes. When binding an ItemsControl to a collection, use a collection class that implements INotifyCollectionChanged (like ObservableCollection<T>), so that changes to the contents and order of the collection will get propagated to the bound control. (Note that if you want changes to the items in the collection to get propagated to the bound controls, those items need to implement change notification too.)

Diba

Answer 5

I know this is really old question but I came to building custom Listbox which get the SelectedItems with built in select all / unselect all

CustomListBox

public class CustomListBox : ListBox
    {
        #region Constants

        public static new readonly DependencyProperty SelectedItemsProperty = DependencyProperty.Register(nameof(SelectedItems), typeof(IList), typeof(CustomListBox), new PropertyMetadata(default(IList), OnSelectedItemsPropertyChanged));

        #endregion

        #region Properties

        public new IList SelectedItems
        {
            get => (IList)GetValue(SelectedItemsProperty);
            set => SetValue(SelectedItemsProperty, value);
        }

        #endregion

        #region Event Handlers

        private static void OnSelectedItemsPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ((CustomListBox)d).OnSelectedItemsChanged((IList)e.OldValue, (IList)e.NewValue);
        }

        protected virtual void OnSelectedItemsChanged(IList oldSelectedItems, IList newSelectedItems)
        {
        }

        protected override void OnSelectionChanged(SelectionChangedEventArgs e)
        {
            base.OnSelectionChanged(e);
            SetValue(SelectedItemsProperty, base.SelectedItems);
        }

        #endregion
    }

ListBoxControl.cs

public partial class ListBoxControl : UserControl { #region Constants

public static new readonly DependencyProperty ContentProperty =
                    DependencyProperty.Register(nameof(Content), typeof(object), typeof(ListBoxControl),
                        new PropertyMetadata(null));

public static new readonly DependencyProperty ContentTemplateProperty =
                    DependencyProperty.Register(nameof(ContentTemplate), typeof(DataTemplate), typeof(ListBoxControl),
                         new PropertyMetadata(null));

public static readonly DependencyProperty ItemsProperty =
                    DependencyProperty.Register(nameof(Items), typeof(IList), typeof(ListBoxControl),
                         new PropertyMetadata(null));

public static readonly DependencyProperty SelectedItemsProperty =
                    DependencyProperty.Register(nameof(SelectedItems), typeof(IList), typeof(ListBoxControl),
                       new UIPropertyMetadata(null, OnSelectedItemsChanged));

#endregion

#region Properties

public new DataTemplate ContentTemplate
{
    get => (DataTemplate)GetValue(ContentTemplateProperty);
    set => SetValue(ContentTemplateProperty, value);
}

public IList Items
{
    get => (IList)GetValue(ItemsProperty);
    set => SetValue(ItemsProperty, value);
}

public IList SelectedItems
{
    get => (IList)GetValue(SelectedItemsProperty);
    set => SetValue(SelectedItemsProperty, value);
}

#endregion

#region Constructors

public ListBoxControl()
{
    InitializeComponent();
}

#endregion

#region Event Handlers

private static void OnSelectedItemsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    if (d is not ListBoxControl || e.NewValue is not IList newValue)
    {
        return;
    }
     
    var mylist = (d as ListBoxControl).CustomList;

    foreach (var selectedItem in newValue)
    {
        mylist.UpdateLayout();
        if (mylist.ItemContainerGenerator.ContainerFromItem(selectedItem) is ListBoxItem selectedListBoxItem)
        {
            selectedListBoxItem.IsSelected = true;
        }
    }
}

#endregion

#region Private Methods

private void CheckAll_Click(object sender, RoutedEventArgs e)
{
    CustomList.SelectAll();
}

private void UncheckAll_Click(object sender, RoutedEventArgs e)
{
    CustomList.UnselectAll();
}

#endregion

}

#endregion

ListBoxControl.xaml

<UserControl x:Class="UserControls.ListBoxControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:UserControls"
             xmlns:str="Client.Properties"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800"
             x:Name="this">

    <UserControl.Resources>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    </UserControl.Resources>
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <local:CustomListBox  x:Name="CustomList" 
                             Grid.Row="0"   
                             Width="250"
                             HorizontalAlignment="Left"
                             SelectionMode="Multiple"
                             Visibility="Visible"
                             MinHeight="25"
                             MaxHeight="400"
                             ItemsSource="{Binding  ElementName=this, Path =Items}"
                             SelectedItems="{Binding  ElementName=this, Path =SelectedItems,Mode=TwoWay}"
                             Style="{StaticResource {x:Type ListBox}}"
                             ScrollViewer.VerticalScrollBarVisibility="Auto">
            <local:CustomListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Style.Triggers>
                        <Trigger Property="IsSelected" Value="True" >
                            <Setter Property="FontWeight" Value="Bold" />
                            <Setter Property="Background" Value="Transparent" />
                            <Setter Property="BorderThickness" Value="0" />
                        </Trigger>
                        <Trigger Property="IsMouseCaptureWithin" Value="true">
                            <Setter Property="IsSelected" Value="true" />
                        </Trigger>
                        <Trigger Property="IsMouseCaptureWithin" Value="False">
                            <Setter Property="IsSelected" Value="False" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </local:CustomListBox.ItemContainerStyle>

            <local:CustomListBox.ItemTemplate>
                <DataTemplate>
                    <DockPanel>
                        <CheckBox Margin="4" IsChecked="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}},Path=IsSelected}" />
                        <ContentPresenter Content="{Binding .}" ContentTemplate="{Binding ElementName=this, Path = ContentTemplate, Mode=OneWay}"/>
                    </DockPanel>
                </DataTemplate>
            </local:CustomListBox.ItemTemplate>
        </local:CustomListBox>
        <Grid Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" >
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="250" />
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Row="0" Grid.Column="1"
                            Orientation="Horizontal"  
                            HorizontalAlignment="Left">
                <Button Click="CheckAll_Click"
                        BorderBrush="Transparent"
                        ToolTip="Check all">
                    <Button.Content>
                        <Image Source="CheckAll.png" Height="16" Width="16"/>
                    </Button.Content>
                </Button>

                <Button         
                        Click="UncheckAll_Click"
                        BorderBrush="Transparent"
                        Visibility="Visible"
                        ToolTip="Unchecked all">
                    <Button.Style>
                        <Style TargetType="Button">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding ElementName=this, Path = SelectedItems.Count}" Value="0">
                                    <Setter Property="Button.Visibility" Value="Collapsed" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                    <Button.Content>
                        <Image Source="UncheckAll.png" Height="16" Width="16" />
                    </Button.Content>
                </Button>

            </StackPanel>

            <TextBlock  Grid.Row="0" Grid.Column="1"
                       Text="{Binding ElementName=this, Path = SelectedItems.Count, StringFormat={x:Static str:Resources.STE_LABEL_X_ITEMS_CHECKED}, Mode=OneWay}"
                        HorizontalAlignment="Right" TextAlignment="Right"  VerticalAlignment="Center"
                        Foreground="White" />
        </Grid>


    </Grid>
</UserControl>

Now you can use that custom control in any control or page and pass any content you want EX : ConfigView.xaml

<UserControl ..
 xmlns:userControls="Client.UserControls"
..>

<userControls:ListBoxControl 
                    ShowCheckBox="True" 
                    MinHeight="25"
                    MaxHeight="400"
                    ScrollViewer.VerticalScrollBarVisibility="Auto"
                    Items="{Binding MyLists, Mode=OneWay}"
                    SelectedItems="{Binding SelectedMyLists,Mode=TwoWay}"
                    HorizontalAlignment="Left">
                    <userControls:ListBoxControl.ContentTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" >
                                <Image Source="{Binding Icon}"/>
                                <TextBlock VerticalAlignment="Center" Text="{Binding Name,StringFormat=' {0}'}" />
                            </StackPanel>
                        </DataTemplate>
                    </userControls:ListBoxControl.ContentTemplate>
                </userControls:ListBoxControl>

here we bind to the selected items and than do explicit casting to our model ConfigViewViewModel

private IList _myLists;
 public IList MyLists
        {
            get => _myLists;
            set
            {
                if (_myLists == value)
                {
                    return;
                }

                _myLists = value;
                OnPropertyChanged(nameof(SelectedItems));
            }
        }
public IEnumerable<MyModel> SelectedItems => MyLists.Cast<MyModel>();

Guglielmo

Answer 6

change your binding to

 <ListBox ItemsSource="{Binding Path=TopicList}"

Klump

Answer 7

<ListBox x:Name="myListBox" SelectionMode="Multiple">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <CheckBox Content="{Binding}" IsChecked="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}, Mode=TwoWay}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

cs

List<string> items = new List<string> { "Item 1", "Item 2", "Item 3" };
myListBox.ItemsSource = items;

Blackbeard