Group Listbox for Windows Phone 7?

Question

I'm looking for a way to group items similar to the way the applications below have it for there grouping. Is it possible to create a group listbox using View Models? I plan on having multiple customer groups for example:

"AAA" (Group) -- "XDN" (Contact)

"NCB" (Group) -- "XDN" (Contact)

etc... I don't want it to be seperated by letters but instead by group names. Is this possible?

Thanks.

Answer 1

Nothing prevents you from creating a custom ordered collection that suits that precise purpose. Here's the collection type I usually use for it, when integrating it with the LongListSelector in the Silverlight Toolkit

You'll obviously have to modify the GroupHeaderTemplate but that's very easy.

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;

namespace LongListSample
{
    public class LongListCollection<T, TKey> : ObservableCollection<LongListItem<T, TKey>>
        where T : IComparable<T>
    {
        public LongListCollection()
        {
        }

        public LongListCollection(IEnumerable<T> items, Func<T, TKey> keySelector)            
        {
            if (items == null)
                throw new ArgumentException("items");

            var groups = new Dictionary<TKey, LongListItem<T, TKey>>();

            foreach (var item in items.OrderBy(x => x))
            {
                var key = keySelector(item);

                if (groups.ContainsKey(key) == false)
                    groups.Add(key, new LongListItem<T, TKey>(key));

                groups[key].Add(item);
            }

            foreach (var value in groups.Values)
                this.Add(value);
        }
    }

    public class LongListItem<T, TKey> : ObservableCollection<T>
    {
        public LongListItem()
        {
        }

        public LongListItem(TKey key)
        {
            this.Key = key;
        }

        public TKey Key
        {
            get;
            set;
        }

        public bool HasItems
        {
            get
            {
                return Count > 0;
            }
        }
    }
}

Example of use: