How to show a header for LongListSelector

Question

this is my lls:

 <phone:LongListSelector Name="lls" ItemsSource="{Binding Items}">
    <phone:LongListSelector.ListHeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Title}" Foreground="Red"  Margin="0,0,0,10"/>
        </DataTemplate>
    </phone:LongListSelector.ListHeaderTemplate>
    <phone:LongListSelector.ListFooterTemplate>
        <DataTemplate>
            <TextBlock Text="this is a footer"/>
        </DataTemplate>
    </phone:LongListSelector.ListFooterTemplate>
    <phone:LongListSelector.ItemTemplate>
        <DataTemplate>
            ...
        </DataTemplate>
    </phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>

and the ViewModel:

public class BookViewModel : INotifyPropertyChanged
{
    private string title;
    public string Title
    {
        get
        {
            return title;
        }
        set
        {
            if (value != title)
            {
                title = value;
                NotifyPropertyChanged("Title");
            }
        }
    }

    public ObservableCollection<AuthorViewModel> Items { get; set; }
}

in navigatedto I get and assign DataContext of page:

DataContext = book;

But the problem, nothing is shown as header in LongListSelector. just right after assigning DataContext I checked and Title has a value but nothing appears (items works fine and a list of items appears)

Why header is empty? thanks.

Answer 1

Use ListHeader instead of ListHeaderTemplate for binding:

<phone:LongListSelector.ListHeader>
    <TextBlock Text="{Binding Title}" Foreground="Red"  Margin="0,0,0,10"/>
</phone:LongListSelector.ListHeader>

Answer 2

LongListSelector control on Windows Phone 7 and How to display data in a grouped list in LongListSelector for Windows Phone 8 has good example about how to use longlist selector. this will really helps you.

Answer 3

Set ElementName for LongListSelector and Path for DataContext of your ListHeader.

<phone:LongListSelector.ListHeaderTemplate>
  <DataTemplate>
    <TextBlock Text="{ElementName=lls,
               Path=DataContext.Title}" Foreground="Red"  Margin="0,0,0,10"/>
  </DataTemplate>
</phone:LongListSelector.ListHeaderTemplate>