Jump to: navigation, search

Difference between revisions of "HowTo:Implement Custom Filtering"

(→‎ListView control)
(→‎List control)
Line 134: Line 134:
 
<source lang = "xml">
 
<source lang = "xml">
 
<controls:SelectionBoundListView
 
<controls:SelectionBoundListView
−
                x:Name="FilterQueryList"
+
        x:Name="FilterQueryList"    
−
                ItemTemplate="{Binding PropertyViewModel.TemplateService[UBIKInlineQueryResultItem]}"
+
        ItemsSource="{StaticResource FilterView}" />
−
                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>
+
 
</source>
 
</source>
 
</tab>
 
</tab>
Line 153: Line 142:
 
<source lang="xml">
 
<source lang="xml">
 
<controls:SfListViewExt
 
<controls:SfListViewExt
−
                x:Name="FilterQueryResultList"
+
      x:Name="FilterQueryResultList"
−
                BackgroundColor="White"
+
      ItemsSource="{Binding DisplayItems, Source={StaticResource FilterView}}" />
−
                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}" />
+
 
</source>
 
</source>
 
</tab>
 
</tab>

Revision as of 08:47, 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 filtered results.

UWP

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

Xamarin

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


See also

Retrieved from "https://wiki.augmensys.com/index.php?title=HowTo:Implement_Custom_Filtering&oldid=24428"