Implement Custom Filtering

The custom filtering is based on four different xaml parts:

• Input field
• EvalExpression
• List filter
• List control
  

With this Filter, we can filter dynamically without using any evaluate button or something, you just input a value that you want to filter with and it will directly output you any item that contains the filter input.

Input field

The input field is just a basic Textbox/Entry we will use to input the filter criteria value.

It will look like this:

UWPXamarin

UWP

<TextBox x:Name="InputTextboxName" />

Xamarin

<Entry x:Name="Filter_Input"/>

EvalExpression

With this EvalExpression, we can combine the Input text field with the value parameter (property from the item we want to filter).

Here is the final XAML EvalExpression solution:

UWPXamarin

UWP

<controls:EvalExpression x:Name="FilterExpression"
      Context="{Binding}"
      Expression="FC1">
      <controls:EvalExpressionParameter Name="FC1"
           Value="{Binding ElementName=InputTextboxName, Path=Text, Converter={StaticResource StringFormatConverter}, ConverterParameter='Item.Values[&quot;NAME&quot;].ToLower().Contains(&quot;{0}&quot;.ToLower())==true'}" />
</controls:EvalExpression>

Xamarin

<controls:EvalExpression x:Key="FilterExpression" Expression="(P1==null||P1==&quot;&quot;)?&quot;true&quot;:P0" Context="{Binding}">
         <controls:EvalExpressionParameter Name="P0" Value="{Binding Path=Text, Source={x:Reference Filter_Input}, Converter={StaticResource Formatter}, ConverterParameter='Item.Values[&quot;NAME&quot;].ToLower().Contains(&quot;{0}&quot;.ToLower())==true'}" />
         <controls:EvalExpressionParameter Name="P1" Value="{Binding Path=Text, Source={x:Reference Filter_Input}}" />
</controls:EvalExpression>

The best solution would be to place this eval expression into the <Grid.Resources>.

Used namespace:

UWPXamarin

UWP

xmlns:controls="using:UBIK.WinX.Controls"

Xamarin

xmlns:controls="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL"

List filter

To get used to this EvalExpression we also need to configure a List filter component like in this case ListCollectionView for UWP & Content filtering for Xamarin:

UWPXamarin

UWP

<cv:ListCollectionView x:Key="FilterView"
       Expression="{Binding ElementName=FilterExpression, Path=Result}"
       ItemsSource="{Binding Children.Items}" />

Xamarin

<controls:SfDataSourceExt x:Key="FilterView"
       Expression="{Binding Path=Result, Source={StaticResource FilterExpression}}"
       ItemsSource="{Binding Children.Items}" />

Used namespace:

UWPXamarin

UWP

xmlns:cv="using:UBIK.WinX.UI.CollectionView"

Xamarin

xmlns:controls="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL"

List control

The ListView is for using/displaying filtered results.

UWPXamarin

UWP

<controls:SelectionBoundListView
      x:Name="FilterQueryList"    
      ItemsSource="{StaticResource FilterView}" />

Xamarin

<controls:SfListViewExt
      x:Name="FilterQueryResultList"
      ItemsSource="{Binding DisplayItems, Source={StaticResource FilterView}}" />

Used namespace:

UWPXamarin

UWP

xmlns:controls="using:UBIK.WinX.Controls"

Xamarin

xmlns:controls="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL"

See also

• XAML