Difference between revisions of "Property Based Content Sorting"
(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...") |
|||
| Line 26: | Line 26: | ||
</source> | </source> | ||
| − | The codes for different "Segoe MDL2 Assets" symbols can be found | + | 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.}} | + | {{Hint|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.}} |
Revision as of 14:18, 18 May 2017
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".
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. |
