WPF ObservableCollection Binding with Datagrid in MVVM

Question

I'm new to the WPF world. I really need help. I'm trying to bind an ObservableCollection<> with DataGrid but it's not working. I want to bind using only XAML ItemSource="{Binding}" . I'm doing all this in MVVM.

And Also one more thing, How will View connect to the ViewModel? Are there any changes i have to make in my View XAML file.

Can you suggest me from where I can learn WPF completely.

Project Name is - MVVMGrid

Model - Data.cs

public class Data :INotifyPropertyChanged
    {
        private string _name;
        private string _country;


        public string Name
        {
            get { return _name; }
            set { _name= value;
                OnPropertyChange("Name");
            }
        }
        public string Country
        {   
            get { return _country; }
            set { _country= value;
                OnPropertyChange("Country");
            }
        }

        protected void OnPropertyChange(string name = null)
            {
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
            }


        public event PropertyChangedEventHandler PropertyChanged;
    }

ViewModel - DataView.cs

public class DataView
    {


        public DataView()
        {
            FetchGrid();

        }



         public static ObservableCollection<Data> FetchGrid()
        {
            var load = new ObservableCollection<Data>();
            load.Add(new Data { Name = "Raja", Country = "INDIA" });
            load.Add(new Data { Name = "Ram", Country = "India" });
            load.Add(new Data { Name = "Rohan", Country = "USA" });
            load.Add(new Data { Name = "Roy", Country = "TURKEY" });

            return load;
        }
    }

View - MainWindow.xaml

<Window x:Class="MVVMGrid.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:Grid"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

        <DataGrid  ItemsSource="{Binding Path= FetchGrid}" AutoGenerateColumns="False" >
            <DataGrid.Columns>
                <DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
                <DataGridTextColumn Header="Country" Binding="{Binding Country}"/>

            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

Joe H Joe H · Accepted Answer · 2020-03-30T17:36:27

The grid needs to bind to a public instance property (not a method as shown above, and not static).

public ObservableCollection<Data> DataItems => new ObservableCollection<Data>()

Then in the fetch method load that collection

private void FetchGrid()
{
    DataItems.Clear();

    DataItems.Add(new Data { Name = "Raja", Country = "INDIA" });
    DataItems.Add(new Data { Name = "Ram", Country = "India" });
    DataItems.Add(new Data { Name = "Rohan", Country = "USA" });
    DataItems.Add(new Data { Name = "Roy", Country = "TURKEY" });
}

And the Xaml bind to the property

<DataGrid  ItemsSource="{Binding DataItems}" AutoGenerateColumns="False" >
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
        <DataGridTextColumn Header="Country" Binding="{Binding Country}"/>

    </DataGrid.Columns>
</DataGrid>

WPF ObservableCollection Binding with Datagrid in MVVM

1 Answers