Difference between revisions of "Property Based Content Sorting"
m |
|||
| (2 intermediate revisions by the same user not shown) | |||
| Line 31: | Line 31: | ||
{{Category/Version|2.6.1}} | {{Category/Version|2.6.1}} | ||
| + | <br> | ||
| + | <br> | ||
== Collection View sorting: UWP== | == Collection View sorting: UWP== | ||
| Line 51: | Line 53: | ||
{{Hint|This example can be found in the Lonza customising.}} | {{Hint|This example can be found in the Lonza customising.}} | ||
| + | <br> | ||
| + | <br> | ||
== ListView sorting: Xamarin == | == ListView sorting: Xamarin == | ||
DataSource sorting works out of the box with SFListView! An example is as follows: | DataSource sorting works out of the box with SFListView! An example is as follows: | ||
| + | |||
| + | {{Attention| This only works for ValueItems (the sorting of selectable options in a list-type property pcker)! For sorting UBIK objects, use the Children.Sorting functionality described above, or make use of metaproperties like the GroupID and OrderID.}} | ||
<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 74: | ||
VerticalOptions="Center"> | VerticalOptions="Center"> | ||
| − | < | + | <controls:SfListViewExt.DataSource> |
<dataSource:DataSource> | <dataSource:DataSource> | ||
<dataSource:DataSource.SortDescriptors> | <dataSource:DataSource.SortDescriptors> | ||
| Line 74: | Line 80: | ||
</dataSource:DataSource.SortDescriptors> | </dataSource:DataSource.SortDescriptors> | ||
</dataSource:DataSource> | </dataSource:DataSource> | ||
| − | </ | + | </controls:SfListViewExt.DataSource> |
| − | </ | + | </controls:SfListViewExt> |
</source> | </source> | ||
Latest revision as of 11:18, 23 September 2024
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:
| This only works for ValueItems (the sorting of selectable options in a list-type property pcker)! For sorting UBIK objects, use the Children.Sorting functionality described above, or make use of metaproperties like the GroupID and OrderID. |
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. |
