ListView 将 ListViewHeaderItem 保持在顶部

Question

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

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

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

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

Answer 1

根据你的描述，我认为你想要的是一个分组的ListView。 这里的关键点是使用CollectionViewSource作为ItemsSource并设置GroupStyle来指定组的显示方式。 下面是一个简单的示例：

在 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>

在代码隐藏中

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; }
}

它看起来像：

有关详细信息，请参阅如何在列表或网格 (XAML) 中对项目进行分组以及GitHub 上的ListView 和 GridView 示例中的简单 ListView 示例。