How to Implement a ListBox of Checkboxes in WPF?

Bob Kaufman picture Bob Kaufman · Dec 24, 2010 · Viewed 42.6k times · Source

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.

Answer

Aaron McIver picture Aaron McIver · Dec 24, 2010

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>