Implementing LongListSelector as JumpLists in Windows Phone 8 : Alphabetical List
The LongListSelector control in Windows Phone 8 is highly versatile. I decided to delve into the various ways we can use the LongListSelector as a JumpList. After a lot of searching on MSDN and a little bit of dabbling on my own part, I preparing a short tutorial in 2 parts:
Part 1: To help implement JumpLists with Standard Alphabetical Sorted Lists of your data
Part 2: To customize the Sorting of your List based on a value of your data
Before we begin, you should understand the parts of a JumpList.
The Jump List groups the list Data based on a particular key and allows you to jump to different parts of the list as per your requirement. The LongList Selector is used, the Layout Mode is set to Grid.
When creating a Jumplist, we have to take note of the following 4 points:
1. IsGroupingEnabled= True
2. GroupHeader Template is set
3. Item Template is set
4. Jumplist Style is set
So Part 1, making an alphabetically sorted JumpList of your data.
Open a new project and create your Models and View Models.
I am using a Picture Gallery, so in the example, my model is:
public class Picture
{
public string imageUri { get; set; }
public string Title { get; set; }
}
I created the View Model as a list of images. The List of Images is:
Listpictures = new List<Picture>();
Listpictures.Add(new Picture { imageUri = "https://hdwallsize.com/wp-content/uploads/2013/04/Download-Cool-Wallpaper-Cars-Background.jpg", Title= "AAA" });
Listpictures.Add(new Picture { imageUri = "https://t1.gstatic.com/images?q=tbn:ANd9GcRCQUNS-RkvNURbwfSroDcaMG4WvcjtE_rbeng0Y_mA-qN30B66" , Title="BBB"});
Listpictures.Add(new Picture { imageUri = "https://t3.gstatic.com/images?q=tbn:ANd9GcSjkQWG5hyjCZAa_ybl5UhWEyenQeF27rtWlbkxa8dr-wIugS3DGw", Title = "AAA" });
Listpictures.Add(new Picture { imageUri = "https://t3.gstatic.com/images?q=tbn:ANd9GcTEgitM85B6poINUE5QVySDTkO0QC855ciL0XFploQnY5EYMwXP", Title = "BBB" });
Listpictures.Add(new Picture { imageUri = "https://t1.gstatic.com/images?q=tbn:ANd9GcSi8sOLCm9l45caf9ySLm0oHODFPYYKgJObG6u92qS1fb6oYAzWcw" , Title="JJJ"});
Listpictures.Add(new Picture { imageUri = "https://t3.gstatic.com/images?q=tbn:ANd9GcSsDSYU1AyWP-loJtWfBAhK7uJHe3hFFC6N4-sA7ccGyURNALT8jA" , Title="LLL"});
Listpictures.Add(new Picture { imageUri = "https://t0.gstatic.com/images?q=tbn:ANd9GcTBNyAhcliKqcsttwCm3D4ajThDdo-qiR0wPkv8EihaP6WRGmtl" , Title="FFF"});
Listpictures.Add(new Picture { imageUri = "https://t1.gstatic.com/images?q=tbn:ANd9GcS5iilvZh0cSSivGM5GQA7yJpovFNPlEkaVRNQlTu8Ph0KJm0Vr" , Title="QQQ"});
Listpictures.Add(new Picture { imageUri = "https://www.jeffbullas.com/wp-content/uploads/2012/06/10-Cool-Google+-Brand-Covers.jpg", Title = "AAA" });
Listpictures.Add(new Picture { imageUri = "https://t3.gstatic.com/images?q=tbn:ANd9GcQ_ih-aN2gxUz435mPC733IFDNhk1vqFQSVKshWMHEtzxKfKqbs", Title = "QQQ" });
So now I have a list of Images, and each Image as a Title. The first step is to create a simple List in the Grid View Mode. Add a LongList Selector to your XAML, add the Data Binding to your View Model and the list will look this. This is a basic Photo Gallery View to display the Images.
![clip_image002[4]](https://msdntnarchive.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/35/09/metablogapi/3365.clip_image0024_02A59F7C.png "clip_image002[4]")
Now we will sort this list of Images, by their Titles.
To do this, we will simply use a Class called AlphaKeyGroup. This class sorts the list according to the Key Value which you specify. For this example, I will be using the Title as the sort key.
So the 1st step, is to set up the JumpList in the XAML.
For the LongListSelector, we Create a GroupHeader Template. In the XAML of your solution, under <phone:PhoneApplicationPage.Resources> , copy the following XAML:
<DataTemplate x:Key="groupHeaderTemplate">
<Border Background="Transparent" Padding="5">
<Border Background="{StaticResource PhoneAccentBrush}" BorderBrush="{StaticResource PhoneAccentBrush}" BorderThickness="2" Width="62"
Height="62" Margin="0,0,18,0" HorizontalAlignment="Left">
<TextBlock Text="{Binding Key}" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="48" Padding="6"
FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Border>
</Border>
</DataTemplate>
For the TextBlock, the Binding has been done to Key, which will be generated by us in Code. You can change the background to any color you want, right now it is bound to the Accent Color of the Phone.
Next, we create a JumpList Style. Copy the XAML below for the JumpList Style to get the Alphabetical List :
<phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
<phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>
<Style x:Key="imageJumpListStyle" TargetType="phone:LongListSelector">
<Setter Property="GridCellSize" Value="113,113"/>
<Setter Property="LayoutMode" Value="Grid" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Width="113" Height="113" Margin="6" >
<TextBlock Text="{Binding Key}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="48" Padding="6"
Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Here the TextBlocks are bound to Title, as that is the field I am sorting the List. You can Change the Binding to whichever field of your list you are using.
Now to Create the List and Sort the List. To do this, we use a Standard Class which creates an Alphabetical list of your list items.
In your Solution File, Add a new Class, which is called AlphaKeyGroup. Now add the following code:
public class AlphaKeyGroup<T> : List<T>
{
/// <summary>
/// The delegate that is used to get the key information.
/// </summary>
/// <param name="item">An object of type T</param>
/// <returns>The key value to use for this object</returns>
public delegate string GetKeyDelegate(T item);
/// <summary>
/// The Key of this group.
/// </summary>
public string Key { get; private set; }
/// <summary>
/// Public constructor.
/// </summary>
/// <param name="key">The key for this group.</param>
public AlphaKeyGroup(string key)
{
Key = key;
}
/// <summary>
/// Create a list of AlphaGroup<T> with keys set by a SortedLocaleGrouping.
/// </summary>
/// <param name="slg">The </param>
/// <returns>Theitems source for a LongListSelector</returns>
private static List<AlphaKeyGroup<T>> CreateGroups(SortedLocaleGrouping slg)
{
List<AlphaKeyGroup<T>> list = new List<AlphaKeyGroup<T>>();
foreach (string key in slg.GroupDisplayNames)
{
list.Add(new AlphaKeyGroup<T>(key));
}
return list;
}
/// <summary>
/// Create a list of AlphaGroup<T> with keys set by a SortedLocaleGrouping.
/// </summary>
/// <param name="items">The items to place in the groups.</param>
/// <param name="ci">The CultureInfo to group and sort by.</param>
/// <param name="getKey">A delegate to get the key from an item.</param>
/// <param name="sort">Will sort the data if true.</param>
/// <returns>An items source for a LongListSelector</returns>
public static List<AlphaKeyGroup<T>> CreateGroups(IEnumerable<T> items, CultureInfo ci, GetKeyDelegate getKey, bool sort)
{
SortedLocaleGrouping slg = new SortedLocaleGrouping(ci);
List<AlphaKeyGroup<T>> list = CreateGroups(slg);
foreach (T item in items)
{
int index = 0;
if (slg.SupportsPhonetics)
{
//check if your database has yomi string for item
//if it does not, then do you want to generate Yomi or ask the user for this item.
//index = slg.GetGroupIndex(getKey(Yomiof(item)));
}
else
{
index = slg.GetGroupIndex(getKey(item));
}
if (index >= 0 && index < list.Count)
{
list[index].Add(item);
}
}
if (sort)
{
foreach (AlphaKeyGroup<T> group in list)
{
group.Sort((c0, c1) => { return ci.CompareInfo.Compare(getKey(c0), getKey(c1)); });
}
}
return list;
}
}
Now in your MainPage, You simple add the following code and give the LongListSelector the itemsource.
The following code:
List<AlphaKeyGroup<Picture>> DataSource = AlphaKeyGroup<Picture>.CreateGroups(source,
System.Threading.Thread.CurrentThread.CurrentUICulture,
(Picture s) => { return s.Title; }, true);
longList.ItemsSource = DataSource;
The source is your List which you want to sort. Here Picture is the Model, you can specify your own Model name here. And the return value is the Field of your list according to which you want the sorting alphabetically do be done. Now your List should look like this:
![clip_image004[4]](https://msdntnarchive.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/35/09/metablogapi/0842.clip_image0044_7B0A0A41.png "clip_image004[4]")
![clip_image006[4]](https://msdntnarchive.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/01/35/09/metablogapi/6644.clip_image0064_5DD43C6A.png "clip_image006[4]")
You can download the Solution here: