如何使用 MVVM 模型在 wpf 数据网格中显示文本框数据？

Question

大家好，我的问题是我正在开发基于 MVVM 模式的 wpf c# 应用程序。我卡住的问题是我希望我的文本框数据通过单击按钮显示在我的数据网格中，但我无法做到最后寻求一些好的建议和解决方案。

我在 XAML 中的代码：

<Grid>

    <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
      <RowDefinition Height="*"/>
      <RowDefinition Height="*"/>
      <RowDefinition Height="*"/>
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="150"/>
      <ColumnDefinition Width="150"/>
      <ColumnDefinition Width="Auto"/>  
    </Grid.ColumnDefinitions>

    <Label 
        Grid.Row="0" 
        Grid.Column="0"
        VerticalAlignment="Center"
        Content="VLAN NAME"
        Foreground="Black"
        Opacity="0.8"
      />

    <TextBox 
        Grid.Row="0"
        Grid.Column="1"
        Margin="0,5,0,0"
        Height="25"
        Foreground="Black"
        Opacity="0.8"
        Width="Auto"
        Text="{Binding VlanName, UpdateSourceTrigger=PropertyChanged}"  
        />
    <Label 
        Grid.Row="1" 
        Grid.Column="0"
        VerticalAlignment="Center"
        Content="VLAN ID"
        Foreground="Black"
        Opacity="0.8"
        />
    <TextBox 
        Grid.Row="1"
        Grid.Column="1"
        Margin="0,5,0,0"
        Height="25"
        Foreground="Black"
        Opacity="0.8"
        Width="70"
        HorizontalAlignment="Left"
        Text="{Binding VlanID, UpdateSourceTrigger=PropertyChanged}"   
        />

    <Label 
        Grid.Row="2" 
        Grid.Column="0"
        VerticalAlignment="Center"
        Content="IP FOR VLAN"
        Foreground="Black"
        Opacity="0.8"
      />

    <Grid 
      Grid.Column="1"
      Grid.Row="2">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="40"/>
        <ColumnDefinition Width="40"/>
        <ColumnDefinition Width="40"/>
        <ColumnDefinition Width="40"/>

      </Grid.ColumnDefinitions>
    <TextBox  
       Grid.Row="2"
       Grid.Column="0"
        Margin="5"  
        VerticalAlignment="Center"
        MaxLength="3" 
        Width="30" 
        Foreground="Black"
        Opacity="0.8"
        Text="{Binding VlanIP1, UpdateSourceTrigger=PropertyChanged}"       
        />
      <TextBox  
       Grid.Row="2"
       Grid.Column="1"
        Margin="5"  
        VerticalAlignment="Center"
        MaxLength="3" 
        Width="30" 
        Foreground="Black"
        Opacity="0.8"
        Text="{Binding VlanIP2, UpdateSourceTrigger=PropertyChanged}"

        />
      <TextBox  
       Grid.Row="2"
       Grid.Column="2"
        Margin="5"  
        VerticalAlignment="Center"
        MaxLength="3" 
        Width="30" 
        Foreground="Black"
        Opacity="0.8"
        Text="{Binding VlanIP3, UpdateSourceTrigger=PropertyChanged}"

        />
      <TextBox  
       Grid.Row="2"
       Grid.Column="3"
        Margin="5"  
        VerticalAlignment="Center"
        MaxLength="3" 
        Width="30" 
        Foreground="Black"
        Opacity="0.8"
        Text="{Binding VlanIP4, UpdateSourceTrigger=PropertyChanged}"

        />
    </Grid>
    <Label 
        Grid.Row="3" 
        Grid.Column="0"
        VerticalAlignment="Center"
        Content="VLAN PORT"
        Foreground="Black"
        Opacity="0.8"
      />
    <ComboBox
            Grid.Row="3"
            Grid.Column="1"
            ItemsSource="{Binding AvailableVlanPorts}"
            SelectedItem="{Binding SelectedVlanPort}"
            >

    </ComboBox>

    <Button Grid.Column="3"
            Grid.Row="1"
            Content="Add VLAN"
            Margin="10,5,0,0"
            Style="{StaticResource AppButtons}"
            Command="{Binding AddVlan}" 
            Click="Add_Vlan"
            />      

    <Button Grid.Column="3" 
            Grid.Row="2"
            Content="Remove VLAN"
            Margin="10,5,0,0"
            Style="{StaticResource AppButtons}"
            Width="100"
            Command="{Binding RemoveVlan}"
            />

    <DataGrid Grid.Row="4"
              Grid.ColumnSpan="3"
              Height="200"
              Margin="10,10,0,0"
              Name="dg"
              ItemsSource="{Binding vlan}"
              AutoGenerateColumns="False"
              > 

      <DataGrid.Columns>
        <DataGridTextColumn Header="S.No"    Binding="{Binding Path=S_No}"/>
        <DataGridTextColumn Header="VLAN Name" Binding="{Binding Path=vname}"   />
        <DataGridTextColumn Header="VLAN ID"      Binding="{Binding Path=vid}" />
        <DataGridTextColumn Header="           IP" Width="100"/>
        <DataGridTextColumn Header="VLAN Ports" Width="100"/>
      </DataGrid.Columns>
    </DataGrid>
  </Grid>

C#代码是：

public string VlanName
    {
      get
      {
        return this.ConfigurationLibrary.ConfigLibraryVlanName;
      }
      set
      {
        if (String.Equals(this.ConfigurationLibrary.ConfigLibraryVlanName, value))
        {
          return;
        }
        this.ConfigurationLibrary.ConfigLibraryVlanName = value;
        this.OnPropertyChanged("VlanName");
      }
    }
  public string VlanID
    {
      get
      {
        return this.ConfigurationLibrary.ConfigLibraryVlanName;
      }
      set
      {
        if (String.Equals(this.ConfigurationLibrary.ConfigLibraryVlanName, value))
        {
          return;
        }
        this.ConfigurationLibrary.ConfigLibraryVlanName = value;
        this.OnPropertyChanged("VlanID");
      }
    }
  public ICommand AddVlan
    {
      get
      {
        if (_addVlan == null)
          _addVlan = new RelayCommand(() => this.AddVlans());

        return _addVlan;
      }

    }
  void AddVlans()
    {
      Console.Write("Add vlan");
      var serial = new VLANSPropertyClass();
      serial.S_No = vlan.Count + 1;
      serial.vname = VlanName;
      serial.vid = VlanID;
      vlan.Add(serial);
    }

首先，我只显示两列进行测试。 任何帮助都将不胜感激。

Answer 1

为了做你想做的事，DataGrid 应该绑定到你存储所有项目的集合（例如 ObservableCollection），当你点击“添加”按钮时，你调用Entities.Add(NewEntity);，其中@987654325 @ 是集合，NewEntity 是视图模型的属性。您将文本框绑定到NewEntity 的属性。我做了一个小要点here 来演示。