WPF Datagrid virtualization getting disabled when placed in a scrollviewer

Question

I have a scenario where in I am using two datagrids basically to achieve grouping as shown below. For achieving synchronized scrolling between two grids I am using a scrollviewer. Using scroll viewer is disabling the virtualization and loading data in datagrids is getting affected drastically. below is the sample code I am using. Any suggestions whould be of gr8 help.

                            <Grid Name="Test" Background="White">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>

                                    <DataGrid Name="DataGrid1"  Grid.Column="0" AutoGenerateColumns="False" CanUserResizeRows="False"
              CanUserAddRows="False" BorderBrush="#FF1B1A1A" BorderThickness="0" Background="{x:Null}"  HorizontalGridLinesBrush="DarkGray"
      VerticalGridLinesBrush="DarkGray" SelectionChanged="basketNameDataGrid_SelectionChanged" PreviewMouseWheel="basketNameDataGrid_PreviewMouseWheel">
                                    <DataGrid.CellStyle>
                                        <Style TargetType="DataGridCell">
                                            <Style.Triggers>
                                                <Trigger Property="IsSelected"
                    Value="True">
                                                    <Setter Property="Background"
                    Value="#1E90FF" />
                                                    <Setter Property="Foreground"
                    Value="White" />
                                                </Trigger>
                                            </Style.Triggers>
                                        </Style>
                                    </DataGrid.CellStyle>
                                    <DataGrid.RowStyle>
                                        <Style TargetType="DataGridRow">
                                            <Setter Property="Height" Value="{Binding RowHeight}"></Setter>
                                        </Style>
                                    </DataGrid.RowStyle>
                                    <!--<DataGrid.RowStyle>
                                        <Style TargetType="DataGridRow">
                                            <Setter Property="Height" Value="{Binding RowHeight}"></Setter>
                                        </Style>
                                    </DataGrid.RowStyle>-->
                                    <DataGrid.Columns>
                                        <!--<DataGridTemplateColumn>
                                <DataGridTemplateColumn.HeaderTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Vertical" >
                                                <Border Margin=".5" >
                                                    <Button Content="Signal" KeyboardNavigation.IsTabStop="False"/>
                                                </Border>
                                                <StackPanel Orientation="Horizontal">
                                                    <Border Margin="0" >
                                                        <Button Margin="0" >
                                                            <TextBlock Text="Name" />
                                                        </Button>
                                                    </Border>
                                                    <Border >
                                                        <Button  KeyboardNavigation.IsTabStop="False" >
                                                            <TextBlock MinWidth="90" MinHeight="27" Text="Description" Margin="10,10,0,0" />
                                                        </Button>
                                                    </Border>
                                            </StackPanel>

                                        </StackPanel>
                                    </DataTemplate>
                                </DataGridTemplateColumn.HeaderTemplate>
                                </DataGridTemplateColumn>-->
                                        <DataGridTemplateColumn Header="Object Reference" >
                                            <DataGridTemplateColumn.CellTemplate>
                                                <DataTemplate>
                                                    <TextBlock Text="{Binding ObjRef}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                                </DataTemplate>
                                            </DataGridTemplateColumn.CellTemplate>
                                        </DataGridTemplateColumn>
                                        <DataGridTemplateColumn Header="by ICD">
                                            <DataGridTemplateColumn.CellTemplate>
                                                <DataTemplate>
                                                    <TextBlock Text="{Binding ByICD}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                                </DataTemplate>
                                            </DataGridTemplateColumn.CellTemplate>
                                        </DataGridTemplateColumn>
                                        <DataGridTemplateColumn Header="by Standard" >
                                            <DataGridTemplateColumn.CellTemplate>
                                                <DataTemplate>
                                                    <TextBlock Text="{Binding ByStandard}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                                </DataTemplate>
                                            </DataGridTemplateColumn.CellTemplate>
                                        </DataGridTemplateColumn>
                                    </DataGrid.Columns>
                                </DataGrid>
                                    <DataGrid Name="DataGrid2" Grid.Column="1" HeadersVisibility="Column" 
              CanUserResizeRows="False" CanUserAddRows="False" Margin="0" BorderBrush="{x:Null}" BorderThickness="0" Background="{x:Null}"
                                           HorizontalGridLinesBrush="DarkGray" VerticalGridLinesBrush="DarkGray" SelectionChanged="itemDataGrid_SelectionChanged" PreviewMouseWheel="itemDataGrid_PreviewMouseWheel">
                                    <DataGrid.CellStyle>
                                        <Style TargetType="DataGridCell">
                                            <Style.Triggers>
                                                <Trigger Property="IsSelected"
                    Value="True">
                                                    <Setter Property="Background"
                    Value="#1E90FF" />
                                                    <Setter Property="Foreground"
                    Value="White" />
                                                </Trigger>
                                            </Style.Triggers>
                                        </Style>
                                    </DataGrid.CellStyle>
                                    <DataGrid.RowStyle>
                                        <Style TargetType="DataGridRow">
                                            <Setter Property="Height" Value="20"></Setter>
                                        </Style>
                                    </DataGrid.RowStyle>
                                    <DataGrid.Columns>
                                        <DataGridTemplateColumn Header="Attribute" Width="Auto">
                                            <DataGridTemplateColumn.CellTemplate>
                                                <DataTemplate>
                                                    <TextBlock Text="{Binding Attribute, Mode = OneWay}" HorizontalAlignment="Center"/>
                                                </DataTemplate>
                                            </DataGridTemplateColumn.CellTemplate>
                                        </DataGridTemplateColumn>
                                        <DataGridTemplateColumn Header="Type" Width="Auto">
                                            <DataGridTemplateColumn.CellTemplate>
                                                <DataTemplate>
                                                    <TextBlock Text="{Binding Type, Mode = OneWay}" HorizontalAlignment="Center"/>
                                                </DataTemplate>
                                            </DataGridTemplateColumn.CellTemplate>
                                        </DataGridTemplateColumn>
                                        <DataGridTemplateColumn Header="FC" Width="Auto">
                                            <DataGridTemplateColumn.CellTemplate>
                                                <DataTemplate>
                                                    <TextBlock Text="{Binding FC, Mode = OneWay}" HorizontalAlignment="Center"/>
                                                </DataTemplate>
                                            </DataGridTemplateColumn.CellTemplate>
                                        </DataGridTemplateColumn>
                                        <DataGridTemplateColumn Header="Default" Width="Auto">
                                            <DataGridTemplateColumn.CellTemplate>
                                                <DataTemplate>
                                                    <TextBlock Text="{Binding DefaultVal, Mode = OneWay}" HorizontalAlignment="Center"/>
                                                </DataTemplate>
                                            </DataGridTemplateColumn.CellTemplate>
                                        </DataGridTemplateColumn>

                                        <DataGridTemplateColumn Header="Table Type" Width="Auto">
                                            <DataGridTemplateColumn.CellTemplate>
                                                <DataTemplate>
                                                    <TextBlock Text="{Binding TableType, Mode = OneWay}" HorizontalAlignment="Center"/>
                                                </DataTemplate>
                                            </DataGridTemplateColumn.CellTemplate>
                                        </DataGridTemplateColumn>
                                        <DataGridTemplateColumn Header="Signal Name" Width="Auto">
                                            <DataGridTemplateColumn.CellTemplate>
                                                <DataTemplate>
                                                    <TextBlock Text="{Binding Name, Mode = OneWay}" HorizontalAlignment="Center"/>
                                                </DataTemplate>
                                            </DataGridTemplateColumn.CellTemplate>
                                        </DataGridTemplateColumn>
                                        <DataGridTemplateColumn Header="Signal Description" Width="Auto">
                                            <DataGridTemplateColumn.CellTemplate>
                                                <DataTemplate>
                                                    <TextBlock Text="{Binding Desription, Mode = OneWay}" HorizontalAlignment="Center"/>
                                                </DataTemplate>
                                            </DataGridTemplateColumn.CellTemplate>
                                        </DataGridTemplateColumn>
                                        <!--<DataGridTemplateColumn>
                                    <DataGridTemplateColumn.HeaderTemplate>
                                        <DataTemplate>
                                            <ItemsControl Height="36" Width="175">-->
                                        <!--ItemsSource="{Binding DataContext.ScenarioHeaders, ElementName=LayoutRoot}">-->
                                        <!--
                                                <ItemsControl.ItemsPanel>
                                                    <ItemsPanelTemplate>
                                                        <StackPanel Orientation="Horizontal" />
                                                    </ItemsPanelTemplate>
                                                </ItemsControl.ItemsPanel>
                                                <ItemsControl.ItemTemplate>
                                                    <DataTemplate>
                                                        <StackPanel Orientation="Vertical">
                                                            <Border  Width="150" >
                                                                <TextBlock Text="Description" TextAlignment="Center"/>
                                                            </Border>
                                                            <StackPanel Orientation="Horizontal">
                                                                <Border  Width="50" >
                                                                    <TextBlock Text="Signal2" TextAlignment="Center">

                                                                    </TextBlock>
                                                                </Border>
                                                                <Border  Width="50" >
                                                                    <TextBlock Text="Signal1" TextAlignment="Center"/>
                                                                </Border>
                                                            </StackPanel>
                                                        </StackPanel>
                                                    </DataTemplate>
                                                </ItemsControl.ItemTemplate>
                                            </ItemsControl>
                                        </DataTemplate>
                                    </DataGridTemplateColumn.HeaderTemplate>
                                    <DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <ItemsControl ItemsSource="{Binding ClassSegments}">
                                                <ItemsControl.ItemsPanel>
                                                    <ItemsPanelTemplate>
                                                        <StackPanel Orientation="Horizontal"/>
                                                    </ItemsPanelTemplate>
                                                </ItemsControl.ItemsPanel>
                                                <ItemsControl.ItemTemplate>
                                                    <DataTemplate>
                                                        <StackPanel Orientation="Horizontal">
                                                            <Border  Width="50" >
                                                                <TextBlock/>
                                                                -->
                                        <!--Text="{Binding RegularStudentCount}" TextAlignment="Center"/>-->
                                        <!--
                                                            </Border>
                                                            <Border  Width="50" >
                                                                <TextBlock></TextBlock> -->
                                        <!--Text="{Binding EIPStudentCount}" TextAlignment="Center"/>-->
                                        <!--
                                                            </Border>
                                                        </StackPanel>
                                                    </DataTemplate>
                                                </ItemsControl.ItemTemplate>
                                            </ItemsControl>
                                        </DataTemplate>
                                    </DataGridTemplateColumn.CellTemplate>
                                </DataGridTemplateColumn>-->
                                        <DataGridCheckBoxColumn Header="Inverse" Width="Auto" Binding="{Binding Inverse, Mode = TwoWay}" >
                                            <!--<DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding Inverse, Mode = OneWay}"/>
                                        </DataTemplate>
                                    </DataGridTemplateColumn.CellTemplate>-->
                                        </DataGridCheckBoxColumn>
                                        <DataGridTemplateColumn Header="Period(ssp)" Width="Auto">
                                            <DataGridTemplateColumn.CellTemplate>
                                                <DataTemplate>
                                                    <TextBlock Text="{Binding period, Mode = OneWay}" HorizontalAlignment="Center"/>
                                                </DataTemplate>
                                            </DataGridTemplateColumn.CellTemplate>
                                        </DataGridTemplateColumn>
                                        <DataGridTemplateColumn Header="Timing" Width="Auto">
                                            <DataGridTemplateColumn.CellTemplate>
                                                <DataTemplate>
                                                    <TextBlock Text="{Binding Timing, Mode = OneWay}" HorizontalAlignment="Center"/>
                                                </DataTemplate>
                                            </DataGridTemplateColumn.CellTemplate>
                                        </DataGridTemplateColumn>
                                    </DataGrid.Columns>
                                </DataGrid>
                            </Grid>

                        </ScrollViewer>
                        </Grid>

Sample image of two merged datagrids

Scroll viewer is disabling virtualization. I need to have merged cells in some columns of my datagrid. Please let me know of any alternate solution to achieve the same without losing virtualization.

Possible duplicate of [Using virtualization for WPF DataGrid inside ScrollViewer](https://stackoverflow.com/questions/20420457/using-virtualization-for-wpf-datagrid-inside-scrollviewer) — Ramesh Verma, Sep 07 '18 at 11:46

score 1 · Answer 1 · answered Sep 07 '18 at 11:49

1

Virtualization only works if the grid is constrained in size.

If you place DataGrid inside ScrollViewer or StackPanel or any control that does not pass fix constraint to DataGrid it will break the virtualization in DataGrid.

answered Sep 07 '18 at 11:49

Ramesh Verma

111
1
9

Thanks for your response. I am aware that virtualization is getting disabled due to scroll viewer. I am looking for any alternate solution to my problem. I need to have merged cells in first three columns of my datagrids. If you have some solution to achieve same without losing virtualization please let me know. – apurva doshi Sep 10 '18 at 04:37

Ilya Grigoryan · Answer 2 · 2018-09-10T12:45:15.883

0

it will be better if you can give me a little working example, but anyway using ScrollViewer as parent of DataGrid is not a good idea, I think it will be better to override DataGrid and have dependency property for scrollValue, and you should have independent scrollbar and bind this dependency property for both DataGrid to this scrollbar value, in this way you can scroll both DataGrids via code behind while scrollbar value changed, and you virtualization should work.

Hi. I have added code in github, please download it and try https://github.com/Ilya-Grigoryan/SynchDataGridScroll.git

edited Sep 10 '18 at 12:45

answered Sep 07 '18 at 11:43

Ilya Grigoryan

229
1
5

Thanks for your response. I had tried something on the lines of what you explained .I need synchronized scrolling between two datagrids. My two datagrids have different rows heights and when I try to use the offset value in the code behind to scroll both the datagrids scroll out of sync. Can you please provide me some sample code for your solution ? – apurva doshi Sep 10 '18 at 04:32
Sorry what is the problem? if you want to modify feel free no problem. – Ilya Grigoryan Sep 11 '18 at 12:53
Thanks for the sample program. In your sample if I modify the mainwindow.xaml so that I set the row height of datagrid1 to say 40 and of datagrid2 to say 20. I was looking for the rows of both the grids to scroll in sync but it scrolls out of sync. Can you suggest some way I can achieve it? – apurva doshi Sep 11 '18 at 13:07
you should set ScrollViewer.CanContentScroll="True" for DataGrid and SmallChange="1" for ScrollBar. I update githup project you can pull and see – Ilya Grigoryan Sep 11 '18 at 13:18

WPF Datagrid virtualization getting disabled when placed in a scrollviewer

2 Answers2

Linked