如何使用wpf中的文本框綁定數據網格行mvvm

Question

我有一個包含一些產品詳細信息的DataGrid，當我雙擊數據網格中的特定產品時，需要將產品詳細信息加載到一些文本框中。

在此先感謝。

Answer 1

歡迎來到StackOverflow！通常人們不會在沒有以下的情況下回答問題。

• 您正在嘗試做什麼的清晰摘要。
• 所有相關的代碼
• 任何異常，您遇到
• 所有你爲了使用的研究鏈接來獲得你在哪裏

不過，我會給你的演示你在問什麼。

這裏是XAML

<Window x:Class="datagriddemo.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:ViewModel="clr-namespace:datagriddemo" 
     Title="MainWindow" Height="350" Width="420" Background="Gray"> 

    <!--This is where we define the resource that the XAML here is going to 
    use. As you can see, I am importing our view model--> 
    <Window.Resources> 
     <ViewModel:ProductGridViewModel x:Key="ProductViewModel"/> 
    </Window.Resources> 


    <!--This is the main layout of the XAML. In the Grid below, 
    I set the "DataContext" to our static resource we just defined above. 
    What this does is tell everyone inside this grid, "If you don't define 
    your own data context, you're going to use mine" Because of this, all 
    of the elements inside this grid will have access to the public properties 
    of the ViewModel--> 
    <Grid DataContext="{StaticResource ResourceKey=ProductViewModel}"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="300"/> 
      <ColumnDefinition Width="100"/> 
     </Grid.ColumnDefinitions> 

     <!-- This is the datagrid that we are displaying. The two important things 
     to note here are "ItemsSource" and "SelectedItem". "ItemsSource" is the collection 
     that we want to display in our grid. This is where are product models are stored. 
     SelectedProduct is going to be where the selected grid row is stored so we can 
     access its data with the text boxes defined below. --> 
     <DataGrid 
      Width="500" 
      Grid.Column="0" 
      AutoGenerateColumns="False"       
      ItemsSource="{Binding Products}" 
      SelectedItem="{Binding SelectedProduct, Mode=TwoWay}"> 
      <DataGrid.Columns> 
       <DataGridTextColumn IsReadOnly="True" Header="Product ID" Binding="{Binding ProductID, UpdateSourceTrigger=PropertyChanged}" /> 
       <DataGridTextColumn IsReadOnly="True" Header="Product Name" Binding="{Binding ProductName, UpdateSourceTrigger=PropertyChanged}" /> 
       <DataGridTextColumn IsReadOnly="True" Header="Total Sold" Binding="{Binding TotalSold, UpdateSourceTrigger=PropertyChanged}" /> 
      </DataGrid.Columns> 
     </DataGrid> 

     <!-- This stack panel contains the text boxes we are going to use to edit our data. Notice that the 
     bindings point to SelectedProduct.Property. This is because we are accessing properties inside of 
     the SelectedProduct property in our ViewModel. When we edit these text boxes the data in the grid 
     will automatically change. --> 
     <StackPanel Height="100" Background="Wheat" Margin="10" Orientation="Vertical" Grid.Column="1"> 
      <TextBlock FontWeight="Bold" Width="100" TextWrapping="Wrap">Update your product info!</TextBlock> 
      <TextBox Width="100" Text="{Binding SelectedProduct.ProductName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" /> 
      <TextBox Width="100" Text="{Binding SelectedProduct.TotalSold, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" /> 
     </StackPanel> 
    </Grid> 
</Window> 

接下來是我們的視圖模型。如果視圖是蛋糕上的糖霜，那麼你可以將視圖模型看作布丁周圍的蛋糕。你的視圖模型是你的邏輯生活的地方。它會做排序，處理和其他東西。

using System; 
using System.Collections.Generic; 
using System.Collections.ObjectModel; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 

namespace datagriddemo 
{ 
    public class ProductGridViewModel 
    { 
     private ProductModel _SelectedProduct; 
     private ObservableCollection<ProductModel> _Products; 


     /// <summary> 
     /// Notice that though this updates the grid as you 
     /// add or remove elements, it doesn't call onproperty 
     /// changed in the setter... Magic? Nope, Observable 
     /// collections call OnPropertyChanged for you. 
     /// 
     /// Caveat: They will NOT call on property changed 
     /// for you if you do Products = new ObservableCollection... 
     /// Only when you do Products.Add(yourProduct)... 
     /// </summary> 
     public ObservableCollection<ProductModel> Products 
     { 
      get { return _Products; } 
      set { _Products = value; } 
     } 



     /// <summary> 
     /// This is the selected row in the grid. It automatically changes 
     /// when you select new rows because we set the grid SelectedItem property 
     /// to Mode=TwoWay 
     /// </summary> 
     public ProductModel SelectedProduct 
     { 
      get { return _SelectedProduct; } 
      set { _SelectedProduct = value; } 
     } 


     /// <summary> 
     /// View Models constructor. It get's called automatically when the view 
     /// is initialized because we declared it as a static resource in the XAML. 
     /// </summary> 
     public ProductGridViewModel() 
     { 
      //DONT FORGET TO NEW UP YOUR OBSERVABLE COLLECTIONS!! 
      Products = new ObservableCollection<ProductModel>(); 

      //Don't forget to generate the data! 
      GenerateProducts(); 
     } 

     /// <summary> 
     /// Use this method to generate dummy data 
     /// </summary> 
     private void GenerateProducts() 
     { 
      for (int x = 0; x < 100; x++) 
      { 

       this.Products.Add(new ProductModel(x,"Product #"+x,x+50)); 
      } 
     } 

    } 
} 

最後是你的模型。這是你的實際數據。這是，這是你的布丁。

using System; 
using System.Collections.Generic; 
using System.ComponentModel; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 

namespace datagriddemo 
{ 
    public class ProductModel : INotifyPropertyChanged 
    { 
     private Int32 _ProductID; 
     private String _ProductName; 
     private Int32 _TotalSold; 


     /// <summary> 
     /// Note for the properties below: 
     /// Notice that first, the property names match those bound in the XAML 
     /// This is all part of the grand scheme. 
     /// 
     /// When the OnProperty changed is called, the UI knows to go search for 
     /// those properties. It's important that these all have the correct spelling 
     /// and casing. 
     /// </summary> 

     public Int32 TotalSold 
     { 
      get { return _TotalSold; } 
      set 
      { 
       _TotalSold = value; 
       OnPropertyChanged("TotalSold"); 
      } 
     } 


     public String ProductName 
     { 
      get { return _ProductName; } 
      set 
      { 
       _ProductName = value; 
       OnPropertyChanged("ProductName"); 
      } 
     } 


     public Int32 ProductID 
     { 
      get { return _ProductID; } 
      set 
      { 
       _ProductID = value; 
       OnPropertyChanged("ProductID"); 
      } 
     } 


     /// <summary> 
     /// Just a normal constructor to load up our properties. 
     /// </summary> 
     /// <param name="productID"></param> 
     /// <param name="productName"></param> 
     /// <param name="totalSold"></param> 
     public ProductModel(Int32 productID, String productName, Int32 totalSold) 
     { 
      this.ProductID = productID; 
      this.ProductName = productName; 
      this.TotalSold = totalSold; 
     } 

     /// <summary> 
     /// This is for updating the UI 
     /// </summary> 
     public event PropertyChangedEventHandler PropertyChanged; 

     /// <summary> 
     /// When a property changes in this object, if you want it reflected on the 
     /// UI you need to call this function 
     /// </summary> 
     /// <param name="propertyName"></param> 
     public void OnPropertyChanged(String propertyName) 
     { 
      PropertyChangedEventHandler handler = PropertyChanged; 

      if (handler != null) 
      { 
       this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
      } 
     } 
    } 
} 

最後這裏是預期的結果

在我們看到我們的電網滿載着它的新數據這首圖像

如果你點擊一排，你會看到它的數據填充側面的兩個文本框。

最後，如果您更改文本框中的數據，你會看到它在網格立即更新。

就是這樣！一個完整的MVVM數據網格到文本框和後臺解決方案。希望這可以幫助。請記住我對你所期望的作爲問題提問者的看法，並且玩得開心！歡迎來到WPF和MVVM。