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