在 FlipView 中显示绑定数据答案

【问题标题】：Displaying bound data in a FlipView在 FlipView 中显示绑定数据
【发布时间】：2020-09-15 16:33:37
【问题描述】：

我已经在 XAML 中声明了一个 FlipView 控件，我想将它绑定到在代码后面（.cs 文件）中定义和填充的集合源。此外，texblock 用于显示集合中某个项目的特定属性。

FlipView 的 XAML 声明：

        <FlipView x:Name="FlipViewStudents" Grid.Row="1" Height="Auto" Width="Auto" ItemsSource="{x:Bind Students}">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical">
                        <TextBlock x:Name="StudentName" Text="{Binding Name}" FontSize="60" Foreground="Green" FontWeight="Bold" TextAlignment="Left"/>
                    </StackPanel>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

集合变量的 C# 代码隐藏（属于此 XAML 文件的 .cs 文件）定义：

private List<SingleStudent> Students { get; set; }

更新： 我正在 Page_Loaded 事件处理程序中初始化集合变量：

Students = new List<SingleStudent>();

此外，我正在使用具有 30 秒滴答间隔的 DispatcherTimer，并且我在 dispatcherTimer_Tick（发生滴答时）处理程序中填充集合变量（先清除它之后）：

Students.Clear();
var singleStudent = new SingleStudent()
{
    Name = "John",
    Grade = "B" 
};    
Students.Add(singleStudent);

如图所示，collection 变量每 30 秒被清除和填充一次。我希望 GUI 中的 FlipView 能够在将项目添加到集合时自行更新。

我已经调试并检查了对象是否已在代码中添加到集合中，但它在 GUI 中没有出现任何内容。

如图所示，SingleStudent 是一个具有不同属性的类，包括 Name，它是在 FlipView 中显示的项目属性。

我也尝试过使用 ObservableCollection，但这也不会显示任何内容。感谢您的帮助或提示。

【问题讨论】：

您好，我测试了您的代码（使用 ObservableCollection），它运行良好。您能否提供将数据添加到集合中的代码，这可能是问题所在。
您是否尝试将数据模板的数据类型设置为 SingleStudent？这个数据模板是否适用于例如列表视图？
@RichardZhang-MSFT 我已经更新了帖子，说明了如何将数据添加到集合中。据我所知，在使用 ObservableCollection 时，不需要实现 INotifyPropertyChanged？
@Leander 我在你建议之后尝试了这个，还将 FlipView 更改为 ListView（但不存在数据类型）。但不幸的是同样的结果。
@Morten 我想我找到了你的问题。我会尽快发布答案。

标签： xaml uwp uwp-xaml flipview

【解决方案1】：

正如您所提到的，在使用 List<SingleStudent> 或 ObservableCollection<SingleStudent> 时使用 ListView 而不是翻转视图时，您也会看到同样的问题

我做了一些测试，结果证明在Page_Loaded 事件中初始化集合会弄乱您的数据绑定。因此你应该定义：

private ObservableCollection<SingleStudent> Students = new ObservableCollection<SingleStudent>();

或

private ObservableCollection<SingleStudent> Students { get; set; }
public TestPage() //Constructor of your page
{
    Students = new ObservableCollection<SingleStudent>();
}

此外，您看到我使用的是ObservableCollection<SingleStudent>。您必须使用它而不是列表。使用List<SingleStudent> 将不起作用，因为添加项目不会引发INotifyPropertyChanged，因此不会更新数据绑定。

【讨论】：