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?)

[XAML]
<Window x:Class='SDKSample.Window1'  
    xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'  
    xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'  
    Loaded='OnLoad'  
    xmlns:ds='clr-namespace:SDKSample'>   
    
  <Window.Resources>  
        <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'>   
          <DockPanel>  
            <TextBlock Foreground='Green' HorizontalAlignment='Center'>   
              <TextBlock.Text>  
                <Binding Path='FirstName'/>   
              </TextBlock.Text>  
                <TextBlock.Background>  
                    <MultiBinding Converter='{StaticResource myBGConverter}'>   
                        <MultiBinding.Bindings>  
                            <Binding ElementName='searchTB' Path='Text' />  
                            <Binding RelativeSource='{RelativeSource Self}'></Binding>  
                        </MultiBinding.Bindings>  
                    </MultiBinding>  
                </TextBlock.Background>  
            </TextBlock>  
          </DockPanel>  
        </DataTemplate>  
  
    </Window.Resources>  
  <Grid>  
    <Grid.RowDefinitions>  
      <RowDefinition Height='50'/>   
      <RowDefinition/>  
    </Grid.RowDefinitions>  
    <Grid.ColumnDefinitions>  
      <ColumnDefinition/>  
      <ColumnDefinition/>  
    </Grid.ColumnDefinitions>  
    <TextBlock Grid.Row='0' Grid.Column='0' FontSize='14'  
               HorizontalAlignment='Center'>   
      ListView created with XAML   
    </TextBlock>  
    <StackPanel Grid.Row='1' Grid.Column='0' HorizontalAlignment='Center'>   
      <ListView ItemsSource='{Binding Source=   
                             {StaticResource EmployeeInfoDataSource}}'   
                >  
        <ListView.View>  
          <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'/>   
          </GridView>  
        </ListView.View>  
      </ListView>  
            <StackPanel Orientation='Horizontal'>   
                <TextBlock>Enter Search String Here:</TextBlock>  
                <TextBox x:Name='searchTB' MinWidth='100' Width='150'></TextBox>  
            </StackPanel>  
        </StackPanel>  
  </Grid>  
  
</Window>  

And add this to your code-behind:

[C#]
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;   
            }   
            else  
                return Brushes.White;   
        }   
  
        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)   
        {   
            throw new NotImplementedException();   
        }  
 
        #endregion   
    }   
  
    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 :   
            ObservableCollection   
    {   
        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

Share on twitter
Share on facebook
Share on linkedin

Related FAQs

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

Please submit your question and answer.