wpf mvvm 绑定视图到模型答案

【问题标题】：wpf mvvm bound view to modelwpf mvvm 绑定视图到模型
【发布时间】：2011-10-07 00:47:29
【问题描述】：

我正在尝试使用 MVVM。我创建了一个具有 3 个属性（ModelClass）的模型，在我的视图模型中，我有一个可观察的 ModelClasses 集合。在视图中，我将一个列表绑定到我的 VM 中的可观察集合。该列表是 3 个文本框的模板。

如何将文本框绑定到模型中的特定属性？

假设模型类名为 Person 并具有姓名、年龄和国家作为属性，视图模型具有人员集合，视图具有绑定到人员列表 (itemssource..) 的列表。我不知道如何在列表中创建一个与人物模型的姓名、年龄和国家/地区绑定的文本框。

【问题讨论】：

请阅读手册。 Data Binding, Data Templating

标签： wpf data-binding mvvm view model

【解决方案1】：

根据您的查询，我构建了示例应用程序，它非常适合我。详细信息如下。

PersonViewModel.cs

  internal class PersonViewModel{

    public ObservableCollection<PersonModel> PersonCollection { get; set; }

    public PersonViewModel()
    {
        //This data will load as the default person from the model attached to the view
        PersonCollection = new ObservableCollection<PersonModel>();
        PersonCollection.Add(new PersonModel { Name = "John", Age= 24, Country = "Canada"});
        PersonCollection.Add(new PersonModel { Name = "David", Age = 25, Country = "United States"});
        PersonCollection.Add(new PersonModel { Name = "Prajin", Age = 28, Country = "Japan"});
    }
}

PersonView.xaml

<Window x:Class="MVVM.PersonView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MVVM Demostration" Height="297" Width="480"
    xmlns:local="clr-namespace:MVVM.ViewModel">
<Window.DataContext>
    <local:PersonViewModel />
</Window.DataContext>

<Grid Margin="10">
    <ListBox ItemsSource="{Binding PersonCollection}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding Path=Name}" Margin="5" Grid.Column="0" FontSize="14" />                        
                    <TextBlock Text="{Binding Path=Age}" Margin="5" Grid.Column="1" FontSize="14" />
                    <TextBlock Text="{Binding Path=Country}" Margin="5" Grid.Column="2" FontSize="14"/>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

Person.cs

 internal class PersonModel : System.ComponentModel.INotifyPropertyChanged
{
    private string name;
    public string Name
    {
        get { return name; }
        set
        {
            name = value;
            OnPropertyChanged("Name");
        }
    }

    private int age;
    public int Age
    {
        get { return age; }
        set
        {
            age = value;
            OnPropertyChanged("Age");
        }
    }

    private string country;
    public string Country
    {
        get { return country; }
        set
        {
            country = value;
            OnPropertyChanged("Country");
        }
    }

    #region INotifyPropertyChanged Members

    public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
    }

    #endregion
}

【讨论】：

【解决方案2】：

创建一个 ListBox 并将您的对象集合绑定到它的 ItemsSource。这里，Persons 是来自您的 ViewModel 的集合。

<ListBox ItemsSource="{Binding Persons}" />

然后为您的对象类型创建一个 DataTemplate。

<DataTemplate DataType="{x:Type local:Person} >
    <TextBox Text="{Binding Name}"/>
    <TextBox Text="{Binding Age}"/>
    etc...
</DataTemplate>

其中“local”是包含 Person 类型的命名空间的 xml 命名空间别名。

将此 DataTemplate 放入窗口的资源 (Window.Resources)。

【讨论】：

【解决方案3】：

您需要更改列表的ItemTemplate 以绑定属性：

<ListView ItemsSource="{Binding PersonsList}" > 
    <ListView.ItemTemplate> 
        <DataTemplate> 
           <StackPanel Orientation="Horizontal"> 
                  <TextBlock Text="{Binding Path=Name}" VerticalAlignment="Center" FontSize="14" /> 
                  <TextBlock Text="{Binding Path=Age}" VerticalAlignment="Center" FontSize="14" /> 
           </StackPanel> 
        </DataTemplate> 
     </ListView.ItemTemplate> 
  </ListView>

【讨论】：