时间戳

首页 > 解决方案 > UWP ObservableCollection 通知 View 发生变化

mvvm - UWP ObservableCollection 通知 View 发生变化

问题描述

我想创建一个带有页面的 UWP 应用程序，该页面显示项目列表，这些项目列在 ObservableCollection 中。当我从列表中添加或删除一个项目时，它也应该从 GUI 的视图中添加或删除。或者当我更改项目的属性时，它也应该在 GUI 的视图中更改。我尝试了这个平台上另一个页面的代码，但它不起作用。

通知使用 ObservableCollection 作为 ItemsSource 的视图（ListView 或 TreeView）关于 ObservableCollection 中的更改（新项目、删除的项目、项目内的值已更改）需要什么？NotifiyPropertyChanged(<name of ObservableCollection>) 在这种情况下不起作用，但适用于简单的字符串成员。谁能给我一个来自模型、视图和视图模型的小型工作示例代码？

亲切的问候，沃尔夫冈

标签： mvvmuwpobservablecollection

解决方案

谁能给我一个来自模型、视图和视图模型的小型工作示例代码？

当然，请检查以下代码。并且可以在添加或删除项目时ObservableCollection通知 UI 更改。NotifiyPropertyChanged

public sealed partial class MainPage : Page
{

    private ObservableCollection<Book> Books { get; set; } = new ObservableCollection<Book>();
    public MainPage()
    {
        this.InitializeComponent();
        GetData();
    }

    private void GetData()
    {
        for (int i = 0; i < 25; i++)
        {
            var book = new Book { Name = $" Book{i}", Author = $"Author{i}" };
            Books.Add(book);

        }
        MyListView.ItemsSource = Books;
    }



    private int count;
    private void AddClick(object sender, RoutedEventArgs e)
    {

        count++;
        Books.Insert(0, new Book { Name = $"NewBook{count}", Author = $"NewAuthor{count}" });
    }

    private void DelClick(object sender, RoutedEventArgs e)
    {
        if (Books.Count != 0)
        {
            Books.RemoveAt(0);
        }


    }
}
public class Book
{
    public string Name { get; set; }
    public string Author { get; set; }
}

Xaml

<Page.BottomAppBar>
    <CommandBar>
        <AppBarButton
            Click="AddClick"
            Icon="Add"
            Label="Add"
            />
        <AppBarButton
            Click="DelClick"
            Icon="Delete"
            Label="Delete"
            />
    </CommandBar>
</Page.BottomAppBar>
<Grid>

    <ListView x:Name="MyListView">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Name}" />
                    <TextBlock Margin="23,0,0,0" Text="{Binding Author}" />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

推荐阅读