Live Chat Icon For mobile
Live Chat Icon

How do I color the bg of my ListView in GridView mode based on a ‘search’ textbox where the user can enter search text?

Platform: WPF| Category: ListView

This is kind of how Firefox lets you search texts – as you type in the search box the matching text all get highligted automatically. You can use this solution for other templatized controls as well.

(For better formatting, take a look at this thread: How to color particular cell of the grid view?)

<Window x:Class='SDKSample.Window1'  
        <ds:MyBGConverter x:Key='myBGConverter'></ds:MyBGConverter>  
            <ObjectDataProvider x:Key='EmployeeInfoDataSource'  
           ObjectType='{x:Type ds:myEmployees}'/>   
      <!--Repeat this for all columns where you want this to happen-->  
        <DataTemplate x:Key='myCellTemplateFN'>   
            <TextBlock Foreground='Green' HorizontalAlignment='Center'>   
                <Binding Path='FirstName'/>   
                    <MultiBinding Converter='{StaticResource myBGConverter}'>   
                            <Binding ElementName='searchTB' Path='Text' />  
                            <Binding RelativeSource='{RelativeSource Self}'></Binding>  
      <RowDefinition Height='50'/>   
    <TextBlock Grid.Row='0' Grid.Column='0' FontSize='14'  
      ListView created with XAML   
    <StackPanel Grid.Row='1' Grid.Column='0' HorizontalAlignment='Center'>   
      <ListView ItemsSource='{Binding Source=   
                             {StaticResource EmployeeInfoDataSource}}'   
          <GridView AllowsColumnReorder='true'  
                    ColumnHeaderToolTip='Employee Information'>   
            <GridViewColumn CellTemplate='{StaticResource myCellTemplateFN}'  
                            Header='First Name' Width='100'/>   
            <GridViewColumn DisplayMemberBinding=   
                                '{Binding Path=LastName}'    
                            Header='Last Name' Width='100'/>   
            <GridViewColumn DisplayMemberBinding=   
                                '{Binding Path=EmployeeNumber}'    
                            Header='Employee No.' Width='100'/>   
            <StackPanel Orientation='Horizontal'>   
                <TextBlock>Enter Search String Here:</TextBlock>  
                <TextBox x:Name='searchTB' MinWidth='100' Width='150'></TextBox>  

And add this to your code-behind:

public class MyBGConverter : IMultiValueConverter   
        #region IMultiValueConverter Members   
        public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)   
            TextBlock lvi = (TextBlock)values[1];   
            string filter = (string)values[0];   
            if (filter != String.Empty && lvi.Text.ToLower().Contains(filter.ToLower()))   
                return Brushes.Aqua;   
                return Brushes.White;   
        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)   
            throw new NotImplementedException();   
    public class EmployeeInfo   
        private string _firstName;   
        private string _lastName;   
        private string _employeeNumber;   
        public string FirstName   
            get {return _firstName;}   
            set {_firstName = value;}   
        public string LastName   
            get {return _lastName;}   
            set {_lastName = value;}   
        public string EmployeeNumber   
            get {return _employeeNumber;}   
            set {_employeeNumber = value;}   
        public EmployeeInfo(string firstname, string lastname, string empnumber)   
            _firstName = firstname;   
            _lastName = lastname;   
            _employeeNumber = empnumber;   
    public class myEmployees :   
        public myEmployees()   
            Add(new EmployeeInfo('Jesper', 'Aaberg', '12345'));   
            Add(new EmployeeInfo('Dominik', 'Paiha', '98765'));   
            Add(new EmployeeInfo('Yale', 'Li', '23875'));   
            Add(new EmployeeInfo('Muru', 'Subramani', '49392'));   

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.