Checkbox in DataGridTemplateColumn : Clicking on checkbox generates ghost checkbox

FPotel commented 9 months ago

Describe the bug

I created a UserControl that contains a DataGrid, which contains one DataGridTemplateColumn, which contains a checkbox. The IsChecked of that checkbox is binded with an ObservableProperty of a POCO class. When clicking randomly on the checkboxes, and setting a breakpoint into the event OnChecked, we can see that we pass several times into it, and the datacontext linked to the checkbox is sometimes null. I set another breakpoint in the code generated by my UserControl (.g.cs file) into the Connect function, and I can observe that the thread pass several times into the code of the checkbox creation. The fact the checkbox is binded to an Observable Property makes the bug happen (with a regular property, no bug). If I delete the ObservableProperty tag on the property, and I raise a OnPropertyChanged event in the setter, I also observe the bug.

Regression

No response

Reproducible in sample app?

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

Steps to reproduce

Here is the code for :
The View (xaml + xaml.cs)
-CustomDatagrid
-MainWindow

The model:(the POCO class to view)
-CustomDataNode

/////////////////////////////////////////////////////
/////////////////////// CustomDatagrid XAML ////////////////////////
/////////////////////////////////////////////////////

<UserControl
    x:Class="BugDatagrid.Views.CustomDatagrid"
    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"
    mc:Ignorable="d"
    xmlns:controls="using:CommunityToolkit.WinUI.UI.Controls"
    x:Name="View">

    <Grid>
        <controls:DataGrid ItemsSource="{Binding ElementName=View,Path=ListNodes, Mode=OneWay}"  
                           AutoGenerateColumns="False"
                           HorizontalAlignment="Stretch"
                           HorizontalContentAlignment="Stretch"
                           x:Name="DataGrid">

            <controls:DataGrid.Columns>

                <controls:DataGridTemplateColumn Header="Display" >
                    <controls:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <CheckBox IsChecked="{Binding Path=IsDisplayed, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                            Checked="ToggleButton_OnChecked"
                                          Unchecked="ToggleButton_OnUnchecked"/>
                            </Grid>
                        </DataTemplate>
                    </controls:DataGridTemplateColumn.CellTemplate>
                </controls:DataGridTemplateColumn>
            </controls:DataGrid.Columns>
        </controls:DataGrid>
    </Grid>
</UserControl>

////////////////////////////////////////////////////////
/////////////////////// CustomDatagrid XAML.CS ////////////////////////
////////////////////////////////////////////////////////
  public sealed partial class CustomDatagrid : UserControl
  {
      public CustomDatagrid()
      {
          this.InitializeComponent();
      }

      public static readonly DependencyProperty ListNodesProperty = DependencyProperty.Register(
          nameof(ListNodes), typeof(List<CustomDataNode>), typeof(CustomDatagrid), new PropertyMetadata(default(List<CustomDataNode>)));

      public List<CustomDataNode> ListNodes
      {
          get { return (List<CustomDataNode>)GetValue(ListNodesProperty); }
          set
          {
              SetValue(ListNodesProperty, value);
          }
      }

      private void ToggleButton_OnChecked(object sender, RoutedEventArgs e)
      {
          if ((sender as CheckBox)?.DataContext == null)
          {

          }
      }
}
///////////////////////////////////////////////////////////
/////////////////////// CustomDataNode (POCO CLASS )////////////////////////
///////////////////////////////////////////////////////////
public partial class CustomDataNode :ObservableObject
{
    public CustomDataNode()
    {
    }

    [ObservableProperty] private bool _isDisplayed;
}

/////////////////////////////////////////////////////
/////////////////////// MainWindow XAML ////////////////////////
/////////////////////////////////////////////////////
<Window
    x:Class="BugDatagrid.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BugDatagrid"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:views="using:BugDatagrid.Views"
    mc:Ignorable="d"
    x:Name="View">

    <views:CustomDatagrid ListNodes="{Binding ElementName=View,Path=MyDemoList,Mode=OneWay}"/>
</Window>

/////////////////////////////////////////////////////
/////////////////////// MainWindow XAML.cs ////////////////////////
/////////////////////////////////////////////////////
    /// <summary>
    /// An empty window that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
        }
        public List<CustomDataNode> MyDemoList { get; set; } = new() { new CustomDataNode(), new CustomDataNode(), new CustomDataNode() };
    }

Expected behavior

I can't explain why the fact I binded the IsChecked property of my Checkbox to an ObservableProperty in my model triggers the creation of ghost checkbox (with null datacontext). I found a workaround for my code, but thouht it was worth it reporting this behavior.

Screenshots

No response

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 22H2

App minimum and target SDK version

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

Other SDK version

No response

Visual Studio Version

2022

Visual Studio Build Number

No response

Device form factor

No response

Nuget packages

CommunityToolkit.WinUI.UI.Controls 7.1.2 CommunityToolkit.Mvvm 8.2.2

Additional context

No response

Help us help you

No.

ghost commented 9 months ago

Hello FPotel, 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 🙌

ghost commented 9 months ago