Difference between revisions of "Property Based Content Sorting"
m |
|||
| Line 56: | Line 56: | ||
<source lang = "xml"> | <source lang = "xml"> | ||
| − | xmlns: | + | xmlns:controls="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL" |
xmlns:dataSource="clr-namespace:Syncfusion.DataSource;assembly=Syncfusion.DataSource.Portable" | xmlns:dataSource="clr-namespace:Syncfusion.DataSource;assembly=Syncfusion.DataSource.Portable" | ||
| − | < | + | <controls:SfListViewExt |
IsVisible="{Binding ShowComboBox}" | IsVisible="{Binding ShowComboBox}" | ||
ItemsSource="{Binding PropertyItem, Mode=OneWay, Converter={StaticResource SelectiveListToItems}}" | ItemsSource="{Binding PropertyItem, Mode=OneWay, Converter={StaticResource SelectiveListToItems}}" | ||
| Line 68: | Line 68: | ||
VerticalOptions="Center"> | VerticalOptions="Center"> | ||
| − | < | + | <controls:SfListViewExt.DataSource> |
<dataSource:DataSource> | <dataSource:DataSource> | ||
<dataSource:DataSource.SortDescriptors> | <dataSource:DataSource.SortDescriptors> | ||
| Line 74: | Line 74: | ||
</dataSource:DataSource.SortDescriptors> | </dataSource:DataSource.SortDescriptors> | ||
</dataSource:DataSource> | </dataSource:DataSource> | ||
| − | </ | + | </controls:SfListViewExt.DataSource> |
| − | </ | + | </controls:SfListViewExt> |
</source> | </source> | ||
Revision as of 12:44, 26 November 2020
A collection of property-based content sorting criteria can be applied to child object lists. Some common use cases are as follows.
- A user can click on a header to sort a child list based on a certain property's value;
- A customizer can create UI that presents such headers, each applying to a different property.
For example. One can customize the ChildArea template to include the following.
<Grid>
<Grid.Resources>
<converters:SortDirectionToSymbolConverter x:Key="SDToSymbolConverter" />
</Grid.Resources>
<Border Background="#8000488E" Visibility="{Binding Children.Sorting[SomePropertyName], Converter={StaticResource NullObjOrEmptyStrColConverter}}" />
<Border Background="#90707070" Visibility="{Binding Children.Sorting[SomePropertyName], Converter={StaticResource NullObjOrEmptyStrVisConverter}}" />
<Button FontFamily="Segoe MDL2 Assets"
Content="{Binding Children.Sorting[SomePropertyName], Converter={StaticResource SDToSymbolConverter}}"
Command="{Binding Children.SortByPropertyCommand}" CommandParameter="SomePropertyName" />
</Grid>
<Grid.Resources>
<converters:SortDirectionToSymbolConverter x:Key="SDToSymbolConverter" />
</Grid.Resources>
<Border Background="#8000488E" Visibility="{Binding Children.Sorting[SomePropertyName], Converter={StaticResource NullObjOrEmptyStrColConverter}}" />
<Border Background="#90707070" Visibility="{Binding Children.Sorting[SomePropertyName], Converter={StaticResource NullObjOrEmptyStrVisConverter}}" />
<Button FontFamily="Segoe MDL2 Assets"
Content="{Binding Children.Sorting[SomePropertyName], Converter={StaticResource SDToSymbolConverter}}"
Command="{Binding Children.SortByPropertyCommand}" CommandParameter="SomePropertyName" />
</Grid>
This is shown as a single header/button. The Command binding (SortByPropertyCommand) allows the child list to be sorted (ascending on the first click, descending on the second) by property "SomePropertyName" (case sensitive).
The binding on Content ensures the header displays a proper visual symbol. The ascending/descending/unsorted symbols can also be customized like the following if necessary.
<converters:SortDirectionToSymbolConverter x:Key="SDToSymbolConverter" Unsorted="◊" Ascending="△" Descending="▽" />
The codes for different "Segoe MDL2 Assets" symbols can be found here.
 | The Borders in the example are not mandatory. They merely highlight the currently active sorting header/button, which could be useful when multiple headers are displayed. |
Collection View sorting: UWP
This functionality is documented in more detail on the wiki page Version 3.6 (WinX).
 | This only works for UWP! The section below shows how to achieve list sorting on Xamarin. |
There is the possibility to sort at the point where you define your Collection View. This is especially useful for sorting Selective List items! An example is as follows:
xmlns:cv="using:UBIK.WinX.UI.CollectionView"
<cv:ListCollectionView x:Key="SortedList" ItemsSource="{Binding EditDialogViewModel.PropertyItem, Converter={StaticResource SelectiveListToItemsConverter}}">
<cv:ListCollectionView.SortDescriptions>
<cv:SortDescriptions>
<cv:SortDescription Direction="Ascending" PropertyName="Value" />
</cv:SortDescriptions>
</cv:ListCollectionView.SortDescriptions>
</cv:ListCollectionView>
<cv:ListCollectionView x:Key="SortedList" ItemsSource="{Binding EditDialogViewModel.PropertyItem, Converter={StaticResource SelectiveListToItemsConverter}}">
<cv:ListCollectionView.SortDescriptions>
<cv:SortDescriptions>
<cv:SortDescription Direction="Ascending" PropertyName="Value" />
</cv:SortDescriptions>
</cv:ListCollectionView.SortDescriptions>
</cv:ListCollectionView>
| This example can be found in the Lonza customising. |
ListView sorting: Xamarin
DataSource sorting works out of the box with SFListView! An example is as follows:
xmlns:controls="clr-namespace:UBIK.CPL.Controls;assembly=UBIK.CPL"
xmlns:dataSource="clr-namespace:Syncfusion.DataSource;assembly=Syncfusion.DataSource.Portable"
<controls:SfListViewExt
IsVisible="{Binding ShowComboBox}"
ItemsSource="{Binding PropertyItem, Mode=OneWay, Converter={StaticResource SelectiveListToItems}}"
SelectedItem="{Binding PropertyValue, Mode=TwoWay, Converter={StaticResource SelectiveItemToValue}, ConverterParameter={Binding Path=BindingContext, Source={x:Reference UBIKEditStringControl}}}"
SelectionMode="Single"
ItemSize="90"
Style="{DynamicResource SelectableListView}"
VerticalOptions="Center">
<controls:SfListViewExt.DataSource>
<dataSource:DataSource>
<dataSource:DataSource.SortDescriptors>
<dataSource:SortDescriptor Direction="Ascending" PropertyName="Value" />
</dataSource:DataSource.SortDescriptors>
</dataSource:DataSource>
</controls:SfListViewExt.DataSource>
</controls:SfListViewExt>
xmlns:dataSource="clr-namespace:Syncfusion.DataSource;assembly=Syncfusion.DataSource.Portable"
<controls:SfListViewExt
IsVisible="{Binding ShowComboBox}"
ItemsSource="{Binding PropertyItem, Mode=OneWay, Converter={StaticResource SelectiveListToItems}}"
SelectedItem="{Binding PropertyValue, Mode=TwoWay, Converter={StaticResource SelectiveItemToValue}, ConverterParameter={Binding Path=BindingContext, Source={x:Reference UBIKEditStringControl}}}"
SelectionMode="Single"
ItemSize="90"
Style="{DynamicResource SelectableListView}"
VerticalOptions="Center">
<controls:SfListViewExt.DataSource>
<dataSource:DataSource>
<dataSource:DataSource.SortDescriptors>
<dataSource:SortDescriptor Direction="Ascending" PropertyName="Value" />
</dataSource:DataSource.SortDescriptors>
</dataSource:DataSource>
</controls:SfListViewExt.DataSource>
</controls:SfListViewExt>
| This example can be found in the Tyra customising. |
