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);
}