jQuery and ASP.NET

July 30, 2010

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


'Like' us on our FaceBook page if you find this blog useful. Thanks!


Did you like this post?
kick it on DotNetKicks.com Save on Delicious
subscribe via rss subscribe via e-mail
print this post follow me on twitter


About The Author

Mahesh is having 10 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). He also blogs regularly at DotNetCurry.com. Follow him on twitter @maheshdotnet

comments

2 Responses to "Filter data in a WPF ListBox"
  1. Anonymous said...
    August 26, 2010 11:33 PM

    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

  2. Santosh Majgaonkar said...
    August 26, 2010 11:39 PM

    @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

 

Copyright © 2009-2011 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions