WPF: Cannot scroll in DataGrids

Question

I have an application where I manage a tournament. The view which I have a scrolling issue looks like that: Group Phase View Screenshot

Now I have the problem that I cannot scroll when the mouse is over the DataGrid. As soon as I try to scroll for example on the Expander - it works (but as soon as the mouse then gets over a DataGrid again, the scrolling stops). Also the ScrollViewer itself works as expected, for example when I am trying to scroll with the scrollbar itself.

The view is build as following...

I have a GroupPhaseView that looks like that (this view contains the ScrollViewer):

<UserControl x:Class="TournamentApplication.UI.Tournament.GroupPhase.GroupPhaseView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:groupPhase="clr-namespace:TournamentApplication.UI.Tournament.GroupPhase"
         mc:Ignorable="d" 
         d:DesignHeight="450" d:DesignWidth="800">
<Grid>
    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <ItemsControl ItemsSource="{Binding GroupPhaseCategoryViewModels}">
            <ItemsControl.ItemTemplate>
                <DataTemplate DataType="groupPhase:GroupPhaseCategoryViewModel">
                    <groupPhase:GroupPhaseCategoryView />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Grid>

This GroupPhaseView contains multiple GroupPhaseCategoryView's. One GroupPhaseCategoryView looks like that:

<UserControl x:Class="TournamentApplication.UI.Tournament.GroupPhase.GroupPhaseCategoryView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:groupPhase="clr-namespace:TournamentApplication.UI.Tournament.GroupPhase"
         mc:Ignorable="d" 
         d:DesignHeight="450" d:DesignWidth="800">
<Grid>
    <Expander Header="{Binding Category.Name}" IsExpanded="True">
        <ItemsControl ItemsSource="{Binding GroupPhaseGroupViewModels}">
            <ItemsControl.ItemTemplate>
                <DataTemplate DataType="groupPhase:GroupPhaseGroupViewModel">
                    <groupPhase:GroupPhaseGroupView />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Expander>
</Grid>

This GroupPhaseCategoryView contains multiple GroupPhaseGroupView's. They contain two DataGrid which are leading to the scrolling issue:

<UserControl x:Class="TournamentApplication.UI.Tournament.GroupPhase.GroupPhaseGroupView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="450" d:DesignWidth="800">
<Grid>
    <GroupBox Header="{Binding Group.Name}" ScrollViewer.CanContentScroll="True">
        <Grid ScrollViewer.CanContentScroll="True">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>
            <DataGrid ScrollViewer.CanContentScroll="True" Grid.Row="0" Margin="0,10,0,30" ItemsSource="{Binding GroupGames}" AutoGenerateColumns="False" >
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Zeit" Binding="{Binding StartTime, StringFormat=HH:mm}" IsReadOnly="True"/>
                    <DataGridTextColumn Header="Platz" Binding="{Binding GameFieldName}" IsReadOnly="True"/>
                    <DataGridTextColumn Header="Heim-Team" Binding="{Binding Team1Name}" IsReadOnly="True"/>
                    <DataGridTextColumn Header="Gast-Team" Binding="{Binding Team2Name}" IsReadOnly="True"/>
                    <DataGridTextColumn Header="Heim-Tore" Binding="{Binding GoalsTeam1, Mode=TwoWay, UpdateSourceTrigger=LostFocus}" IsReadOnly="False">
                        <DataGridTextColumn.ElementStyle>
                            <Style TargetType="TextBlock">
                                <Setter Property="HorizontalAlignment" Value="Center" />
                            </Style>
                        </DataGridTextColumn.ElementStyle>
                    </DataGridTextColumn>
                    <DataGridTextColumn Header="Gast-Tore" Binding="{Binding GoalsTeam2, Mode=TwoWay, UpdateSourceTrigger=LostFocus}" IsReadOnly="False">
                        <DataGridTextColumn.ElementStyle>
                            <Style TargetType="TextBlock">
                                <Setter Property="HorizontalAlignment" Value="Center" />
                            </Style>
                        </DataGridTextColumn.ElementStyle>
                    </DataGridTextColumn>
                </DataGrid.Columns>
            </DataGrid>
            <DataGrid Grid.Row="1" ItemsSource="{Binding GroupTeams}" AutoGenerateColumns="False">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="Team" Binding="{Binding Team.Name}" IsReadOnly="True"/>
                    <DataGridTextColumn Header="Spiele" Binding="{Binding PlayedGames.Count}" IsReadOnly="True">
                        <DataGridTextColumn.ElementStyle>
                            <Style TargetType="TextBlock">
                                <Setter Property="HorizontalAlignment" Value="Center" />
                            </Style>
                        </DataGridTextColumn.ElementStyle>
                    </DataGridTextColumn>
                    <DataGridTextColumn Header="Niederlagen" Binding="{Binding LostGamesCount}" IsReadOnly="True">
                        <DataGridTextColumn.ElementStyle>
                            <Style TargetType="TextBlock">
                                <Setter Property="HorizontalAlignment" Value="Center" />
                            </Style>
                        </DataGridTextColumn.ElementStyle>
                    </DataGridTextColumn>
                    <DataGridTextColumn Header="Unentschieden" Binding="{Binding DrawGamesCount}" IsReadOnly="True">
                        <DataGridTextColumn.ElementStyle>
                            <Style TargetType="TextBlock">
                                <Setter Property="HorizontalAlignment" Value="Center" />
                            </Style>
                        </DataGridTextColumn.ElementStyle>
                    </DataGridTextColumn>
                    <DataGridTextColumn Header="Siege" Binding="{Binding WonGamesCount}" IsReadOnly="True">
                        <DataGridTextColumn.ElementStyle>
                            <Style TargetType="TextBlock">
                                <Setter Property="HorizontalAlignment" Value="Center" />
                            </Style>
                        </DataGridTextColumn.ElementStyle>
                    </DataGridTextColumn>
                    <DataGridTextColumn Header="Tore" Binding="{Binding Goals}" IsReadOnly="True">
                        <DataGridTextColumn.ElementStyle>
                            <Style TargetType="TextBlock">
                                <Setter Property="HorizontalAlignment" Value="Center" />
                            </Style>
                        </DataGridTextColumn.ElementStyle>
                    </DataGridTextColumn>
                    <DataGridTextColumn Header="Differenz" Binding="{Binding GoalDifference}" IsReadOnly="True">
                        <DataGridTextColumn.ElementStyle>
                            <Style TargetType="TextBlock">
                                <Setter Property="HorizontalAlignment" Value="Center" />
                            </Style>
                        </DataGridTextColumn.ElementStyle>
                    </DataGridTextColumn>
                    <DataGridTextColumn Header="Punkte" Binding="{Binding Points}" IsReadOnly="True">
                        <DataGridTextColumn.ElementStyle>
                            <Style TargetType="TextBlock">
                                <Setter Property="HorizontalAlignment" Value="Center" />
                            </Style>
                        </DataGridTextColumn.ElementStyle>
                    </DataGridTextColumn>
                </DataGrid.Columns>
            </DataGrid>
        </Grid>
    </GroupBox>
</Grid>

As you see I tried to set the ScrollViewer.CanContentScroll = "true" property in multiple controls to achieve the expected result - but unfortunately without any success...

How woukd someone go about reproducing your issue? I recommend you make it easier for someone to do so. At the moment i think you're relying on someone "just knowing" what's going on. — Andy, Mar 24 '18 at 09:54
Fine, I know what you mean. I will prepare a more general example that the issue is reproducable. Thanks for you input @Andy — C. Hübscher, Mar 24 '18 at 10:20

score 13 · Accepted Answer · answered Mar 24 '18 at 13:09

Your scroll event is handled by the DataGrid, and can thus never reach the ScrollViewer while you are scrolling on the DataGrid. To solve this, tell the data grid to hand over the event to the parent (see here for a similar question):

Subscribe to PreviewMouseWheel on the DataGrid

            <DataGrid PreviewMouseWheel="UIElement_OnPreviewMouseWheel" ScrollViewer.CanContentScroll="True" Grid.Row="0" Margin="40"
                      ItemsSource="{Binding GroupGames}" AutoGenerateColumns="False">

...and in the callback hand the event to the parent:

    private void UIElement_OnPreviewMouseWheel(object sender, MouseWheelEventArgs e)
    {
        if (!e.Handled)
        {
            e.Handled = true;
            var eventArg = new MouseWheelEventArgs(e.MouseDevice, e.Timestamp, e.Delta);
            eventArg.RoutedEvent = MouseWheelEvent;
            eventArg.Source = sender;
            var parent = ((Control)sender).Parent as UIElement;
            parent?.RaiseEvent(eventArg);
        }
    }

More details can also be found [here](https://serialseb.com/blog/2007/09/03/wpf-tips-6-preventing-scrollviewer-from/) (link found in [this post](https://stackoverflow.com/questions/3498686/wpf-remove-scrollviewer-from-treeview)) — MaSiMan, Mar 24 '18 at 13:28
I built it into my solution and it worked - great. Thanks for your support @MaSiMan — C. Hübscher, Mar 26 '18 at 13:44

WPF: Cannot scroll in DataGrids

1 Answers1