Bind ObservableCollection of CustomClass to Grid

Question

I have to display the Content of Observable Collection in the Grid on button click. On Button click( I know that Command binding can be used but click handler for simplicity) collection should populate and display name property from model class.

ViewModel:

public class Sample
    {
        public ObservableCollection<SchoolModel> ModelCollection { get; set; }

        public void GridMethod()
        {
            ModelCollection = new ObservableCollection<SchoolModel>();
            ModelCollection.Add(new SchoolModel() {Id=1, Name="ABC" });
            ModelCollection.Add(new SchoolModel() { Id = 2, Name = "PQR" });
            ModelCollection.Add(new SchoolModel() { Id = 3, Name = "DEF" });
        }
    }

Model:

public class SchoolModel : INotifyPropertyChanged
    {
        private int id;
        private string name;

        public int Id
        { 
            get 
            {
                return id;
            }
            set 
            {
                id = value;
                OnPropertyChanged("Id");
            }
        }

        public string Name
        {
            get
            {
                return name;
            }
            set
            {
                name = value;
                OnPropertyChanged("Name");
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = this.PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }   
    }

View:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Button Content="Click" Click="Button_Click" Grid.Row="0" Grid.Column="0"/>

        <ItemsControl ItemsSource="{Binding ModelCollection}"  Grid.Row="0" Grid.Column="1" >
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Rows="{Binding Path=ModelCollection.Count}" Columns="{Binding Path=ModelCollection.Count}" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate >
                    <TextBlock Width="auto" Height="auto" Text="{Binding Path=Name}"/>                    
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>

Any idea? Why Collection is not displayed in the Grid

Answer 1

Initialize collection in constructor of Sample class otherwise binding will fail at time of load and it won't work until you manually raise PropertyChanged event for ModelCollection.

Either:

public Sample()
{
   ModelCollection = new ObservableCollection<SchoolModel>();
}

OR

Implement INPC on Sample class as well and raise PropertyChanged event after initialization logic in GridMethod().

    public void GridMethod()
    {
        ModelCollection = new ObservableCollection<SchoolModel>();
        ModelCollection.Add(new SchoolModel() {Id=1, Name="ABC" });
        ModelCollection.Add(new SchoolModel() { Id = 2, Name = "PQR" });
        ModelCollection.Add(new SchoolModel() { Id = 3, Name = "DEF" });
        OnPropertyChanged("ModelCollection");
    }