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
<!-- 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
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
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: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
Xamarin
List filter
To get used to this EvalExpression we also need to configure a ListCollectionView/Content filtering, that would look like this:
UWP
Expression="{Binding ElementName=FilterExpression, Path=Result}"
ItemsSource="{Binding Children.Items}" />
Xamarin
Expression="{Binding Path=Result, Source={StaticResource FilterExpression}}"
ItemsSource="{Binding Children.Items}" />
Used namespace:
UWP
Xamarin
List control
The ListView is for using/displaying filtered results.
UWP
x:Name="FilterQueryList"
ItemsSource="{StaticResource FilterView}" />
Xamarin
x:Name="FilterQueryResultList"
ItemsSource="{Binding DisplayItems, Source={StaticResource FilterView}}" />
Used namespace:
UWP
Xamarin
