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

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>