WPF - DataGrid nested in Expander no scrolling datagrid content

Question

I have Expander with nested DataGrid on WPF application - it creates usercontrols. I create this control on codebehind for each element from data (from database) list. Finally, I have the list where each element is Expadned with nested DataGrid. When i develop the item I see DataDrid, but when I will develop many components I must scroll the content. When the cursor there is on the expander, the element scroll works but when I mouse hover the DataGrid, the scroll doesn't work.

Sample code:

<ScrollViewer HorizontalAlignment="Left">
<DockPanel>
      <Expander x:Name="Expander1" Expanded="Expander1_Expanded">
        <Expander.Content>
            <DataGrid x:Name="DataGrid1" MouseLeftButtonUp="DataGrid1_MouseLeftButtonDown"  ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden" >        
                <DataGrid.CellStyle>
                    <Style TargetType="DataGridCell">
                        <Setter Property="BorderThickness" Value="0"/>
                    </Style>
                </DataGrid.CellStyle>
                <DataGrid.Columns>
                    <DataGridTextColumn Header="name1" Binding="{Binding Name}" IsReadOnly="True" />
                    <DataGridTextColumn Header="name2" Binding="{Binding Value}" IsReadOnly="True"/>
                    <DataGridTextColumn Header="name3" Binding="{Binding UnitName}" IsReadOnly="True"/>
                </DataGrid.Columns>
            </DataGrid>
        </Expander.Content>
        <Expander.Style>
            <Style TargetType="Expander">
                <Setter Property="IsExpanded" Value="False" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsExpanded, RelativeSource={RelativeSource Self}}" Value="True">
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Expander.Style>
    </Expander>

// and mor expander, added from codebehind 

</DockPanel>
</ScrollViewer>

Finally grid:

When mouse is where green ring scroll to the right works

Answer 1

This happens since the DataGrid itself may contain a ScrollViewer, which will appear when you have more items than what fits within a given height. In those cases, you will want to allow the DataGrid to attempt to handle the scroll event first, and if it doesn't know what to do about it, for instance when you are trying to scroll down while already at the bottom, pass the scroll event along to its parent.

Now, it looks like your DataGrids are not actually scrollable which means that the following might be a bit overkill, but a general solution which achieves the above is obtained by introducing the following modification to the mouse wheel handler:

/// <summary>
/// Helper for allowing scroll events to pass from a <see cref="DataGrid"/> to its parent.
/// This ensures that a "scroll down" event occurring at an already scrolled-down
/// <see cref="DataGrid"/> will be passed on to its parent, which might be able to handle
/// it instead.
/// </summary>
public class DataGridScrollCorrector
{
    public static bool GetFixScrolling(DependencyObject obj) =>
        (bool)obj.GetValue(FixScrollingProperty);

    public static void SetFixScrolling(DependencyObject obj, bool value) =>
        obj.SetValue(FixScrollingProperty, value);

    public static readonly DependencyProperty FixScrollingProperty =
        DependencyProperty.RegisterAttached("FixScrolling", typeof(bool), typeof(DataGridScrollCorrector), new FrameworkPropertyMetadata(false, OnFixScrollingPropertyChanged));

    private static void OnFixScrollingPropertyChanged(object sender, DependencyPropertyChangedEventArgs e)
    {
        var grid = sender as DataGrid;
        if (grid == null)
            throw new ArgumentException("The dependency property can only be attached to a DataGrid", nameof(sender));
        if ((bool)e.NewValue)
            grid.PreviewMouseWheel += HandlePreviewMouseWheel;
        else
            grid.PreviewMouseWheel -= HandlePreviewMouseWheel;
    }

    /// <summary>
    /// Finds the first child of a given type in a given <see cref="DependencyObject"/>.
    /// </summary>
    /// <typeparam name="T">The type of the child to search for.</typeparam>
    /// <param name="depObj">The object whose children we are interested in.</param>
    /// <returns>The child object.</returns>
    private static T FindVisualChild<T>(DependencyObject depObj) where T : DependencyObject
    {
        if (depObj == null) return null;
        for (var i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
        {
            DependencyObject child = VisualTreeHelper.GetChild(depObj, i);
            var visualChild = child as T;
            if (visualChild != null) return visualChild;

            var childItem = FindVisualChild<T>(child);
            if (childItem != null) return childItem;
        }
        return null;
    }

    /// <summary>
    /// Attempts to scroll the <see cref="ScrollViewer"/> in the <see cref="DataGrid"/>.
    /// If no scrolling occurs, pass the event to a parent.
    /// </summary>
    private static void HandlePreviewMouseWheel(object sender, MouseWheelEventArgs e)
    {
        var grid = sender as DataGrid;
        var viewer = FindVisualChild<ScrollViewer>(grid);

        if (viewer != null)
        {
            // We listen on changes to the ScrollViewer's scroll offset; if that changes
            // we can consider our event handled. In case the ScrollChanged event is never
            // raised, we take this to mean that we are at the top/bottom of our scroll viewer,
            // in which case we provide the event to our parent.
            ScrollChangedEventHandler handler = (senderScroll, eScroll) =>
                e.Handled = true;

            viewer.ScrollChanged += handler;
            // Scroll +/- 3 rows depending on whether we are scrolling up or down. The
            // forced layout update is necessary to ensure that the event is called
            // immediately (as opposed to after some small delay).
            double oldOffset = viewer.VerticalOffset;
            double offsetDelta = e.Delta > 0 ? -3 : 3;
            viewer.ScrollToVerticalOffset(oldOffset + offsetDelta);
            viewer.UpdateLayout();
            viewer.ScrollChanged -= handler;
        }

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

Here, the hardcoded 3 is the number of rows to scroll in the DataGrid. You would then apply this corrector to all relevant DataGrids. For instance, to use it on all grids in the application, you could add it to your Application.Resources in App.xaml as follows:

<Application x:Class="WpfApplication1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfApplication1"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style TargetType="DataGrid">
            <Setter Property="local:DataGridScrollCorrector.FixScrolling" Value="True" />
        </Style>
    </Application.Resources>
</Application>

Credit: This solution is somewhat based on/inspired by the one mentioned in this blog post but it restricts its function to DataGrid (since in my experience, it will otherwise break a bunch of other controls that aren't prepared to tunnel their events).