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.