Adding buttons to databound listbox items in WPF

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.

Advertisements

About timdams
C#, .NET, Microsoft, security, .... Read more on : https://timdams.com/

9 Responses to Adding buttons to databound listbox items in WPF

  1. Carlos Roque says:

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

  2. clivejefferies says:

    Your event handling saved my life. Thank you.

  3. Mike says:

    Thanks man been looking for this for ages!

  4. Nipesh says:

    Great Solution boss..

  5. Thomas says:

    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. Pingback: Basics van Databinding (WPF) | Code van 1001 nacht

  7. Tuan Le Minh says:

    Thank you for post. Great solution ! 😉

  8. John Woods says:

    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.

  9. Richard says:

    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?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: