Implement Custom Filtering

The custom filtering is based on four different xaml parts:

• Input field
• EvalExpression
• ListCollectionView
• ListView
  

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

<Grid>
      <!--  Type / Content / Buttons  -->
      <Grid.ColumnDefinitions>
             <ColumnDefinition Width="60" />
             <ColumnDefinition Width="2*" />
       </Grid.ColumnDefinitions>

      <TextBlock Margin="0,0,0,0"
           Grid.Column="0">
            <Run Text="Name:"/>
      </TextBlock>

     <!--  Textbox for editing  -->
     <TextBox x:Name="InputTextboxName"
          Grid.Column="1"
          Margin="0,0,0,0">
     </TextBox>
</Grid>

Xamarin

<Entry x:Name="Filter_Input"
    Margin="2,2,2,2"
    HeightRequest="40"
    HorizontalOptions="Start"
    WidthRequest="400"
    Placeholder="Name...">
</Entry>

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"

ListCollectionView & SfListViewExt

To get used to this EvalExpression we also need to configure a ListCollectionView, that would look like this:

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"

ListView control

The ListView is for using filtered results.

UWPXamarin

UWP

<controls:SelectionBoundListView
               x:Name="FilterQueryList"
               ItemTemplate="{Binding PropertyViewModel.TemplateService[UBIKInlineQueryResultItem]}"
               ItemsSource="{StaticResource FilterView}"
               SelectedValue="{Binding PropertyValue}"
               SelectionMode="Single"
               Visibility="{Binding PropertyViewModel.FilterQuery, Converter={StaticResource NullObjectToCollapsedConverter}}">
                <Interactivity:Interaction.Behaviors>
                    <behaviors:UserSelectionChangedBehavior>
                        <Core:InvokeCommandAction Command="{Binding PropertyViewModel.SetPropertyValueCommand}"
                           CommandParameter="{Binding ElementName=FilterQueryList, Path=SelectedValue}" />
                    </behaviors:UserSelectionChangedBehavior>
                </Interactivity:Interaction.Behaviors>
</controls:SelectionBoundListView>

Xamarin

<controls:SfListViewExt
               x:Name="FilterQueryResultList"
               BackgroundColor="White"
               IsVisible="{Binding PropertyViewModel.ShowComboBox, Converter={StaticResource BoolToNotBool}, FallbackValue=false, TargetNullValue=false}"
               ItemSize="60"
               ItemTemplate="{StaticResource EditorFilterQueryItemTemplate}"
               ItemsSource="{Binding DisplayItems, Source={StaticResource FilterView}}"
               SelectedItem="{Binding PropertyViewModel.ValueItem.PropertyValue, Mode=OneWay, Converter={StaticResource GuidPropertyValue}, ConverterParameter={Binding Source={x:Reference FilterQueryResultList}}}"
               SelectionMode="Single"
               SelectionBackgroundColor="{StaticResource UBIKAccentColor}" />

See also

• XAML