WPF DataGrid垂直滚动条显示后新增行需置顶的问题求助

问题场景 #

我是WPF新手，正在开发采用MVVM模式的WPF应用。使用DataGrid时，要求垂直滚动条显示后，新增行插入到DataGrid顶部。目前DataGrid内容已达最大高度，垂直滚动条已显示，但在顶部插入新数据后，DataGrid内容未移动，无法看到顶部的新行，垂直滚动条反而下移。

• 当前场景：滚动条下移，新数据添加在顶部
• 期望场景：新行位于顶部，滚动条同步上移

现有代码 #

数据插入逻辑 #

if (Application.Current != null)
{
    Application.Current.Dispatcher.Invoke((Action)delegate
    {
        _dataModel.SurveyUIValues.Insert(0, surveyUI);
    });
}

集合定义 #

public ObservableCollection<SurveyUI> SurveyUIValues { get; set; }

DataGrid的XAML代码 #

<DataGrid 
            x:Name="dgSurvey"
            AutoGenerateColumns="False"
            HorizontalGridLinesBrush="LightGray"
            HorizontalScrollBarVisibility="Auto"
            IsReadOnly="True"
            ItemsSource="{Binding}"
            VerticalGridLinesBrush="LightGray"
            VerticalScrollBarVisibility="Auto">
            <DataGrid.Columns>
                <DataGridTextColumn
                    Width="25*"
                    Binding="{Binding CurrentDateTime}"
                    Header="Time/Date" />
                <DataGridTextColumn
                    Width="10*"
                    Binding="{Binding Depth}"
                    Header="Depth" />
                <DataGridTextColumn
                    Width="20*"
                    Binding="{Binding Measurement}"
                    Header="Measurement" />
                <DataGridTextColumn
                    Width="25*"
                    Binding="{Binding Value}"
                    Header="Value" />
                <DataGridTextColumn
                    Width="20*"
                    Binding="{Binding DecodedType}"
                    Header="Decoded Type" />
            </DataGrid.Columns>
        </DataGrid>

说明：视图已通过DataContext绑定ViewModel，新行通过线程自动动态添加，使用了MVVM.Toolkit库。

解决方案 #

问题核心是ObservableCollection插入数据后，DataGrid不会自动滚动到顶部，需要手动触发滚动逻辑。以下是两种适配不同场景的实现方式：

方法1：直接通过代码控制滚动（适用于代码后台） #

在插入数据后，调用DataGrid的ScrollIntoView定位到新行，再配合滚动到顶部的操作：

if (Application.Current != null)
{
    Application.Current.Dispatcher.Invoke((Action)delegate
    {
        _dataModel.SurveyUIValues.Insert(0, surveyUI);
        // 滚动到新插入的第一行
        dgSurvey.ScrollIntoView(_dataModel.SurveyUIValues[0]);
        // 确保完全滚动到顶部（部分场景下ScrollIntoView可能无法彻底到顶）
        var scrollViewer = FindVisualChild<ScrollViewer>(dgSurvey);
        scrollViewer?.ScrollToTop();
    });
}

需要添加查找视觉子元素的辅助方法：

public static T FindVisualChild<T>(DependencyObject parent) where T : DependencyObject
{
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
    {
        var child = VisualTreeHelper.GetChild(parent, i);
        if (child is T typedChild)
            return typedChild;
        var childOfChild = FindVisualChild<T>(child);
        if (childOfChild != null)
            return childOfChild;
    }
    return null;
}

方法2：MVVM规范下的行为/附加属性实现 #

避免ViewModel直接操作View控件，使用行为或附加属性实现解耦：

方式A：使用Blend行为

1. 安装NuGet包：Microsoft.Xaml.Behaviors.Wpf
2. 在XAML中添加命名空间：

xmlns:i="http://schemas.microsoft.com/xaml/behaviors"

3. 给DataGrid绑定行为：

<DataGrid 
            x:Name="dgSurvey"
            AutoGenerateColumns="False"
            HorizontalGridLinesBrush="LightGray"
            HorizontalScrollBarVisibility="Auto"
            IsReadOnly="True"
            ItemsSource="{Binding SurveyUIValues}"
            VerticalGridLinesBrush="LightGray"
            VerticalScrollBarVisibility="Auto">
    <i:Interaction.Behaviors>
        <local:ScrollToTopOnNewItemBehavior />
    </i:Interaction.Behaviors>
    <!-- 列定义省略 -->
</DataGrid>

4. 实现自定义行为：

public class ScrollToTopOnNewItemBehavior : Behavior<DataGrid>
{
    private INotifyCollectionChanged _collection;

    protected override void OnAttached()
    {
        base.OnAttached();
        if (AssociatedObject.ItemsSource is INotifyCollectionChanged collection)
        {
            _collection = collection;
            _collection.CollectionChanged += OnCollectionChanged;
        }
    }

    protected override void OnDetaching()
    {
        _collection?.CollectionChanged -= OnCollectionChanged;
        base.OnDetaching();
    }

    private void OnCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        if (e.Action == NotifyCollectionChangedAction.Add && e.NewItems?.Count > 0 && e.NewStartingIndex == 0)
        {
            Application.Current.Dispatcher.BeginInvoke((Action)delegate
            {
                AssociatedObject.ScrollIntoView(e.NewItems[0]);
                var scrollViewer = FindVisualChild<ScrollViewer>(AssociatedObject);
                scrollViewer?.ScrollToTop();
            });
        }
    }
}

方式B：自定义附加属性

创建附加属性绑定集合，自动监听新增项并滚动：

public static class DataGridScrollHelper
{
    public static readonly DependencyProperty AutoScrollToTopOnNewItemProperty =
        DependencyProperty.RegisterAttached(
            "AutoScrollToTopOnNewItem",
            typeof(bool),
            typeof(DataGridScrollHelper),
            new PropertyMetadata(false, OnAutoScrollToTopOnNewItemChanged));

    public static bool GetAutoScrollToTopOnNewItem(DependencyObject obj)
    {
        return (bool)obj.GetValue(AutoScrollToTopOnNewItemProperty);
    }

    public static void SetAutoScrollToTopOnNewItem(DependencyObject obj, bool value)
    {
        obj.SetValue(AutoScrollToTopOnNewItemProperty, value);
    }

    private static void OnAutoScrollToTopOnNewItemChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is DataGrid dataGrid && (bool)e.NewValue)
        {
            if (dataGrid.ItemsSource is INotifyCollectionChanged collection)
            {
                collection.CollectionChanged += (s, args) =>
                {
                    if (args.Action == NotifyCollectionChangedAction.Add && args.NewStartingIndex == 0)
                    {
                        Application.Current.Dispatcher.BeginInvoke((Action)delegate
                        {
                            dataGrid.ScrollIntoView(args.NewItems[0]);
                            var scrollViewer = FindVisualChild<ScrollViewer>(dataGrid);
                            scrollViewer?.ScrollToTop();
                        });
                    }
                };
            }
        }
    }
}

XAML中使用：

<DataGrid 
            x:Name="dgSurvey"
            local:DataGridScrollHelper.AutoScrollToTopOnNewItem="True"
            <!-- 其他属性省略 -->
            >
    <!-- 列定义省略 -->
</DataGrid>

关键注意点 #

• 所有UI操作必须在Dispatcher主线程执行，避免跨线程异常。
• ScrollIntoView定位到新行后，搭配ScrollToTop可以确保完全滚动到DataGrid顶部。
• MVVM模式下优先选择行为或附加属性，保证ViewModel与View的解耦。

内容的提问来源于stack exchange，提问作者Pabitra