如何使用MVVM模型在wpf datagrid中显示文本框数据?

时间:2014-05-09 10:51:50

标签: c# wpf mvvm datagrid

大家好我的问题是我正在研究基于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);
    }

首先,我只显示两列进行测试。 任何帮助都会非常明显。

1 个答案:

答案 0 :(得分:1)

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