Better alphabetic jumplist formatting

The following no doubt looks familiar to you. It shows the JumpList from the people hub. Recently I wanted to recreate this view in an app and was surprised at the lack of documentation available for recreating this view accurately.

Unfortunately the MSDN docs on creating a jumplist (from a LongListSelector) with alphabetic groupings leave something to be desired.

Here's what the formatting in the MSDN docs produce:

Admittedly I haven't done anything to improve the display of the names but hopefully you can see a lot of differences in the alignment, margins and spacing of the characters in the red boxes.

Unfortunately I've seen lots of apps which include something that looks like the above. I can't help but notice all the ways it varies from the native one. The lack of attention to detail it shows and the failure to craft something to be proud of is disappointing.

Here's my attempt:

As best as I can do it's pixel perfect ;) with the exception of the size of the globe icon which I've chosen not to resize and so left slightly larger than the native one. - It would be easy to make smaller if you wanted to though.

So how did I do it?

Firstly the formatting:

Also at https://gist.github.com/mrlacey/7779351

The picture converter is from MSDN and the JumpListItemBackgroundConverter is from the Toolkit.

Secondly a tweak to the CreateGroups method in the AlphaKeyGroup class:

    private static List<AlphaKeyGroup<PhoneContact>> CreateGroups(SortedLocaleGrouping slg)
    {
        var list = new List<AlphaKeyGroup<PhoneContact>>();
 
        foreach (string key in slg.GroupDisplayNames)
        {
            var k = key;
            if (key == "...")
            {
                k = "🌐";  // &#x1F310;
            }
 
            list.Add(new AlphaKeyGroup<PhoneContact>(k));
        }
 
        return list;
    }

If your browser has trouble rendering the globe character you may be able to see it better at https://gist.github.com/mrlacey/7779172

Let me know if you use this in your apps. :)

Buy me a coffee