WPF - Horizontally arranged items isn't visualizing

Question

couldn't get the virtualization working in the 3rd column of the data grid. I am combining these two solutions

https://www.codeproject.com/Articles/1213466/WPF-TreeGrid-using-a-DataGrid

https://blogs.msmvps.com/deborahk/populating-a-datagrid-with-dynamic-columns-in-a-silverlight-application-using-mvvm/

Any help?!

<Window x:Class="TreeGrid.MainWindow"
        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"
        xmlns:local="clr-namespace:TreeGrid"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <GridLength x:Key="TreeToggleWidth">20</GridLength>
        <local:LevelConverter x:Key="LevelSpaceConverter" LevelWidth="{StaticResource TreeToggleWidth}"/>
        <local:VisibilityConverter x:Key="TreeToggleConverter"/>
    </Window.Resources>

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

        <Button Grid.Row="0"/>

        <DataGrid AutoGenerateColumns="False" Name="grid" Grid.Row="1" CanUserAddRows="False"
                  AlternationCount="2" AlternatingRowBackground="LightGray" ItemsSource="{Binding Model.FlatModel}" EnableColumnVirtualization="True"
                  ScrollViewer.CanContentScroll="True">
            <DataGrid.Columns>
                <DataGridTemplateColumn
                    Header="Name">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="{Binding Level, Converter={StaticResource LevelSpaceConverter}}"/>
                                    <ColumnDefinition Width="{StaticResource TreeToggleWidth}"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid Background="Red" Grid.Column="0"/>
                                <CheckBox 
                                    Grid.Column="1"
                                    IsChecked="{Binding IsExpanded, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                    Visibility="{Binding HasChildren, Converter={StaticResource TreeToggleConverter}}"/>
                                <TextBlock
                                    Grid.Column="2"
                                    Text="{Binding Name}"/>
                            </Grid>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn
                    Header="Value"
                    Binding="{Binding Value}"/>
                <DataGridTemplateColumn >
                    <DataGridTemplateColumn.HeaderStyle>
                        <Style 
                      TargetType="DataGridColumnHeader">
                            <Setter 
                          Property="HorizontalContentAlignment" 
                          Value="Stretch" />
                            <Setter 
                          Property="VerticalContentAlignment"  
                          Value="Stretch" />
                            <Setter Property="Margin" 
                                     Value="0" />
                            <Setter Property="ContentTemplate">
                                <Setter.Value>
                                    <DataTemplate>
                                        <ItemsControl VirtualizingStackPanel.IsVirtualizing="True"
                                            ScrollViewer.CanContentScroll="True"
                                            ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.Headers}">

                                            <ItemsControl.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <VirtualizingStackPanel Orientation="Horizontal"/>
                                                </ItemsPanelTemplate>
                                            </ItemsControl.ItemsPanel>

                                            <ItemsControl.Template>
                                                <ControlTemplate>
                                                    <ScrollViewer CanContentScroll="True" VirtualizingPanel.IsVirtualizing="True"
               VirtualizingPanel.IsContainerVirtualizable="True"
               VirtualizingPanel.VirtualizationMode="Recycling">
                                                        <ItemsPresenter />
                                                    </ScrollViewer>
                                                </ControlTemplate>
                                            </ItemsControl.Template>

                                            <ItemsControl.ItemTemplate>
                                                <DataTemplate>
                                                    <Border  Width="70" >
                                                        <TextBlock Text="{Binding}" 
                                          TextAlignment="Center"/>
                                                    </Border>
                                                </DataTemplate>
                                            </ItemsControl.ItemTemplate>
                                        </ItemsControl>
                                    </DataTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </DataGridTemplateColumn.HeaderStyle>
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <ItemsControl VirtualizingStackPanel.IsVirtualizing="True"                                          
                            ScrollViewer.CanContentScroll="True"
                            ItemsSource="{Binding TS}">

                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <VirtualizingStackPanel  Orientation="Horizontal"/>
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>

                                <ItemsControl.Template>
                                    <ControlTemplate>
                                        <ScrollViewer CanContentScroll="True" VirtualizingPanel.IsVirtualizing="True"
               VirtualizingPanel.IsContainerVirtualizable="True"
               VirtualizingPanel.VirtualizationMode="Recycling">
                                            <ItemsPresenter  />
                                        </ScrollViewer>
                                    </ControlTemplate>
                                </ItemsControl.Template>

                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>

                                        <Border Width="70" >
                                            <TextBlock Text="{Binding}"  
                                        TextAlignment="Center"/>
                                        </Border>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

score 0 · Answer 1 · answered Jan 03 '18 at 11:37

An ItemsControl does not support virtualization, even when using a VirtualizingStackPanel as its ItemsPanel. You have to exchange it to an item that supports it, e.g. ListView, see here.

Also, I had to remove the ScrollViewer and instead add a Width to the VirtualizingStackPanel to get the Virtualization to work:

                    <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <ListView ItemsSource="{Binding}">

                            <ListView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel  Orientation="Horizontal" Width="400"/>
                                </ItemsPanelTemplate>
                            </ListView.ItemsPanel>

                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <Border Width="70" >
                                        <TextBlock Text="{Binding}"  
                                    TextAlignment="Center"/>
                                    </Border>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>

With these changes I got a nice, virtualizing third column (for the content, I did not do the same for the header. The same should work there, too).

Hi MaSiMan, Thanks for your response; but it doesn't work (mean it doesn't virtualize )when I remove the width attribute from virtualizing panel - — RADKrish, Jan 04 '18 at 06:37
If I understand it correctly, the VirtualizingStackPanel will _only_ virtualize if it is responsible for the scrolling itself (and not the ScrollViewer around it). And setting its Width (or MaxWidth) is the first way I think about, but there is for sure another way. If you do not want to set the width on an absolute value, there might be a way to use a binding to the TempatedParent, but I cannot look into this right now. — MaSiMan, Jan 04 '18 at 08:41

WPF - Horizontally arranged items isn't visualizing

1 Answers1