WindowsPhone 8 LongListSelector: Scrollable List Items With Fixed Header's(C#-XAML)

Introduction:

Its very interesting requirement is "Making Fixed header visibility until its items scrollable and it will be stick to top when another header items touch and scroll top up. Because from the user perspective it is best practices for showing header until its items scrollable and it make-sense good thought.

Note: Before this sample Please read about LongListSelector  

SourceFile:FixedListHeaderWP8Sample

Requirements:

To begin using LongListSelector first  add a reference to  the Microsoft.Phone.Controls.Toolkit.dll  assembly which is installed with the toolkit and

You will also need to add the "phone" prefix declaration. Make sure that your page declaration includes the "phone" namespace:

C#

 xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

 The sample code should look like:

XAML

 <phone:LongListSelector Grid.Row="2" BorderThickness="2" BorderBrush="Blue" 
                                        ItemsSource="{Binding GroupedItems}" 
                                        ItemTemplate="{StaticResource ItemTemplate}"                      
                                        GroupHeaderTemplate="{StaticResource GroupHeader}" 
                                        JumpListStyle="{StaticResource JumpListStyle}"  
                                        IsGroupingEnabled="True" 
                                        LayoutMode="List"  
                                        GridCellSize="108,108"/>

 Note:This sample is targeted on windows phone 8 os. So that this downloaded sample is not working with below versions

Description:

Lets start to understand this requirement

Sticky headers:

The native Windows Phone grouped list has the headers stick to the top as you scroll. The LongListSelector control in Windows Phone 8 has the same smooth effect.

Note the headers in the following screenshots.

Figure 1 - Notice group header "a"  

Figure 2 - Scrolling up, notice how "a" sticks to top  

Figure 3 - Notice how the group header "b" pushes "a" 

So that LongListSelector control is best fit for our requirement .Lets start now with few steps

The sample follows MVVM design pattern

• Model - DataItem.cs
• ViewModel - DataItemsViewModel.cs
• Services - DataService.cs
• View - MainPage.xaml - Thing to note here is how JumpListStyle Property is being used to modify the look and feel of the JumpList. LayoutMode of JumpListStyle - List and LayoutMode of LongListSelector - Grid
• Helpers - KeyedList.cs - This class highlights how to prepare your grouped data in a data structure(IList of IList) bindable with LongListSelector.ItemsSource

The helper class - KeyedList.cs 

C#

public class KeyedList<TKey, TItem> : List<TItem> 
    { 
        public TKey Key { protected set; get; } 
 
        public KeyedList(TKey key, IEnumerable<TItem> items) 
            : base(items) 
        { 
            Key = key; 
        } 
 
        public KeyedList(IGrouping<TKey, TItem> grouping) 
            : base(grouping) 
        { 
            Key = grouping.Key; 
        } 
    }

GroupedItems property on the DataItemsViewModel

C#

 public class DataItemsViewModel 
    { 
        public List<KeyedList<string, DataItem>> GroupedItems 
        { 
            get 
            { 
                var ItemsList = DataService.GetItems(); 
 
                var GroupedItems = 
                    from data in ItemsList 
                    orderby data.TimeStamp 
                    group data by data.TimeStamp.ToString("y") into ItemsByMonth 
                    select new KeyedList<string, DataItem>(ItemsByMonth); 
 
                return new List<KeyedList<string, DataItem>>(GroupedItems); 
            } 
        } 
    }

 MainPage.xaml - LongListSelector's ItemsSource property binding

XAML

<phone:LongListSelector Name="PhotoHubLLS" Margin="13,-30,0,0" 
                                        ItemsSource="{Binding GroupedPhotos}" 
                                        ItemTemplate="{StaticResource ItemTemplate}"                      
                                        GroupHeaderTemplate="{StaticResource GroupHeader}" 
                                        JumpListStyle="{StaticResource JumpListStyle}"  
                                        IsGroupingEnabled="True" 
                                        LayoutMode="Grid"  
                                        GridCellSize="108,108"/>

JumpListStyle property along with the background converters from the platform to enable/disable groupheaders with items or not

XAML

  <phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/> 
        <phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/> 
 
        <Style x:Key="JumpListStyle" TargetType="phone:LongListSelector"> 
            <Setter Property="LayoutMode" Value="List" /> 
            <Setter Property="Margin" Value="12,12,0,0"/> 
            <Setter Property="ItemTemplate"> 
                <Setter.Value> 
                    <DataTemplate> 
                        <Border Background= 
                                "{Binding Converter={StaticResource BackgroundConverter}}"  
                                Width="470"  
                                Height="70"  
                                Margin="6"> 
                            <TextBlock Text="{Binding Key}" 
                                       Foreground= 
                                       "{Binding Converter={StaticResource ForegroundConverter}}"                                        
                                       FontFamily="{StaticResource PhoneFontFamilySemiBold}" 
                                       FontSize="28"   
                                       Padding="2" 
                                       VerticalAlignment="Bottom"/> 
                        </Border> 
                    </DataTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style>

ScreenShot

Note: Please share your thoughts,what you think about this post,Is this post really helpful for you?otherwise it would be very happy ,if you have any thoughts for to implement this requirement in any another way?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)