Retemplate
Want to retemplate or restyle the JumpList controls to match your app design? Grab the default styles here and modify it as needed.

How to Use
Given an collection of objects, we can sort and group it using the JumpListHelper class and present it in either the AlphaJumpList control or the GenericJumpList control. For this page, we will be demonstrating these controls using a class Item with two property called Name and Category.

public class Item
{
    public string Name { get; set; }
    public string Category { get; set; }
}

Using an AlphaJumpList Control
To group and sort a collection of objects alphabetically, we will need to first prepare the data. Let's say we have a collection of Item objects as List<Item> Items. To sort it for the AlphaJumpList, we can use JumpListHelper class' ToAlphaGroups method.

// Using extension method
GroupedItems = Items.ToAlphaGroups(x => x.Name);
 
// or using static method
GroupedItems = JumpListHelper.ToAlphaGroups(Items, x => x.Name);

Now the data is ready for the AlphaJumpList. The prepared data is stored in a property called GroupedItems and we can now set up our AlphaJumpList and bind it to GroupedItems. Do not forget to create an item template to properly present each item.

<Grid>
    <q:AlphaJumpList>
        <ListView ItemsSource="{Binding GroupedItems}" />
    </q:AlphaJumpList>
</Grid>

Using a GenericJumpList Control
Sometimes, it preferable to group a collection based on some common attribute. To group and sort a collection of objects based on a board property like a date range or classification, we will need to again prepare the data. This time, we can use JumpListHelper class' ToGroups method. With this method, it takes a sorting selector and a grouping selector separately.

// Using extension method
GroupedItems = Items.ToGroups(x => x.Name, x => x.Category);
 
// or using static method
GroupedItems = JumpListHelper.ToGroups(Items, x => x.Name, x => x.Category);

Now the data is ready for the AlphaJumpList. The prepared data is stored in a property called GroupedItems and we can now set up our AlphaJumpList and bind it to GroupedItems. Do not forget to create an item template to properly present each item.

<Grid>
    <q:GenericJumpList>
        <ListView ItemsSource="{Binding GroupedItems}" />
    </q:GenericJumpList>
</Grid>

Last edited Aug 27, 2014 at 8:11 PM by qdev, version 3