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.

About these ads

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

7 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. 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 ! ;)

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

Follow

Get every new post delivered to your Inbox.

Join 327 other followers

%d bloggers like this: