Advertisemen

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:

 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

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

 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>