c# - 如何在我的场景中使用 MVVM 动态更新数据网格

Question

我正在练习 MVVM 应用程序，我是初学者，我想做的是，我在网格中有 3 行，第一行将包含 3 个标签和 3 个相应的按钮。第二行将包含一个按钮，用于保存在第一行的文本框中输入的数据。第三行将包含一个具有相同数量和类型的文本框(三个)的数据网格。

看这里可以看到http://prntscr.com/9v2336

用户将在第一行输入数据，然后在第二行按保存按钮，然后他必须在相应的数据网格列中找到写入的信息。

我的尝试在这里(完整代码):

查看:

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <TextBox Grid.Column="1" Grid.Row="0" Text="{Binding TextName}" Height="20" Width="80" HorizontalAlignment="Center"></TextBox>
            <TextBox Grid.Column="1" Grid.Row="1" Text="{Binding RollNumber}"  Height="20" Width="80"></TextBox>
            <TextBox Grid.Column="1" Grid.Row="2" Text="{Binding Class}" Height="20" Width="80"></TextBox>
            <Label Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">Name</Label>
            <Label Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">RollNumber</Label>
            <Label Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center">Class</Label>
        </Grid>
        <Grid Grid.Row="1" >
            <Button Width="80" Height="20" Command="{Binding saveStudentRecord}"> Save</Button>
        </Grid>
        <Grid Grid.Row="2">
            <DataGrid ItemsSource="{Binding DGrid}">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Name" Binding="{Binding dgName}" Width="150"></DataGridTextColumn>
                    <DataGridTextColumn Header="Rollnumber" Binding="{Binding dgRollnumber}" Width="150"></DataGridTextColumn>
                    <DataGridTextColumn Header="Class" Binding="{Binding dgClass}" Width="150"></DataGridTextColumn>
                </DataGrid.Columns>
            </DataGrid>
        </Grid>
    </Grid>
</Window>

型号:

 class Model
    {
        private string textName;
        public string TextName
        {
            get { return textName; }
        }

        private string rollNumber;
        public string RollNumber
        {
            get { return rollNumber; }
        }
        private string cclass;
        public string Class
        {
            get { return cclass; }
        }
    }

View 模型:

   class ViewModel
    {
        public bool canExecute { get; set; }
        private RelayCommand saveStudentRecord; 
        private ObservableCollection<Model> dGrid;
        public ViewModel()
        {

        }

        private void MyAction()
        {
           //What to do here to pass all that data to the datagrid corresponding columns
        }     
    }

我哪里有问题？我已经设计了整个主体，但我无法找到逻辑，即如何将文本框中输入的数据分配给按钮单击事件上相应的数据网格列并仅使用 MVVM 绑定(bind)它们。

Answer 1

向您的 ObservableCollection<Model> DGrid 添加一个新模型应该很简单:

 class ViewModel
    {
        public bool canExecute { get; set; }
        private RelayCommand saveStudentRecord; 
        private ObservableCollection<Model> dGrid;
        public ViewModel()
        {
            dGrid = new ObservableCollection<Model>();
        }

        private void MyAction()
        {
           dGrid.Add(new Model(){
               TextName = valueOfTextTextBox,
               RollNumber = valueOfRollNumberTextBox,
               Class = valueOfClassTextBox
           });
        }     
    }

这里要记住的事情:dGrid 应该是一个公共(public)属性，因此您可以对其使用数据绑定(bind)，例如:

public ObservableCollection<Model> dGrid {
    get;
    private set;
}

根据评论中的问题进行编辑:

您需要将 TextBoxes 的文本属性绑定(bind)到 ViewModel 的属性。由于 ModelClass 拥有此类信息，我会这样做:

 class ViewModel
    {
        public bool canExecute { get; set; }
        private RelayCommand saveStudentRecord; 
        private ObservableCollection<Model> dGrid;
        public ViewModel()
        {
            dGrid = new ObservableCollection<Model>();
        }

        public Model EditedModel {
            get {
                return _editedModel;
            }
            set {
                _editedModel = value;
                SignalPropertyChanged("EditedModel");
            }
        }

        private void MyAction()
        {
           dGrid.Add(EditedModel);
           EditedModel = new Model();
        }

        void SignalPropertyChanged(string propertyName){
            if(propertyChanged !=null){
                propertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }


    }

当然，现在您的 ViewModel 和 Model 需要实现 INotifyPropertyChanged 接口(interface)来通知 View 更改

class Model : INotifyPropertyChanged
{
    private string textName;
    public string TextName
    {
        get { return textName; }
        set { 
            textName = value; 
            SignalPropertyChanged("TextName");
         }
    }

    private string rollNumber;
    public string RollNumber
    {
        get { return rollNumber; }
        set { 
            rollNumber= value; 
            SignalPropertyChanged("RollNumber");
         }
    }
    private string cclass;
    public string Class
    {
        get { return cclass; }
        set { 
            cclass= value; 
            SignalPropertyChanged("Class");
         }
    }

    public event PropertyChangedEventHandler propertyChanged;
    void SignalPropertyChanged(string propertyName){
        if(propertyChanged !=null){
            propertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

EDIT2 - 忘记添加 XAML 部分 :) 您需要将文本框绑定(bind)到新属性

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <TextBox Grid.Column="1" Grid.Row="0" Text="{Binding EditedModel.TextName}" Height="20" Width="80" HorizontalAlignment="Center"></TextBox>
            <TextBox Grid.Column="1" Grid.Row="1" Text="{Binding EditedModel.RollNumber}"  Height="20" Width="80"></TextBox>
            <TextBox Grid.Column="1" Grid.Row="2" Text="{Binding EditedModel.Class}" Height="20" Width="80"></TextBox>
            <Label Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">Name</Label>
            <Label Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">RollNumber</Label>
            <Label Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center">Class</Label>
        </Grid>
        <Grid Grid.Row="1" >
            <Button Width="80" Height="20" Command="{Binding saveStudentRecord}"> Save</Button>
        </Grid>
        <Grid Grid.Row="2">
            <DataGrid ItemsSource="{Binding DGrid}">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Name" Binding="{Binding dgName}" Width="150"></DataGridTextColumn>
                    <DataGridTextColumn Header="Rollnumber" Binding="{Binding dgRollnumber}" Width="150"></DataGridTextColumn>
                    <DataGridTextColumn Header="Class" Binding="{Binding dgClass}" Width="150"></DataGridTextColumn>
                </DataGrid.Columns>
            </DataGrid>
        </Grid>
    </Grid>
</Window>