Filter data in a WPF ListBox

In this post, I will demonstrate how to filter data from the list box in WPF. To do this, I am using LINQ to Collections.
Assuming you have a WPF project, add a class file ‘Employee’
class Employee
{
  public int EmpNo { get; set; }
  public string EmpName { get; set; }
}
In the MainWindow.Xaml, add the following code:
<Grid>
<ListBox Height="298" HorizontalAlignment="Left" Margin="80,55,0,0"
Name="lstEmpData" VerticalAlignment="Top" Width="252">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding EmpName}"></TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Height="23" HorizontalAlignment="Left" Margin="60,18,0,0"
Name="textBlock1" Text="Search Name"
VerticalAlignment="Top" Width="134" />
<TextBox Height="27" HorizontalAlignment="Left" Margin="208,13,0,0"
Name="txtNameToSearch" TextChanged="txtNameToSearch_TextChanged"
VerticalAlignment="Top" Width="202" />
</Grid>

The xaml code shown above defines a ListBox which has ItemTemplate set to TextBlock. This TextBlock is bound with EmpName. The TextBox(txtNameToSearch) is used to define filter values.
In the Window_Loaded event, add the following code
ObservableCollection<Employee> lstEmployee =
new ObservableCollection<Employee>();

private void Window_Loaded(object sender, RoutedEventArgs e)
{
lstEmployee.Add(new Employee() { EmpNo = 1001, EmpName = "Mahesh" });
lstEmployee.Add(new Employee() { EmpNo = 1002, EmpName = "Amit" });
lstEmployee.Add(new Employee() { EmpNo = 1003, EmpName = "Vaibhav" });
lstEmployee.Add(new Employee() { EmpNo = 1004, EmpName = "Ashwin" });
lstEmployee.Add(new Employee() { EmpNo = 1005, EmpName = "Prashant" });
lstEmployee.Add(new Employee() { EmpNo = 1006, EmpName = "Vinit" });
lstEmployee.Add(new Employee() { EmpNo = 1007, EmpName = "Abhijit" });
lstEmployee.Add(new Employee() { EmpNo = 1008, EmpName = "Pankaj" });
lstEmployee.Add(new Employee() { EmpNo = 1009, EmpName = "Kaustubh" });
lstEmployee.Add(new Employee() { EmpNo = 1010, EmpName = "Mohan" });

lstEmpData.ItemsSource = lstEmployee;
}

The code shown above defines an Employee collection bound to the ListBox.

Now in the TextChanged event of the TextBox, add the following LINQ code which filters data from the collection and binds the result to the Listbox:

private void txtNameToSearch_TextChanged(object sender,
TextChangedEventArgs e)
{
  string txtOrig = txtNameToSearch.Text;
  string upper = txtOrig.ToUpper();
  string lower = txtOrig.ToLower();

  var empFiltered = from Emp in lstEmployee
  let ename = Emp.EmpName
  where
   ename.StartsWith(lower)
   || ename.StartsWith(upper)
   || ename.Contains(txtOrig)
   select Emp;

  lstEmpData.ItemsSource = empFiltered;
}
 

OUTPUT
image

This entry was posted in Syndicated, WPF. Bookmark the permalink.

Comments are closed.