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

3 comments:

  1. Excellent, Thanks man, thank you very much... its too simple, i was trying lots of way for it, i didn't

    thanks a lot, keep it up

    -santosh

    ReplyDelete
  2. @Mahesh,

    Good work man, i tried with datatable, its too simple

    Thank you very much

    could you please give me your emailID or cell No?

    -Santosh Majgaonkar

    ReplyDelete
  3. Hello Sir,
    Your article is very usefull. I had a quick question w.r.t search if I have multiple template. IN the current example you have a EmpName,
    What if I have Phone num also in the template . and when ever I search of the number the list needs to show me the particular number. I am curious to know what would be the Linq query for it.

    Thank You

    ReplyDelete