Click here to Skip to main content
15,867,453 members
Articles / Desktop Programming / XAML
Tip/Trick

Grouped LongListSelector in Windows Phone 8 Silverlight

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
21 Dec 2014CPOL 6K   1  
This tip explains how to create LongListSelector with grouping in very simple and easy steps.

Introduction

LongListSelector in Windows Phone 8 is a very flexible control. You can use this control to implement Grouping of Items in the list.

Background

Let's say, we have some Categories and associated Sub-Categories as shown in emulator snapshot below:

Using the Code

XAML

Add DataContext to phone:PhoneApplicationPage, I have used MVVM Pattern.

XML
DataContext="{Binding CatSubCat, Source={StaticResource Locator}}"  

LongListSelector

XML
<phone:LongListSelector ItemsSource="{Binding Categories}"  
JumpListStyle="{StaticResource CategoryJumpListStyle}"  
Background="Transparent"  
GroupHeaderTemplate="{StaticResource CategoryHeaderTemplate}"  
ItemTemplate="{StaticResource SubCategoryItemTemplate}"  
LayoutMode="List"  
IsGroupingEnabled="true"  
HideEmptyGroups ="true"/>  

So we need CategoryJumpListStyle, CategoryHeaderTemplate, & SubCategoryItemTemplate

Add them in PhoneApplicationPage.Resources.

XML
<phone:PhoneApplicationPage.Resources></phone:PhoneApplicationPage.Resources>    

CategoryJumpListStyle

XML
<phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>    
        <phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>    
        <Style x:Key="CategoryJumpListStyle" TargetType="phone:LongListSelector">    
            <Setter Property="GridCellSize"  Value="220,150"/>    
            <Setter Property="LayoutMode" Value="Grid" />    
            <Setter Property="ItemTemplate">    
                <Setter.Value>    
                    <DataTemplate>    
                        <Border Background="{Binding Converter={StaticResource BackgroundConverter}}"  
                Height="150" Margin="10" >    
                            <TextBlock TextWrapping="Wrap" Text="{Binding CategoryName}" 
                FontFamily="{StaticResource PhoneFontFamilySemiBold}" 
                FontSize="20" Padding="6"     
               Foreground="{Binding Converter={StaticResource ForegroundConverter}}" 
                TextAlignment="Center" VerticalAlignment="Center"/>    
                        </Border>    
                    </DataTemplate>    
                </Setter.Value>    
            </Setter>    
        </Style>      

CategoryHeaderTemplate

XML
<DataTemplate x:Key="CategoryHeaderTemplate">  
            <Border Background="Transparent" Padding="5">  
                <Border Background="{StaticResource PhoneAccentBrush}" 
        BorderBrush="{StaticResource PhoneAccentBrush}" 
        BorderThickness="2" Width="400"   
         Height="62" Margin="0,0,18,0" 
         HorizontalAlignment="Left">  
                    <TextBlock Text="{Binding CategoryName}" 
            Foreground="{StaticResource PhoneForegroundBrush}" 
            FontSize="24" Padding="6"   
            FontFamily="{StaticResource PhoneFontFamilySemiLight}" 
            HorizontalAlignment="Left" VerticalAlignment="Center"/>  
                </Border>  
            </Border>  
        </DataTemplate>  

SubCategoryItemTemplate

XML
<DataTemplate x:Key="SubCategoryItemTemplate">  
           <StackPanel VerticalAlignment="Top">  
               <TextBlock FontWeight="Bold"  
               Text="{Binding SubCategoryName}" />  
  
           </StackPanel>  
       </DataTemplate>  

Code

LongListSelector for grouping needs object of type: List<List<T>>.

In our case, we use List<T> as:

C#
public class SubCategoryGroup : List<SubCategory>  
   {  
       public string CategoryName { get; set; }  
  
       public SubCategoryGroup(IEnumerable<SubCategory> subCategoryList,string Name)  
       {  
           this.CategoryName = Name;  
           this.AddRange(subCategoryList);  
       }  
   }    

And our View Model should return List<List<T>> (in our case List<SubCategoryGroup>) as:

C#
public class CatSubCatViewModel : ViewModelBase  
   {  
       IRepository db;  
       public List<SubCategoryGroup> Categories { get; set; }  
       public CatSubCatViewModel(IRepository _db)  
       {  
           db = _db;  
           Categories = new List<SubCategoryGroup>();  
  
           var allCategories = db.GetAllCategories();  
             
           var allSubCategories = db.GetAllSubCategories();  
  
           foreach (var categoryItem in allCategories)  
           {    
              Categories.Add(new SubCategoryGroup(allSubCategories.Where
        (p => p.CategoryId == categoryItem.CategoryId),categoryItem.CategoryName));  
           }  
       }          
   }    

Points of Interest

So we have used Categories Property to contain List<SubCategoryGroup> which we directly bind to our LongListSelector.

That’s all about the basics, you can customize it more as per your requirements. Hope the tip is helpful. Happy WP coding!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
India India
I am Sr. Software Engineer , currently working with a Indian Company in Noida.
I started my career with Samsung Electronics, SRI Noida and was in association for almost around 3 years.

I read, learn, blog, and enjoy technology and love to develop windows phone applications.

- DIVESH PAL

Comments and Discussions

 
-- There are no messages in this forum --