C#|XAML : ListBox – Search, Filter, and Highlight (2/3)

Filter by Joe Edwards, on Flickr
Filter, a photo by Joe Edwards on Flickr.

In part 1 we set up our ListBox and search TextBox in MainPage.XAML. We also created the ViewModel class which will be shown in the ListBox. You can download my app for free which has the complete working filter/search/highlight function.

In this post we will add functionality to filter our ListBox items on the basis of text entered in TextBox. We will filter the list on the fly without any query. To achieve this we will utilize filter event of CollectionViewSource. We will also create a field in Profile class to concatenate different properties which are going to participate in search.

Add new property to Profile class like so:

        public string SearchText { get { return string.Format("{0}|{1}|{2}", Name, Address, Note); } }

Update the code behind MainPage.xaml.cs to add a filter event handler. This is how the complete code of MainPage class will look like:

    public partial class MainPage : PhoneApplicationPage
    {
        ObservableCollection<Profile> _infoList = new ObservableCollection<Profile>();
        FilterEventHandler _searchFilter;

        // Constructor
        public MainPage()
        {
            InitializeComponent();

            _infoList.Add(new Profile("A Kejriwal", "New Delhi, India", "I am common man A"));
            _infoList.Add(new Profile("Bill Gates", "Microsoft One", "I am not a common man"));
            _infoList.Add(new Profile("Bill Burr", "Comedy Central", "Don't say there is no reason"));
            _infoList.Add(new Profile("Kartavya Sharma", "Street dhimka", "What do you mean?"));
            _infoList.Add(new Profile("Louis CK", "HBO One Night", "Bill curses a lot in comedy"));
            _infoList.Add(new Profile("Sanjay Sharma", "Street falana", "What do you mean?"));
            _infoList.Add(new Profile("Z Kejriwal", "New Delhi, India", "Don't underestimate the power"));

            _searchFilter = new FilterEventHandler(onSearchResultsFiltering);

            textListViewSource.Source = null;
            textListViewSource.Source = _infoList;
            textListViewSource.Filter += _searchFilter;
            listBoxTextItems.DataContext = _infoList;
        }

        private void onSearchResultsFiltering(object sender, FilterEventArgs e)
        {
            Profile _info = e.Item as Profile;
            if (_info != null)
            {
                if (_info.SearchText.ToUpper().Contains(String.Format("{0}", textBoxSearch.Text).ToUpper()))
                {
                    e.Accepted = true;
                }
                else
                {
                    e.Accepted = false;
                }
            }
        }
    }

Next, we want our TextBox to initiate filtration of the ListBox items as soon as text is changed by user. To achieve this behavior, we will trap KeyUp event of TextBox. Let’s update XAML to add the event handler.

<TextBox Grid.Row="0" x:Name="textBoxSearch" KeyUp="textBoxSearch_KeyUp"/>

As we have the event handler code inserted by VS in the code behind, let’s update it to refresh our ListBox with latest filtered list:

        private void textBoxSearch_KeyUp(object sender, KeyEventArgs e)
        {
            Dispatcher.BeginInvoke(new Action(prepareFilteredList));
        }
        private void prepareFilteredList()
        {
            textListViewSource.View.Refresh();
        }

We are ready! F5. Type ‘Bill’ in TextBox. You will see that the list gets filtered on the fly, while you type. Filtered list should look like this :
FilteredList

In the next part of the series, we will see how to highlight the searched text in the fields in ListBox.

To be continued…(Part 3)

Advertisements

5 thoughts on “C#|XAML : ListBox – Search, Filter, and Highlight (2/3)

  1. Pingback: C#|XAML : ListBox – Search, Filter, and Highlight (1/3) | Sharp Statements

  2. Pingback: C#|XAML : ListBox – Search, Filter, and Highlight (3/3) | Sharp Statements

  3. Pingback: Dynamically highlighting textbox parts when filtering | Around computing

  4. Pingback: search listbox in WP8 by a textbox input - HTML CODE

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