Scrolling in a itemscontrol

Question

I have an ItemsControl template which contains another ItemsControl and its template contains a DataGrid.

I want to be able to scroll through the first ItemsControl, therefore I used the ScrollViewer.

The issue is that when the mouse is over any of the 2 ItemsControl scrolling works, but when the mouse is over the DataGrid it doesn't.

Would you know how I can fix this ?

<TabItem Header="Summary">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="5" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <ScrollViewer Grid.Row="1"
                      VerticalScrollBarVisibility="Visible">
            <ItemsControl Grid.Row="1"
                          ItemsSource="{Binding CheckResultViewModels}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <StackPanel Grid.Row="0" Orientation="Horizontal">
                                <TextBlock FontSize="20" FontWeight="ExtraBold">
                                    <Run Text="{Binding CheckResults.Count, Mode=OneWay}" />
                                    <Run>Warnings</Run>
                                </TextBlock>
                            </StackPanel>
                            <ItemsControl Grid.Row="1"
                                          ItemsSource="{Binding CheckResults}">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <Border Margin="5">
                                            <DataGrid HorizontalAlignment="Stretch"
                                                      VerticalAlignment="Stretch"
                                                      HorizontalContentAlignment="Stretch"
                                                      VerticalContentAlignment="Stretch"
                                                      AutoGenerateColumns="True"
                                                      AutoGeneratingColumn="DetailsDataGrid_AutoGeneratingColumn"
                                                      CanUserResizeRows="False"
                                                      IsReadOnly="True"
                                                      ItemsSource="{Binding ErrorData}"/>
                                        </Border>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </Grid>
</TabItem>

Answer 1

DataGrid have ScrollViewer in it's default template. So, when mouse is over DataGrid, scroll event is eaten up by dataGrid's ScrollViewer and thus doesn't bubbles up to parent ScrollViewer.

In case you want outer ScrollViewer to scroll you can hook tunnelling PreviewMouseWheel event and scroll manually:

XAML:

<ScrollViewer Grid.Row="1"
              VerticalScrollBarVisibility="Visible"
              PreviewMouseWheel="ScrollViewer_PreviewMouseWheel">
    <ItemsControl Grid.Row="1"
                  ItemsSource="{Binding CheckResultViewModels}">
        ...........

Code behind:

private void ScrollViewer_PreviewMouseWheel(object sender, 
                                            MouseWheelEventArgs e)
{
    ScrollViewer scrollViewer = (ScrollViewer)sender;
    scrollViewer.ScrollToVerticalOffset(scrollViewer.VerticalOffset - e.Delta);
}