How to use wp7 LongListSelector with Blend Sample Data

In my previous post, How to use Blend sample data with a LongListSelector, I described a a step by step approach to allow Blend sample data to be used with the Wp8 LongListSelector. It makes development a lot easier. However, recently I’ve seen people struggling with the Windows Phone 7 toolikit version and so I thought I’d create this little amendment to support wp7.

1. Follow the wp8 guide from the link above, it won’t compile but don’t worry we’ll correct it
2. Replace the magic alpha key class with the following (it has some room for improvement, I’ll get to that later);

    
   
   using System.Collections.Generic;
   using System.Globalization;
   
   namespace LLSSample
   {
       public class AlphaKeyGroup<T> : List<T>
       {
           static string SortedLocalGrouping = "#abcdefghijklmnopqrstuvwxyz";
           /// <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;  set; }
   
           
           /// <summary>
           /// Public constructor.
           /// </summary>
           /// <param name="key">The key for this group.</param>
           public AlphaKeyGroup(string key)
           {
               Key = key;
           }
   
           public override string ToString()
           {
               return 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(string nameList)
           {
               List<AlphaKeyGroup<T>> list = new List<AlphaKeyGroup<T>>();
   
               foreach (char key in nameList.ToCharArray() )
               {
                   list.Add(new AlphaKeyGroup<T>((key.ToString())));
               }
   
               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)
           {
   
               List<AlphaKeyGroup<T>> list = CreateGroups(SortedLocalGrouping);
   
               foreach (T item in items)
               {
                   int index = 0;
                   
                   {
                       string label = getKey(item);
                       index = SortedLocalGrouping.IndexOf(label[0].ToString().ToLower());
                   }
                   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;
           }
   
       }
   }
   

3. That’s enough, you can carry on following your favourite wp7 LLS tutorial. However, I’ve included the XAML from my sample too;

    
       <phone:PhoneApplicationPage.Resources>
           <DataTemplate x:Key="AddrBookItemTemplate">
               <StackPanel VerticalAlignment="Top">
                   <TextBlock FontWeight="Bold"  Text="{Binding FirstName}" />
                   <TextBlock Text="{Binding LastName}" />
                   <TextBlock Text="{Binding Address}" />
                   <TextBlock Text="{Binding Phone}" />
               </StackPanel>
           </DataTemplate>
           <DataTemplate x:Key="AddrBookGroupHeaderTemplate">
               <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>
           <DataTemplate x:Key="GroupItemsTemplateWp7">
               <Border Background="{StaticResource PhoneAccentBrush}" Margin="{StaticResource PhoneTouchTargetOverhang}" Padding="{StaticResource PhoneTouchTargetOverhang}">
                   <TextBlock Text="{Binding Key}" Style="{StaticResource PhoneTextLargeStyle}"/>
               </Border>
           </DataTemplate>
           <ItemsPanelTemplate x:Key="GroupItemsPanelTemplate">
                       <toolkit:WrapPanel Orientation="Horizontal"/>   
           </ItemsPanelTemplate>
       </phone:PhoneApplicationPage.Resources>
   

    
   <toolkit:LongListSelector
                     x:Name="AddrBook"
                     IsFlatList="False"
                     DisplayAllGroups="True"
                     DataContext="{Binding Source={StaticResource LongListSelectorData}}"
                     ItemsSource="{Binding DataSource}"
                     Background="Transparent"
                     GroupHeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
                     ItemTemplate="{StaticResource AddrBookItemTemplate}" GroupItemTemplate="{StaticResource GroupItemsTemplateWp7}" GroupItemsPanel="{StaticResource GroupItemsPanelTemplate}"
                     />
   
   

4. Enjoy design time editing in wp7 too :)

Ah, about the differences. The original alpha key class uses some nice localisation tricks that provides the jump list and group headers to be correctly grouped depending upon the users culture. This version is stuck with a hard-coded English character set. I’ve left the skeleton of the code the same as the wp8 version so you can implement your own localisation routines. If I have time I’ll publish that a later date. Hopefully there should be enough there to help you get on.