The TreeView component does not maintain the states of components that have a state such as CheckBox

[C03lh0]

Describe the bug

Explanation

I created a TreeView that has checkboxes as children. When I check a CheckBox and close the TreeView and open it again, the check goes to another CheckBox.

Steps to reproduce the bug

Here is the code snippet:

<Page.Resources>
    <model:TreeViewTemplateSelector
        x:Key="TreeViewTemplateSelector"
        SingleItemWithGroupTemplate="{StaticResource SingleItemWithGroupTemplate}"
        SubItemsTemplate="{StaticResource SubItemsTemplate}" />

    <DataTemplate x:Key="SingleItemWithGroupTemplate" x:DataType="model:ExplorerItem">
        <TreeViewItem x:Name="TreeViewSubItem">
            <StackPanel MinHeight="47" VerticalAlignment="Center">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <CheckBox
                        x:Name="CheckBoxDefault"
                        Margin="10,0,10,0"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center" />

                    <TextBlock
                        Grid.Column="1"
                        Padding="18,13,0,13"
                        VerticalAlignment="Center"
                        Foreground="Red"
                        Text="{x:Bind Text}"
                        TextWrapping="Wrap" />
                </Grid>
            </StackPanel>
        </TreeViewItem>
    </DataTemplate>

    <DataTemplate x:Key="SubItemsTemplate" x:DataType="model:ExpanderItemModel">
        <TreeViewItem
            x:Name="HeaderTreeViewItem"
            AutomationProperties.Name="{x:Bind Header}"
            ItemsSource="{x:Bind SubItemsSource}">
            <StackPanel Orientation="Vertical">
                <TextBlock
                    Padding="24,14,0,14"
                    FontSize="14"
                    Foreground="Yellow"
                    Text="{x:Bind Header}"
                    TextWrapping="Wrap" />
            </StackPanel>
        </TreeViewItem>
    </DataTemplate>
</Page.Resources>

<TreeView ItemTemplateSelector="{StaticResource TreeViewTemplateSelector}" ItemsSource="{x:Bind MyList, Mode=OneWay}" />

 public class TreeViewTemplateSelector : DataTemplateSelector
 {
     public DataTemplate SingleItemWithGroupTemplate { get; set; }
     public DataTemplate SubItemsTemplate { get; set; }

     protected override DataTemplate SelectTemplateCore(object item)
     {
         if (item is ExpanderItemModel expanderItemsModel)
         {
             if (expanderItemsModel.SubItemsSource != null && expanderItemsModel.SubItemsSource.Any())
             {
                 return SubItemsTemplate;
             }
         }
         return SingleItemWithGroupTemplate;
     }
 }

public class ExplorerItem
{
    public string Text { get; set; }
}

 public class ExpanderItemModel 
 {
     public string Header { get; set; }
     public List<ExplorerItem> SubItemsSource { get; set; }
 }

Expected behavior

The expected behavior is for the TreeView component to maintain the current state of the CheckBox.

Screenshots

Example Images

Checked second checkbox

Closed and opened TreeView component

NuGet package version

Windows App SDK 1.5.3: 1.5.240428000

Packaging type

Packaged (MSIX)

Windows version

Windows 10 version 22H2 (19045, 2022 Update)

IDE

Visual Studio 2022

Additional context

No response

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one. Thank you!

Open similar issues:

• TreeView doesn't preserve the value of IsExpanded when containers in "content mode" are recycled and reused (#9549), similarity score: 0.78
• WinUI 3 TreeView IsSelected is not persistent when collapsing/expanding tree (#8054), similarity score: 0.76
• TreeViewItem doesn't update IsSelected in SelectionMode=Multiple when clicking on Checkbox or content (#125), similarity score: 0.75
• TreeView does not clear nodes state after updating ItemsSource (#7044), similarity score: 0.75
• TreeView with Multi-Selection | Parent state doesn't update when child is dragged away. (#9093), similarity score: 0.73

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[C03lh0]

I still need help!

[C03lh0]

These issues link not fix my issue.

[Al-Caron]

Faced same problem too. Think it might be related to the item container virtualization.

Tried setting the TreeView in ScrollViewer to see if this fixes the problem ? If so, it's related to item reuse again.

I also faced to problem when my binding was NOT TwoWay. ?? Why ? have no idea

[ranjeshj]

@C03lh0 @Al-Caron This is happening because of container virtualization - yes. I think what you want to do here is bind the checkbox to something in your data so that it gets persisted. The containers will be reused, but if it is bound to the data, you should get the value you expect. You will need Two-way binding because when the data changes, you want the UI to reflect it and also when the user clicks the check box, the backing data needs to be updated.