ListView Keep ListViewHeaderItem On Top

Question

I start by explaining what I want to achieve:

The Letter "A" is one ListViewHeaderItem in my Listview. Without Scrolling the top of the List is looking like this.

After I am Scrolling the ListViewHeaderItem "A" is moving downwards with the rest of the items - but how can I achieve that the Header is staying on top as Kind of the first item until the Letter "B" with ist subitems is coming? An example of the behaviour I want to achieve is the official "Mail" app for Windows 10 by Microsoft. It is keeping the datetime at the top until emails are coming which have been written one day earlier.

I don't know if this question is already existing but I don't know how it is called and I don't know what to Google for.

See my comments on this question http://stackoverflow.com/questions/38513410/keep-headertemplate-visible-for-listview-in-uwp So basically until your header comes up, you will have the Header constant. Once your 'B; Comes up, update the header with B and When scrolled Down, Update with A. — AVK, Aug 11 '16 at 21:10
@AVKNaidu You are suggesting there to have the current Header out of the listview which is updating the values. That is in some cases fine but I want to achieve the original behaviour - it also has a cool annimation... — Matthias Herrmann, Aug 11 '16 at 21:15
Please, describe you situation and give an example in existing app. it's something like list of installed apps? — Andrii Krupka, Aug 11 '16 at 22:54

score 5 · Accepted Answer · answered Aug 12 '16 at 03:17

According to your description, I think what you want is a grouped ListView. The key points here is using CollectionViewSource as ItemsSource and setting GroupStyle to specify how groups are displayed. Following is a simple sample:

In XAML

<Page.Resources>
    <CollectionViewSource x:Name="groupInfoCVS" IsSourceGrouped="True" />
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView ItemsSource="{Binding Source={StaticResource groupInfoCVS}}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextBlock Margin="15" Text="{Binding Path=Text}" />
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Grid Background="LightGray">
                            <TextBlock Margin="10" Foreground="Black" Text="{Binding Key}" />
                        </Grid>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ListView.GroupStyle>
    </ListView>
</Grid>

And in code-behind

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();

        List<TestDemo> list = new List<TestDemo>();

        for (int i = 0; i < 6; i++)
        {
            list.Add(new TestDemo { Key = "A", Text = $"Test A {i}" });
            list.Add(new TestDemo { Key = "B", Text = $"Test B {i}" });
        }

        var result = from t in list group t by t.Key;
        groupInfoCVS.Source = result;
    }
}

public class TestDemo
{
    public string Key { get; set; }
    public string Text { get; set; }
}

And it looks like:

For more info, please see How to group items in a list or grid (XAML) and Simple ListView Sample in ListView and GridView sample on GitHub.

ListView Keep ListViewHeaderItem On Top

1 Answers1

Linked