UI Virtualization

Hello,

Could you please describe the issue in more detail so we can better understand the problem?  If you mean that you are virtualizing data and as you scroll, it's not updating properly and you see the same items repeating, that might be an indication of the problem we've seen with WPF ItemsControls occasionally in general.  A workaround is described in this documentation topic for that issue.

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <ItemsControl ItemsSource="{Binding Groups}"
                      Margin="10"
                      ScrollViewer.CanContentScroll="False"
                      ScrollViewer.VerticalScrollBarVisibility="Auto"
                      VirtualizingStackPanel.IsVirtualizing="True"
                      VirtualizingStackPanel.VirtualizationMode="Recycling"
                       >
            <ItemsControl.Template>
                <ControlTemplate>
                    <ScrollViewer>
                        <ItemsPresenter SnapsToDevicePixels="True" />
                    </ScrollViewer>
                </ControlTemplate>
            </ItemsControl.Template>
            <ItemsControl.ItemTemplate>
                <DataTemplate>

                    <StackPanel Orientation="Vertical">

                        <ribbon:AccessTextBlock Text="{Binding Name}"
                                                Background="Gray"
                                                Margin="10"/>

                        <grids:TreeListView RootItem="{Binding PropertyRoot}"
                                            ScrollViewer.CanContentScroll="True"
                                            VirtualizingStackPanel.IsVirtualizing="True"
                                            VirtualizingStackPanel.VirtualizationMode="Recycling"
                                            IsDefaultColumnHeaderContextMenuEnabled="False"
                                            CanColumnsResize="False"
                                            MultiDragKind="SameDepth"
                                            >
                            <grids:TreeListView.ItemAdapter>
                                <local:DefaultTreeListBoxItemAdapter ChildrenQueryModeDefault="OnExpansion" />
                            </grids:TreeListView.ItemAdapter>

                            <grids:TreeListView.Columns>

                                <grids:TreeListViewColumn Header="Label">
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Name}"/>
                                    </DataTemplate>
                                </grids:TreeListViewColumn>

                                <grids:TreeListViewColumn Header="Value">
                                    <DataTemplate>
                                        <!--<TextBlock Text="...." />-->
                                        <TextBox Text="{Binding Name}" />

                                    </DataTemplate>
                                </grids:TreeListViewColumn>

                            </grids:TreeListView.Columns>
                        </grids:TreeListView>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>

        <Button Grid.Row="1"
                Content="Load"
                Margin="10"
                Click="Button_Click"
                />

    </Grid>

private void Button_Click(object sender, RoutedEventArgs e)
        {
            _viewModel.Groups = new ObservableCollection<VirtualizingProperty>();

            for (var i = 0; i < 10; i++)
            {
                var group = new VirtualizingProperty();

                group.Name = $"Group {i}";

                group.PropertyRoot = this.CreateNode();

                _viewModel.Groups.Add(group);
            }
        }

        private TreeNode CreateNode()
        {
            var root = new TreeNode();

            for (var i = 0; i < 100; i++)
            {
                var node = new TreeNode()
                {
                    Name = $"Node{i}"
                };

                root.Children.Add(node);
            }

            return root;
        }

        internal class VirtualizingViewModel : NotifyPropertyChanged
        {
            private ObservableCollection<VirtualizingProperty> _groups;

            public VirtualizingViewModel()
            {
                _groups = new ObservableCollection<VirtualizingProperty>();
            }

            public ObservableCollection<VirtualizingProperty> Groups
            {
                get => _groups;
                set => this.OnPropertyChanged(ref _groups, value);
            }

        }

        internal class VirtualizingProperty : NotifyPropertyChanged
        {
            public string Name { get; set; }

            public TreeNode PropertyRoot { get; set; }

        }

When I enabled virtualization,the experience of scrolling data was so bad,

When virtualization is not enabled,data loading stalls.

Hello,

It appears you are trying to use a virtualized TreeListView within an item template for a parent ItemsControl, which doesn't seem like the best idea since that could potentially be making lots of TreeListView instances, along with introducing scrolling issues.

A much better way to do this would be to use a single TreeListView control and add some special viewmodel nodes for your root groupings.  If you set the TreeListView.ItemContainerStyleSelector to a custom StyleSelector that can select between two various styles/templates to use (one for groups and one for the default), you should be able to accomplish what you want and with a single control.  That is what we do in the Grids' PropertyGrid control.  We have an ItemContainerStyleSelector in PropertyGrid that can display category (full width groupings) or property (name/value cells) rows and it works very well.

Hello,

I thought about doing this before, but in my real development needs, there are not just TreeListViews grouping items, there are other layout designs, and each TreeListView needs to implement its own drag sort.

Hello,

Virtualization won't work well unless you have a single control, like a single TreeListView instance.  And if you turn off virtualization and have multiple TreeListView controls, each TreeListView control will be measuring all of the items within it.  If you have an enormous number of items, that will affect performance.

My main recommendation would be to find a way to use a single TreeListView control, altering your UI design if needed.  If that isn't possible, you could try keeping virtualization on, but setting some fixed Height on the multiple TreeListView instances.  A fixed height may help with some of the scrolling issues, but it's hard to say without testing.

OK, thanks for your suggestion, I will consider it.