Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
C03lh0 opened this issue May 14, 2024 · 5 comments
Labels
area-TreeView team-Controls Issue for the Controls team

Comments

@C03lh0
Copy link

C03lh0 commented May 14, 2024

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
image

Closed and opened TreeView component
image

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

@codendone codendone transferred this issue from microsoft/WindowsAppSDK May 23, 2024
@microsoft-github-policy-service microsoft-github-policy-service bot added the needs-triage Issue needs to be triaged by the area owners label May 23, 2024
@codendone codendone added area-TreeView team-Controls Issue for the Controls team and removed needs-triage Issue needs to be triaged by the area owners labels May 23, 2024
Copy link

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:

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

@C03lh0
Copy link
Author

C03lh0 commented May 28, 2024

I still need help!

@C03lh0
Copy link
Author

C03lh0 commented Jun 4, 2024

These issues link not fix my issue.

@Al-Caron
Copy link

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
Copy link
Contributor

@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.

@ranjeshj ranjeshj closed this as not planned Won't fix, can't repro, duplicate, stale Jun 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-TreeView team-Controls Issue for the Controls team
Projects
None yet
Development

No branches or pull requests

4 participants