首页 > 解决方案 > WPF:MVVM:将用户控件内部的选定项绑定到文本框

问题描述

我是 mvvm 的新手,希望有人可以帮助我理解以下内容:

我有一个 Model、ViewModel 和一个 View (UserControl),在 MainWindow 中有 3 个文本框和 PersonView,它显示了几个人。这项工作。现在我想选择其中一个人(绑定到 SelectedPerson)并在 3 个文本框中显示信息。

但我不知道如何将 SelectedPerson 从 PersonViewModel 绑定到文本框。

我尝试将文本框和用户控件的 datacontext 设置为相同,并绑定 Text="{Binding SelectedPerson.ID}" 之类的框,但这不起作用。

有没有办法从 UserControl 中获取选定的人并显示信息,或者我是否需要将文本框也放在 usercontrol 中?

提前致谢,弗洛

PersonModel.cs:

namespace MVVMExample.Model
{
    public  class PersonModel: INotifyPropertyChanged
    {
        public int ID { get; set; }

        private string forname;

        public string Forname
        {
            get { return forname; }
            set {
                forname = value;
                RaisePropertyChanged("Forname");
            }
        }

        private string surname;
        
        public string Surname
        {
            get { return surname; }
            set {
                surname = value;
                RaisePropertyChanged("Surname");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void RaisePropertyChanged(string property)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(property));
            }
        }
    }
}

PersonViewModel.cs:

    public class PersonViewModel
    {
        public PersonViewModel()
        {
            Persons = new ObservableCollection<PersonModel>();
            LoadPersons();
        }

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

        public PersonModel SelectedPerson { get; set; }


        public void LoadPersons()
        {

            ObservableCollection<PersonModel> persons = new ObservableCollection<PersonModel>();

            persons.Add(new PersonModel { ID = 1, Forname = "Thomas", Surname = "Sogen" });
            persons.Add(new PersonModel { ID = 2, Forname = "Seth", Surname = "Xu" });
            persons.Add(new PersonModel { ID = 3, Forname = "Derik", Surname = "Mayers" });
            persons.Add(new PersonModel { ID = 4, Forname = "Daisy", Surname = "Doros" });

            Persons = persons;
        }
    }

PersonView.xaml(用户控件):

<UserControl x:Class="MVVMExample.Views.PersonView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MVVMExample.Views"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="400">
    <Grid>
        <DataGrid Name="PersonDataGrid" Grid.Row="4" AutoGenerateColumns="False" ItemsSource="{Binding Persons, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"  CanUserAddRows="False" IsReadOnly="True" HeadersVisibility="Column" FontSize="14" SelectionMode="Single" SelectedItem="{Binding SelectedPerson}">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="ID" Binding="{Binding ID}" Width="*"/>
                    <DataGridTextColumn Header="Forname" Binding="{Binding Forname}" Width="*"/>
                    <DataGridTextColumn Header="Surname" Binding="{Binding Surname}" Width="*"/>
                </DataGrid.Columns>
            </DataGrid>

    </Grid>
</UserControl>

PersonView.xaml.cs:

    public partial class PersonView : UserControl
    {
        public PersonView()
        {
            InitializeComponent();
            this.DataContext = new MVVMExample.ViewModel.PersonViewModel();
        }
    }

主窗口.xaml

<Window x:Class="MVVMExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MVVMExample"
        xmlns:views="clr-namespace:MVVMExample.Views"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="400">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="20"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBox Grid.Row="0"/>
        <TextBox Grid.Row="1"/>
        <TextBox Grid.Row="2"/>
        <views:PersonView x:Name="PersonViewControl" Loaded="PersonViewControl_Loaded" Grid.Row="3"/>
    </Grid>
</Window>

标签: wpfxamlmvvm

解决方案


推荐阅读