Microsoft Gulf Technical Community

The communication portal for the Gulf technical audience

Implementing LongListSelector as JumpLists in Windows Phone 8 : Alphabetical List

Implementing LongListSelector as JumpLists in Windows Phone 8 : Alphabetical List

Rate This
  • Comments 3

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.

Pic1

Pic2

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 = "http://hdwallsize.com/wp-content/uploads/2013/04/Download-Cool-Wallpaper-Cars-Background.jpg", Title= "AAA" });

Listpictures.Add(new Picture { imageUri = "http://t1.gstatic.com/images?q=tbn:ANd9GcRCQUNS-RkvNURbwfSroDcaMG4WvcjtE_rbeng0Y_mA-qN30B66" , Title="BBB"});

Listpictures.Add(new Picture { imageUri = "http://t3.gstatic.com/images?q=tbn:ANd9GcSjkQWG5hyjCZAa_ybl5UhWEyenQeF27rtWlbkxa8dr-wIugS3DGw", Title = "AAA" });

Listpictures.Add(new Picture { imageUri = "http://t3.gstatic.com/images?q=tbn:ANd9GcTEgitM85B6poINUE5QVySDTkO0QC855ciL0XFploQnY5EYMwXP", Title = "BBB" });

Listpictures.Add(new Picture { imageUri = "http://t1.gstatic.com/images?q=tbn:ANd9GcSi8sOLCm9l45caf9ySLm0oHODFPYYKgJObG6u92qS1fb6oYAzWcw" , Title="JJJ"});

Listpictures.Add(new Picture { imageUri = "http://t3.gstatic.com/images?q=tbn:ANd9GcSsDSYU1AyWP-loJtWfBAhK7uJHe3hFFC6N4-sA7ccGyURNALT8jA" , Title="LLL"});

Listpictures.Add(new Picture { imageUri = "http://t0.gstatic.com/images?q=tbn:ANd9GcTBNyAhcliKqcsttwCm3D4ajThDdo-qiR0wPkv8EihaP6WRGmtl" , Title="FFF"});

Listpictures.Add(new Picture { imageUri = "http://t1.gstatic.com/images?q=tbn:ANd9GcS5iilvZh0cSSivGM5GQA7yJpovFNPlEkaVRNQlTu8Ph0KJm0Vr" , Title="QQQ"});

Listpictures.Add(new Picture { imageUri = "http://www.jeffbullas.com/wp-content/uploads/2012/06/10-Cool-Google+-Brand-Covers.jpg", Title = "AAA" });

Listpictures.Add(new Picture { imageUri = "http://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]

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]clip_image006[4]

 

You can download the Solution here:

  • Hi I am packing an app that will contain a LongListSelector.  Is there a way for the user to add stuff to the list.  That would be helpful.

  • Without sounding negative i always think any MSDN related blog should have their code formatted correctly for ease of reading

  • Thank you so much!  I have tried several tutorials on this and they are all confusing.  You have laid it plain!!

Page 1 of 1 (3 items)
Leave a Comment
  • Please add 7 and 1 and type the answer here:
  • Post