Jump to: navigation, search

Difference between revisions of "HowTo:Implement Custom Filtering"


(List control)
(List control)
Line 144: Line 144:
 
       x:Name="FilterQueryResultList"
 
       x:Name="FilterQueryResultList"
 
       ItemsSource="{Binding DisplayItems, Source={StaticResource FilterView}}" />
 
       ItemsSource="{Binding DisplayItems, Source={StaticResource FilterView}}" />
 +
</source>
 +
</tab>
 +
</tabs>
 +
 +
Used namespace:
 +
<tabs>
 +
<tab name="UWP">
 +
<source lang = "xml">
 +
xmlns:controls="using:UBIK.WinX.Controls"
 +
</source>
 +
</tab>
 +
 +
<tab name="Xamarin">
 +
<source lang = "xml">
 +
xmlns:controls="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL"
 
</source>
 
</source>
 
</tab>
 
</tab>

Revision as of 08:48, 25 April 2023

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:

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:

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:

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 ListCollectionView/Content filtering, that would look like this:

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:

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.

UWP

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

Xamarin

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

Used namespace:

UWP

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

Xamarin

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


See also