Data Binding INotifyPropertyChanged Not Working as Expected

Question

I am learning about the data binding especially with DataGrid. In my code here, I have a DataGrid and a Labelwhich shows the first cell value of DataGrid. Output of XAML is like . Considering the image below, The Label content next to The First Cell Value is: Monkey which I think i have got from the DataGrid first cell. Now what I wanted was to update left of The First Cell Value is: when I change the value in my DataGrid first cell. But I am unable to achieve it.

Bellow is my Code and the XAML File

CODE

namespace DataGridExampleSelfTry
{
    public class MainWindowVM:INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged = (sender, e) => { };
        private string _FirstCell;

        public string FirstCell
        {
            get{ return _FirstCell; }

            set
            {
                _FirstCell = value;
                PropertyChanged(this,new PropertyChangedEventArgs(nameof(FirstCell)));
            }

        }
        public string SecondCell { get; set; }

        private ObservableCollection<animies> _animelistforbinding;
        public ObservableCollection<animies> animelistforbinding
        { get
            {
                return _animelistforbinding;
            }
          set
            {
                _animelistforbinding = value;
                PropertyChanged(this, new PropertyChangedEventArgs(nameof(animelistforbinding)));
            }
        }
        ObservableCollection<animies> addinganime = new ObservableCollection<animies>();

        public MainWindowVM()
        {
            addinganime.Add(new animies("Monkey", "D Luffy"));

            animelistforbinding = addinganime;

            FirstCell = animelistforbinding[0].FirstName;
            SecondCell = animelistforbinding[0].LastName;   
        }     
    }

    public class animies:INotifyPropertyChanged
    {
        private string _FirstName;

        public event PropertyChangedEventHandler PropertyChanged = (sender, e) => { };

        public string FirstName
        {
            get { return _FirstName; }
            set
            {
                _FirstName = value;
                PropertyChanged(this, new PropertyChangedEventArgs(nameof(FirstName)));
            }
        }
        public string LastName { get; set; }
        public animies(string dFirstName, string dLastName)
        {
            FirstName = dFirstName;
            LastName = dLastName;
        }
    }
}

XAML

<Window x:Class="DataGridExampleSelfTry.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:DataGridExampleSelfTry"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="450">
    <Window.DataContext>
        <local:MainWindowVM/>
    </Window.DataContext>
    <StackPanel>
        <DataGrid x:Name="XAML_DataGrid"  
                            AutoGenerateColumns="False"  CanUserAddRows="False"                               
                            ItemsSource="{Binding animelistforbinding}" Margin="5" 
                            CanUserSortColumns="False" HorizontalGridLinesBrush="Gray" 
                            VerticalGridLinesBrush="Gray" >
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding FirstName, NotifyOnTargetUpdated=True, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
                                    Header="First name" Width="*" IsReadOnly="False"/>
                <DataGridTextColumn Binding="{Binding LastName}" Header="Last Name" Width="*" IsReadOnly="False"/>
               
            </DataGrid.Columns>
        </DataGrid>
        <StackPanel Orientation="Horizontal">
            <Label Content="The First Cell Value is : "/>
            <Label Content="{ Binding FirstCell}"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <Label Content="The Second Cell Value is : "/>
            <Label Content="{ Binding SecondCell}"/>
        </StackPanel>
          <Button Content="Button" Margin="50"/>
    </StackPanel>
   
</Window>

Thank you for your Help.

Answer 1

Either bind to directly to the same property that the first column of the DataGrid binds to:

<Label Content="{Binding animelistforbinding[0].FirstName}"/>

...or set the FirstCell property whenever the FirstName property of the first item in animelistforbinding is set. You can do this by handling the PropertyChanged event for the first item in your view model:

public MainWindowVM()
{
    addinganime.Add(new animies("Monkey", "D Luffy"));

    animelistforbinding = addinganime;

    FirstCell = animelistforbinding[0].FirstName;
    SecondCell = animelistforbinding[0].LastName;
    animelistforbinding[0].PropertyChanged += (s, e) => FirstCell = animelistforbinding[0].FirstName;
}