Introduction
In this tutorial I will demonstrate how to create a listbox in WPF which is databound to a collection, we then would like to add a button to each item in the listbox. Clicking this button will button will delete that item from the collection.
Making an ObservableCollection
We create a small class which represents a User with a Name and Age:
public class User
{
public string Name { get; set; }
public int Age { get; set; }
}
In the code-behind of our MainWindow we the create a new ObservableCollection of users and populate when the app starts:
public ObservableCollection<User> Users;
public MainWindow()
{
InitializeComponent();
Users = new ObservableCollection<User>() {
new User() { Name = “Tim”, Age = 30 },
new User() { Name = “Marc”, Age = 48 },
new User() { Name = “Ann”, Age = 39 },
new User() { Name = “Jan”, Age = 25 },
new User() { Name = “Marie”, Age = 69 }};
}
Creating a databound listbox
We then add a listbox to our application which we name lbUsers and we state that the ItemsSource should use the datacontext of the control itself.
<ListBox IsSynchronizedWithCurrentItem=”True”
Name=”lbUsers” ItemsSource=”{Binding}”
ItemTemplate=”{StaticResource UserTemplate}” />
We then create the specified ItemTemplate that will visualize each user in the listbox. Each item will simply sow the name and age of the user, followed by a ‘Delete’ button.
<Window.Resources>
<DataTemplate x:Key=”UserTemplate” >
<StackPanel Orientation=”Horizontal” >
<TextBlock Text=”{Binding Path=Name}” Width=”50″/>
<TextBlock Text=”{Binding Path=Age}” Width=”20″/>
<Button Content=”Delete” Click=”cmdDeleteUser_Clicked”/>
</StackPanel>
</DataTemplate>
</Window.Resources>
Back in our code-behind we now only have to change the datacontext of the listbox (do this right after you populated the listbox for example)
lbUsers.DataContext = Users;
If you now run the application you should see a populated listbox. The delete button won’t work of course.
Making the buttons works
We now have to write the eventhandler code when the user clicks on a delete-button. Believe it or not, this is very straightforward:
private void cmdDeleteUser_Clicked(object sender, RoutedEventArgs e)
{
Button cmd = (Button)sender;
if (cmd.DataContext is User)
{
User deleteme = (User)cmd.DataContext;
Users.Remove(deleteme);
}
}
We know the sender that triggers this will be a Button so we bluntly cast it to a Button. Next we checkthat the DataContext of the clicked button is indeed from a User (and not some other object as a result of bad coding J ).
If it is, we can simply remove that given user from the listbox. Since our collection, from which we remove the user, is an ObservableCollection the change will automatically be shown in the listbox on screen.
Tim Dams 
Hey thanks! all the example i found use List which doesn’t notify of any changed to the bound Listbox. this helped greatly
LikeLike
Your event handling saved my life. Thank you.
LikeLike
Thanks man been looking for this for ages!
LikeLike
Great Solution boss..
LikeLike
I tried to put the data into a Button_Click function, but nothing was added to the listbox?
private void btnAddAttachment_Click(object sender, RoutedEventArgs e)
{
Users = new ObservableCollection() {
new User() { Name = “Tim”, Age = 30 },
new User() { Name = “Marc”, Age = 48 },
new User() { Name = “Ann”, Age = 39 },
new User() { Name = “Jan”, Age = 25 },
new User() { Name = “Marie”, Age = 69 }};
}
lbUsers.DataContext = Users; // This line was added right after InitializeComponent();
LikeLike
Thank you for post. Great solution ! 😉
LikeLike
Thank you. Thank you. Thank you. Thank you. Thank you. I have hour after hour of searching and testing things to reach this point. You solved it for me finally, and in a way that I understand the code to a useful depth. You are a gentleman and a scholar.
LikeLike
Thank you. This helped me a lot. I’m tired of tutorials with tons of other fancy stuff. I’m new to WPF and I need the basics. This one is great.
Now my question: I use the same type of databound listboxes all over my application, so I added a style for Listbox and put it in resources. This works, but if I put a button in the Datatemplate I get an error:
——-
Error 1 ‘ResourceDictionary’ root element requires a x:Class attribute to support event handlers in the XAML file. Either remove the event handler for the Click event, or add a x:Class attribute to the root element.
——-
I googeled all day for someone that can explain in a simple way what is going wrong and how to fix this. As I sayd I’m only doing WPF for a few days, and need some simple guidence.
This is my code:
….And of course I have the click event handler in code behind.
Can you help?
LikeLike