DataGrid does not display new data when the source is grouped

[KiruyaMomochi]

Describe the bug

I'm using a grouped collection as source of DataGrid and inserted a new group of data into the collection. When I added new data to this new group, these data didn't show up in DataGrid.

Regression

No response

Reproducible in sample app?

• [ ] This bug can be reproduced in the sample app.

Steps to reproduce

1. Create a WinUI 3 app using Template Studio.

2. Create XAML file GroupedDataGridPage.xaml

   XAML file

   <Page
       x:Class="Kyaru.Views.GroupedDataGridPage"
       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:controls="using:CommunityToolkit.WinUI.UI.Controls"
       mc:Ignorable="d"
       Style="{StaticResource PageStyle}">
       <Page.Resources>
           <CollectionViewSource
               x:Name="SampleDataSource"
               x:Key="SampleDataSource"
               Source="{x:Bind SampleData, Mode=OneWay}"
               IsSourceGrouped="True">
           </CollectionViewSource>
       </Page.Resources>
   
       <Grid x:Name="ContentArea" Margin="{StaticResource MediumLeftRightMargin}">
           <Grid.RowDefinitions>
               <RowDefinition Height="Auto" />
               <RowDefinition Height="*" />
               <RowDefinition Height="*" />
           </Grid.RowDefinitions>
           <StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Center">
               <Button
                   Content="AddBefore"
                   Click="AddBeforeButton_OnClick" />
               <Button
                   Content="AddAfter"
                   Click="AddAfterButton_OnClick" />
           </StackPanel>
   
           <controls:DataGrid
               Grid.Row="1"
               x:Name="DataGrid"
               AutoGenerateColumns="False"
               GridLinesVisibility="Horizontal"
               ItemsSource="{x:Bind SampleDataSource.View, Mode=OneWay}">
               <controls:DataGrid.Columns>
                   <controls:DataGridTextColumn Binding="{Binding Name}" Header="Name" />
               </controls:DataGrid.Columns>
           </controls:DataGrid>
   
           <GridView Grid.Row="2" ItemsSource="{x:Bind SampleDataSource.View}">
               <GridView.ItemTemplate>
                   <DataTemplate>
                       <TextBlock Text="{Binding Name}"></TextBlock>
                   </DataTemplate>
               </GridView.ItemTemplate>
               <GridView.GroupStyle>
                   <GroupStyle>
                       <GroupStyle.HeaderTemplate>
                           <DataTemplate>
                               <TextBlock Text="{Binding Key}"></TextBlock>
                           </DataTemplate>
                       </GroupStyle.HeaderTemplate>
                   </GroupStyle>
               </GridView.GroupStyle>
           </GridView>
       </Grid>
   </Page>
   

3. Create code behind GroupedDataGridPage.xaml.cs

   Code behind XAML

   using System.Collections.ObjectModel;
   using CommunityToolkit.WinUI.UI.Controls;
   using Microsoft.UI.Xaml;
   using Microsoft.UI.Xaml.Controls;
   
   namespace Kyaru.Views;
   
   public class GroupInfoCollection<T>: ObservableCollection<T>
   {
       public string Key { get; set; }
   }
   
   public class SampleModel
   {
       public string Name { get; set; } = "Name";
   }
   
   public partial class GroupedDataGridPage: Page
   {
       public ObservableCollection<GroupInfoCollection<SampleModel>> SampleData { get; set; } = new();
   
       public GroupedDataGridPage()
       {
           InitializeComponent();
       }
   
       private void AddBeforeButton_OnClick(object sender, RoutedEventArgs e)
       {
           var group = new GroupInfoCollection<SampleModel> { Key = "Key" };
           group.Add(new (){ Name = "a" });
           group.Add(new (){ Name = "b" });
           SampleData.Add(group);
       }
   
       private void AddAfterButton_OnClick(object sender, RoutedEventArgs e)
       {
           var group = new GroupInfoCollection<SampleModel> { Key = "Key" };
           SampleData.Add(group);
           group.Add(new (){ Name = "a" });
           group.Add(new (){ Name = "b" });
       }
   }
   

4. Add our newly created page to navigation, and run the app

5. Click AddBefore, a new group is created. DataGrid says (2 items), but shows nothing.

6. Click AddAfter, another new group is created. DataGrid says (0 items), but shows 2 items.

7. The GridView below always has the correct behavior.

Expected behavior

Both AddBefore and AddAfter should gives a group that says (2 items) and show 2 items in it.

Screenshots

Windows Build Number

• [ ] Windows 10 1809 (Build 17763)
• [ ] Windows 10 1903 (Build 18362)
• [ ] Windows 10 1909 (Build 18363)
• [ ] Windows 10 2004 (Build 19041)
• [ ] Windows 10 20H2 (Build 19042)
• [ ] Windows 10 21H1 (Build 19043)
• [ ] Windows 11 21H2 (Build 22000)
• [x] Other (specify)

Other Windows Build number

Windows 11 Insider Preview (Build 25131)

App minimum and target SDK version

• [ ] Windows 10, version 1809 (Build 17763)
• [ ] Windows 10, version 1903 (Build 18362)
• [ ] Windows 10, version 1909 (Build 18363)
• [x] Windows 10, version 2004 (Build 19041)
• [ ] Other (specify)

Other SDK version

No response

Visual Studio Version

No response

Visual Studio Build Number

N/A (Using dotnet run, with patch from dotnet/maui)

Device form factor

No response

Nuget packages

• CommunityToolkit.Mvvm 7.1.2
• CommunityToolkit.WinUI.UI.Controls 7.1.2
• CommunityToolkit.WinUI.UI.Controls.DataGrid 7.1.2
• Microsoft.Extensions.Hosting 6.0.1
• Microsoft.WindowsAppSDK 1.1.0
• Microsoft.Xaml.Behaviors.WinUI.Managed 2.0.8

Additional context

No response

Help us help you

Yes, but only if others can assist.

[ghost]

Hello KiruyaMomochi, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌