如何将数据从 XAML 添加到 listView 并绑定到我的 ViewModel答案

【问题标题】：How to add data to a listView from XAML with databinding to my ViewModel如何将数据从 XAML 添加到 listView 并绑定到我的 ViewModel
【发布时间】：2013-02-24 10:07:42
【问题描述】：

我对 XAML 和 Windows 8 应用程序编程和整体编程相当陌生。这几天我一直在尝试。我有一个名为 PeopleConnector 的 ViewModel，其中包含一个可观察的人集合我已将 XAML 页面的 DataContext 设置为我的 ViewModel。现在我希望能够在我的视图中创建一个新的人，输入来自文本框，并通过两种方式数据绑定将其显示在我的列表中。这样做的正确方法是什么。我可以在我的 XAML 页面后面的代码中完成这项工作，但是我正在跳过我的 viewModel。这可以通过我的 ViewModel 实现吗？

代码

Person类是一个简单的Poco类，继承了BindableBase

我的 ViewModel（人员连接器）

class PeopleConnector : BindableBase
{

    private ObservableCollection<Person> _people;
    public ObservableCollection<Person> People
    {
        get { return _people; }
        set { _people = value; OnPropertyChanged(); }
    }

    public PeopleConnector()
    {
        People = new ObservableCollection<Person>();
        People.Add(new Person { Name = "Iris", About = "Developer that loves Metro style" });
        People.Add(new Person { Name = "Paul", About = "DBA with a thing for SQL Server 2012" });

    }

    public Person NewPerson { get; set; }

    public void AddNewPerson()
    {
        People.Add(new Person { Name = NewPerson.Name, About = NewPerson.About });
    }

}

我的视图（XAML 页面）

    <Page.DataContext>
    <local:PeopleConnector/>
</Page.DataContext>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" >
    <StackPanel Orientation="Horizontal" >
        <ListView x:Name="AllItemsView" 
                  Width="200" 
                  Margin="40,20,0,0" 
                  Height="400" 
                  VerticalAlignment="Top" 
                  Background="DarkGray"
                  ItemsSource="{Binding People}">             
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Name}"></TextBlock>
                        <TextBlock TextWrapping="Wrap"  Text="{Binding Path=About}"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <StackPanel Width="200" Margin="20,50,0,0" Height="200" VerticalAlignment="Top">
            <TextBlock>Name</TextBlock>
            <TextBox Text="{Binding NewPerson.Name, Mode=TwoWay}"></TextBox>
            <TextBlock>About</TextBlock>
            <TextBox Text="{Binding NewPerson.About, Mode=TwoWay}"></TextBox>
            <Button VerticalAlignment="Top" Margin="30" Width="130" Click="Button_Click_1">Add</Button>
        </StackPanel>
    </StackPanel>
</Grid>

【问题讨论】：

标签： c# wpf xaml microsoft-metro

【解决方案1】：

这里有一些问题：

首先，您没有初始化NewPerson。在您的 PeopleConnector 构造函数中，您需要初始化 NewPerson。

接下来，您无法告诉 ViewModel 您单击了按钮。通常，您可以通过将 ViewModel 上的 ICommand 实例绑定到您的 View 来执行此操作（请参阅 DelegateCommand 以了解可能的实现）。所以你的按钮会变成这样：

<Button VerticalAlignment="Top" Margin="30" Width="130" Command={Binding Path=AddPersonCommand}>Add</Button>

您的 ViewModel 构造函数看起来像这样：

public PeopleConnector()
{
    People = new ObservableCollection<Person>();
    People.Add(new Person { Name = "Iris", About = "Developer that loves Metro style" });
    People.Add(new Person { Name = "Paul", About = "DBA with a thing for SQL Server 2012" });
    NewPerson = new Person();
    _addPersonCommand = new DelegateCommand(AddNewPerson);
}

private readonly DelegateCommand _addPersonCommand;
public ICommand AddPersonCommand
{
    get { return _addPersonCommand; }
}

【讨论】：