ListView 将 ListViewHeaderItem 保持在顶部答案

【问题标题】：ListView Keep ListViewHeaderItem On TopListView 将 ListViewHeaderItem 保持在顶部
【发布时间】：2016-12-18 18:10:05
【问题描述】：

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

字母“A”是我的 Listview 中的一个 ListViewHeaderItem。不滚动列表的顶部看起来像这样。

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

我不知道这个问题是否已经存在，但我不知道它是如何被调用的，我不知道谷歌是为了什么。

【问题讨论】：

在这个问题上查看我的 cmets stackoverflow.com/questions/38513410/… 所以基本上在你的标题出现之前，你将拥有 Header 常量。一旦你的'B;出现，用 B 更新标题，向下滚动时，用 A 更新。
@AVKNaidu 您建议将当前 Header 从更新值的列表视图中取出。这在某些情况下很好，但我想实现原始行为 - 它也有一个很酷的动画......
请描述您的情况并在现有应用程序中举例说明。类似于已安装应用的列表？

标签： c# xaml listview header uwp

【解决方案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; }
}

它看起来像：

有关详细信息，请参阅 GitHub 上 ListView and GridView sample 中的 How to group items in a list or grid (XAML) 和 简单 ListView 示例。

【讨论】：