使用 INotifyPropertyChanged 将 gridview 的 itemSource 绑定到 ViewModel答案

【问题标题】：Binding a gridview's itemSource to the ViewModel with INotifyPropertyChanged使用 INotifyPropertyChanged 将 gridview 的 itemSource 绑定到 ViewModel
【发布时间】：2019-10-11 09:32:50
【问题描述】：

我希望我的 ViewModel 使用 Test() 函数遍历我的 gridView 的所有内部元素。由于某种原因，我的“gridVariable”（参见代码）返回 null。在获取和设置文本框的值时，我没有遇到任何问题。为什么 GridView 返回 null，我该如何解决？

MainViewModel.cs

    public class MainViewModel : Observable, INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public MainViewModel(){}

        private GetGridView _myGridView = new GetGridView();
        public GetGridView MyGridView
        {
            get { return _myGridView; }
        }

        public void Test()
        {
            var gridVariable = MyGridView.AnswersGrid;
            foreach (var i in gridVariable.Items) MyText.Text += "x";
        }

        private GetText _myText = new GetText();
        public GetText MyText
        {
            get { return _myText; }
            set
            {
                _myText = value;
            }
        }
    }

GetGridView.cs

    public class GetGridView : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private GridView _grid;
        public GridView AnswersGrid
        {
            get { return _grid; }
        }
    }

MainPage.xaml.cs

    public MainViewModel ViewModel { get; } = new MainViewModel();
    public MainPage()
    {
        InitializeComponent();
        this.DataContext = ViewModel;
    }

MainPage.xaml

    <RelativePanel>
        <GridView
            x:Name="GridView"
            ItemsSource="{Binding MyGridView.AnswersGrid, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}">
            <TextBox Text="{Binding MyText.Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"  />
            <TextBox/>
        </GridView>
        <Button RelativePanel.Below="GridView" Content="butn" Click="{x:Bind ViewModel.Test}"></Button>
    </RelativePanel>

【问题讨论】：

标签： c# mvvm uwp binding

【解决方案1】：

使用 INotifyPropertyChanged 将 gridview 的 itemSource 绑定到 ViewModel

我检查了你的要求，如果你想使用 MVVM 模式，你需要拆分 View 和 Model。我已经重写了你的代码。请检查以下内容。

视图模型

public class MainPageViewModel : INotifyPropertyChanged
{
    public MainPageViewModel()
    {
        items = new ObservableCollection<Item>();
        items.Add(new Item { Info = "01" });
        items.Add(new Item { Info = "02" });
        items.Add(new Item { Info = "03" });
        items.Add(new Item { Info = "04" });
        items.Add(new Item { Info = "05" });
    }
    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public ObservableCollection<Item> items;
    public void Test()
    {
        foreach (var item in items)
        {
            item.Info += "X";
        }
    }

}

public class Item : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    private string _info;
    public string Info
    {
        get
        {
            return _info;
        }
        set
        {
            _info = value;
            OnPropertyChanged();
        }
    }
}

用法

<GridView
    x:Name="GridView"
    ItemsSource="{x:Bind ViewModel.items}">
    <GridView.ItemTemplate>
        <DataTemplate>
            <TextBox Text="{Binding Info}"/>
        </DataTemplate>
    </GridView.ItemTemplate>

</GridView>
<Button RelativePanel.Below="GridView" Content="butn" Click="{x:Bind ViewModel.Test}"></Button>

更多详情请参考Data binding and MVVM

【讨论】：