Adding buttons to databound listbox items in WPF


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; }
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()

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.


<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”/>




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;
(cmd.DataContext is User)

User deleteme = (User)cmd.DataContext;



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.

Like this tutorial? Feel free to buy my kids a fristi 

9 gedachten over “Adding buttons to databound listbox items in WPF

  1. Hey thanks! all the example i found use List which doesn’t notify of any changed to the bound Listbox. this helped greatly


  2. Your event handling saved my life. Thank you.


  3. Thanks man been looking for this for ages!


  4. Great Solution boss..


  5. 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();


  6. Thank you for post. Great solution ! 😉


  7. 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.


  8. 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?


Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen. logo

Je reageert onder je account. Log uit /  Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit /  Bijwerken )

Verbinden met %s

Deze site gebruikt Akismet om spam te bestrijden. Ontdek hoe de data van je reactie verwerkt wordt.

%d bloggers liken dit:
search previous next tag category expand menu location phone mail time cart zoom edit close