How to group using the long list selector in windows phone 7.1

Question

Requirement:-

Want to show the contact list with alphabets groups.

Using Long list selector displays the contacts list. In xaml, we mention the IsFlatList="false" in long list selector for grouping, but it displays the contacts list without groups like list box.

I herewith attached my code for your comments, please let me know where I did mistake in my code.

<phone:PhoneApplicationPage.Resources>
    <!--Heading for the items(a,b,c,d) -->
    <DataTemplate x:Key="GroupItemHeaderTemplate">
        <Border Background="Transparent" Padding="5">
            <Border Background="{StaticResource PhoneAccentBrush}" BorderBrush="{StaticResource PhoneAccentBrush}" BorderThickness="2" Width="480" Height="40" Margin="0,0,18,0" HorizontalAlignment="Left">
                <TextBlock Text="{Binding Key}" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="20" Padding="6" FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="left" VerticalAlignment="Center"/>
            </Border>
        </Border>
    </DataTemplate>

    <!-- Heading For the  list -->

    <DataTemplate x:Key="ListHeader">
        <Border Background="#FF049ED6" Height="40">
            <TextBlock Text= "{Binding Key}" />
        </Border>
    </DataTemplate>
    <!--Items to display-->

    <DataTemplate x:Key="ItemTemplate" >
        <StackPanel Orientation="Horizontal">
            <Image Source="{Binding ListImage}" Height="100" Width="100" Stretch="Uniform" Margin="10,2,0,0" ImageFailed="Image_ImageFailed" />
            <TextBlock Text="{Binding ListFullName}" Width="200" Foreground="Black" Margin="10,10,0,0" FontWeight="SemiBold" FontSize="22" />
            <TextBlock Text="{Binding ListBio}" FlowDirection="LeftToRight" Foreground="Black" Margin="-200,50,0,0" FontWeight="ExtraLight" FontSize="20" />
        </StackPanel>
    </DataTemplate>
    <!--Group Intems Panel to show when click on Items Header-->
     <ItemsPanelTemplate x:Key="GroupItemsPanel">
        <toolkit:WrapPanel ItemHeight="105" ItemWidth="105"></toolkit:WrapPanel>
     </ItemsPanelTemplate>
 </phone:PhoneApplicationPage.Resources>

<toolkit:LongListSelector x:Name="LongListSelectorListBox" ItemsSource="{Binding Content}" 
                          Margin="0,235,5,104" Width="480" Background="Transparent" IsFlatList="True" 
                          DisplayAllGroups="False" ItemTemplate="{StaticResource ItemTemplate}" 
                          GroupHeaderTemplate="{StaticResource GroupItemHeaderTemplate}" 
                          ListHeaderTemplate="{StaticResource ListHeader}" GroupItemsPanel="{StaticResource GroupItemsPanel}" 
                          SelectionChanged="LongListSelectorListBox_SelectionChanged" />

ViewModel:-

    ServiceModel sm = new ServiceModel();
    Content = new ObservableCollection<ListContactsModel>();
    Content1 = new ObservableCollection<ListContactsModel>();
    ServiceConstants.Temp_Response = x;//Save The response temp
    ObservableCollection<ListContactsModel> result = ListContactsModel.extract(x, sm, OutGoingInvitation);
    ObservableCollection<ListContactsModel> result1 = ListContactsModel.extract(x, sm, IncomeInvitation);
    AppGlobalConstants.Temp_Response = result;
    if (!((string.IsNullOrEmpty(sm.NetErrorCode)) && (string.IsNullOrEmpty(sm.ProvResErrCode))))
    {
        string errCode = !string.IsNullOrEmpty(sm.NetErrorCode) ? sm.NetErrorCode : sm.ProvResErrCode;
        string errDesc = !string.IsNullOrEmpty(sm.NetErrorDesc) ? sm.NetErrorDesc : sm.ProvResErrDesc;
        MessageBox.Show(errCode + "/" + errDesc);
    }else if (result.Count > 0)
    {
        Content.Clear();
        Content1.Clear();
        Content = result;//Outgoing Invitations
        Content1 = result1;//Incoming Invitations
        List<AlphaKeyGroup<ListContactsModel>> DataSource = AlphaKeyGroup<ListContactsModel>.CreateGroups(result,
                                  System.Threading.Thread.CurrentThread.CurrentUICulture,
                                  (ListContactsModel s) => { return s.ListFullName; },
                                  true);
        Console.WriteLine("Content.Count==>>" + Content.Count);
        Console.WriteLine("DataSource.ElementAt(1).Key==>>" + DataSource.ElementAt(1).Key);
        Console.WriteLine("DataSource.ElementAt(2).Key==>>" + DataSource.ElementAt(2).Key);

Regards, Naresh T

Answer 1

I don't see whole code and I don't know what is ListContactsModel. Is it a collection (inherits from IEnumerable/List/...)? Does it have Items propery? Does it have GetEnumerator methods?

As far as I understand AlphaKeyGroup class was taken from here ( if not, read it first ) http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj244365(v=vs.105).aspx

So maybe you want to bind LongListSelector to some property, that receive data from DataSource and has the same type List<_AlphaKeyGroup< ListContactsModel >_> (not to Content)?

Here is a couple of articles about LongListSelector:

• http://www.geekchamp.com/articles/wp7-longlistselector-in-depth--part1-visual-structure-and-api
• http://www.geekchamp.com/articles/wp7-longlistselector-in-depth--part2-data-binding-scenarios (this one will be great for you)

First of all, follow the instructions.

In general grouping in LLS means, that you have collection of items, that consist of Key/Title/Header/whatever and inner collection of group elements.