Property Based Content Sorting

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>

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="&#x25CA;" Ascending="&#x25B3;" Descending="&#x25BD;" />

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.