Difference between revisions of "HowTo:Implement Custom Filtering"
(→ListCollectionView & SfListViewExt) |
|||
| Line 2: | Line 2: | ||
* Input field | * Input field | ||
* EvalExpression | * EvalExpression | ||
| − | * | + | * List filter |
| − | * | + | * List control <br> |
<br> | <br> | ||
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. | 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. | ||
Revision as of 08:42, 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.
Contents
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>
<!-- 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>
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["NAME"].ToLower().Contains("{0}".ToLower())==true'}" />
</controls:EvalExpression>
Context="{Binding}"
Expression="FC1">
<controls:EvalExpressionParameter Name="FC1"
Value="{Binding ElementName=InputTextboxName, Path=Text, Converter={StaticResource StringFormatConverter}, ConverterParameter='Item.Values["NAME"].ToLower().Contains("{0}".ToLower())==true'}" />
</controls:EvalExpression>
Xamarin
<controls:EvalExpression x:Key="FilterExpression" Expression="(P1==null||P1=="")?"true":P0" Context="{Binding}">
<controls:EvalExpressionParameter Name="P0" Value="{Binding Path=Text, Source={x:Reference Filter_Input}, Converter={StaticResource Formatter}, ConverterParameter='Item.Values["NAME"].ToLower().Contains("{0}".ToLower())==true'}" />
<controls:EvalExpressionParameter Name="P1" Value="{Binding Path=Text, Source={x:Reference Filter_Input}}" />
</controls:EvalExpression>
<controls:EvalExpressionParameter Name="P0" Value="{Binding Path=Text, Source={x:Reference Filter_Input}, Converter={StaticResource Formatter}, ConverterParameter='Item.Values["NAME"].ToLower().Contains("{0}".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"
ListCollectionView & SfListViewExt
To get used to this EvalExpression we also need to configure a ListCollectionView/SfListViewExt, that would look like this:
UWP
<cv:ListCollectionView x:Key="FilterView"
Expression="{Binding ElementName=FilterExpression, Path=Result}"
ItemsSource="{Binding Children.Items}" />
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}" />
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"
ListView control
The ListView is for using filtered results.
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>
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}" />
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}" />
