ListView 将 ListViewHeaderItem 保持在顶部 [英] ListView Keep ListViewHeaderItem On Top

问题描述

我首先解释我想要实现的目标:

字母A"是我的 Listview 中的一个 ListViewHeaderItem.没有滚动列表的顶部是这样的.

在我滚动 ListViewHeaderItem 后，A"与其余项目一起向下移动 -但是我怎样才能实现标题作为第一个项目的种类保持在顶部，直到带有 ist 子项目的字母B"到来?我想要实现的行为的一个例子是微软为 Windows 10 提供的官方邮件"应用程序.它将日期时间保持在顶部，直到一天前写的电子邮件到来.

我不知道这个问题是否已经存在，但我不知道它是怎么称呼的，我不知道要谷歌什么.

解决方案

根据你的描述，我觉得你想要的是一个分组的ListView.这里的关键点是使用

有关详细信息，请参阅如何对项目进行分组GitHub 上的 ListView 和 GridView 示例.

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.

解决方案

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 将 ListViewHeaderItem 保持在顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！