c# - 如何将数据从 XAML 添加到 listView，并将数据绑定(bind)到我的 ViewModel

Question

我对 XAML 和 Windows 8 应用程序编程和整体编程还很陌生。我已经尝试了好几天了。我有一个名为 PeopleConnector 的 ViewModel，它包含一个可观察的人员集合我将我的 XAML 页面的 DataContext 设置为我的 ViewModel。现在我希望能够在我的 View 中创建一个新的 Person，使用来自文本框的输入，并使用两种方式的数据绑定(bind)将其显示在我的列表中。执行此操作的正确方法是什么。我可以在我的 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 });
    }

}

我的 View (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>

Answer 1

这里有一些错误:

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

接下来，您无法告诉您的 ViewModel 您单击了一个按钮。通常，您可以通过将 ViewModel 上的 ICommand 实例绑定(bind)到 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; }
}