WPF: MVVM: Bind selecteditem from inside an usercontrol to textbox - wpf

Question

i am new to mvvm and hope, someone could help me to understand the following:
I have a Model, ViewModel and a View (UserControl), in the MainWindow there are 3 textboxes and the PersonView, which show several persons. This work. Now i want to select one of the persons (binded to SelectedPerson) and show the information in the 3 textboxes.
But i don't know, how to bind the SelectedPerson from PersonViewModel to the textboxes.
I tried to set the datacontext for the textboxes and the usercontrol to the same, and bind the boxes like Text="{Binding SelectedPerson.ID}", but that doesn't work.
Is there a way, to get the selected person from within the UserControl and display the information, or do i need to put the textboxes also in the usercontrol?
Thanks in advance,
Flo
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):
<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();
}
}
MainWindow.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>