Description
openedon Dec 11, 2023
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)
- 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.