Update GridView in windows store

Question

I am developing an app for windows store (MVVM pattern) using C#/XAML. Current View Displaying Categories with its courses list, as done below.

<CollectionViewSource x:Name="groupedItemsViewSource"
                      Source="{Binding Path=ListCourses}"
                      IsSourceGrouped="true"
                      ItemsPath="Courses" />

Courses list in GridView:

<GridView
   x:Name="itemGridView"
   AutomationProperties.AutomationId="ItemGridView"
   AutomationProperties.Name="Grouped Items"
   Grid.RowSpan="2"
   Padding="116,35,40,46"
   SelectionMode="Single"
   ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
   ItemTemplate="{StaticResource ListCourseItemTemplate}"
   SelectedItem="{Binding SelectedItem, Mode=TwoWay}"         
   IsSwipeEnabled="false"
   IsItemClickEnabled="True">      
     <GridView.ItemsPanel>
          <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal"/>
           </ItemsPanelTemplate>
     </GridView.ItemsPanel>
     <GridView.GroupStyle>
         <GroupStyle>
             <GroupStyle.HeaderTemplate>
                 <DataTemplate>
                     <Grid Margin="1,0,0,6">
                         <Button AutomationProperties.Name="Group Title"
                                 Foreground="{StaticResource WShopperAccentTextBrush}"
                                 Style="{StaticResource TextPrimaryButtonStyle}">
                                 <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Name}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
                                    <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>
                                 </StackPanel>
                          </Button>
                      </Grid>
                 </DataTemplate>
             </GroupStyle.HeaderTemplate>
             <GroupStyle.Panel>
                  <ItemsPanelTemplate>
                      <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
                  </ItemsPanelTemplate>
              </GroupStyle.Panel>
         </GroupStyle>
     </GridView.GroupStyle>
</GridView>

Class Category:

public Category()
{

}
public int Id { get; set; }

public string Name { get; set; }


public IEnumerable<Course> Courses { get; set; }

In my view model -ListCourses property looks like this:

public ObservableCollection<Category> ListCourses
{
    get { return _listCourses; }
    private set { SetProperty(ref _listCourses, value); }
}

My question is: When I remove a course from it's list(removing item from gridView) the gridView doesn't update and show the current data in ListCourses property??

remove func:

     var category = ListCourses.FirstOrDefault(cat => cat.Id == SelectedItem.CategoryId);
        category.Courses.Remove(SelectedItem);
        OnPropertyChanged("ListCourses");

Any ideas??

Answer 1

category.Courses needs to be an ObservableCollection too.