Changes

Property Based Content Sorting

2,008 bytes added, 14:16, 18 May 2017
Created page with "A collection of property-based content sorting criteria can be applied to child object lists. {{Version/WinXSince|2.6.1}} Some common use cases are as follows. * A user can cl..."
A collection of property-based content sorting criteria can be applied to child object lists. {{Version/WinXSince|2.6.1}} 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.
<source lang = "xml">
<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>
</source>


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".

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.
<source lang = "xml">
<converters:SortDirectionToSymbolConverter x:Key="SDToSymbolConverter" Unsorted="&#x25CA;" Ascending="&#x25B3;" Descending="&#x25BD;" />
</source>

The codes for different "Segoe MDL2 Assets" symbols can be found [[https://docs.microsoft.com/en-us/windows/uwp/style/segoe-ui-symbol-font|here]].

{{Hint|The Borders in the example are not mandatory. They merely highlight the currently active sorting header/button.}}