如何在WinUI Template Studio的MVVM模式下从ViewModel自动滚动DataGrid

核心思路 #

MVVM的核心是视图与业务逻辑完全分离，ViewModel不能直接操作UI控件（比如DataGrid的滚动方法）。我们需要通过「绑定属性+视图层响应属性变化」的方式实现需求：

1. ViewModel负责管理数据集合、处理业务逻辑，并暴露「当前处理项」的绑定属性
2. 视图层监听该属性的变化，触发DataGrid的滚动操作

步骤1：ViewModel实现（业务逻辑与状态管理） #

使用WinUI Template Studio默认的ObservableObject（来自Microsoft.Toolkit.Mvvm）实现属性通知，用AsyncRelayCommand处理异步命令避免UI阻塞：

using Microsoft.Toolkit.Mvvm.ComponentModel;
using Microsoft.Toolkit.Mvvm.Input;
using System.Collections.ObjectModel;
using System.Threading.Tasks;

public class MainViewModel : ObservableObject
{
    // 绑定到DataGrid的数据源
    public ObservableCollection<DataItem> Items { get; } = new();

    // 当前处理完成的项，用于通知视图滚动
    private DataItem _currentProcessedItem;
    public DataItem CurrentProcessedItem
    {
        get => _currentProcessedItem;
        set => SetProperty(ref _currentProcessedItem, value);
    }

    // 处理状态，用于禁用按钮避免重复触发
    private bool _isProcessing;
    public bool IsProcessing
    {
        get => _isProcessing;
        set => SetProperty(ref _isProcessing, value);
    }

    // 处理命令
    public AsyncRelayCommand ProcessItemsCommand { get; }

    public MainViewModel()
    {
        ProcessItemsCommand = new AsyncRelayCommand(ProcessItemsAsync);
        // 初始化测试数据
        for (int i = 0; i < 50; i++)
        {
            Items.Add(new DataItem { Id = i, Name = $"Item {i}" });
        }
    }

    private async Task ProcessItemsAsync()
    {
        if (IsProcessing) return;
        IsProcessing = true;

        foreach (var item in Items)
        {
            // 替换为你的实际业务处理逻辑
            await Task.Delay(500);
            item.IsProcessed = true;
            
            // 更新当前处理项，通知视图滚动
            CurrentProcessedItem = item;
            // 给UI留足响应时间（避免滚动不生效）
            await Task.Delay(100);
        }

        IsProcessing = false;
    }
}

// 数据实体类，实现属性通知
public class DataItem : ObservableObject
{
    public int Id { get; set; }
    public string Name { get; set; }

    private bool _isProcessed;
    public bool IsProcessed
    {
        get => _isProcessed;
        set => SetProperty(ref _isProcessed, value);
    }
}

步骤2：视图层实现（响应滚动） #

在页面的代码后台监听ViewModel的CurrentProcessedItem属性变化，触发DataGrid的滚动操作（确保在UI线程执行）：

using Microsoft.UI.Xaml.Controls;

public sealed partial class MainPage : Page
{
    public MainViewModel ViewModel { get; }

    public MainPage()
    {
        InitializeComponent();
        ViewModel = App.GetService<MainViewModel>();
        // 监听属性变化
        ViewModel.PropertyChanged += ViewModel_PropertyChanged;
    }

    private void ViewModel_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(ViewModel.CurrentProcessedItem))
        {
            if (ViewModel.CurrentProcessedItem != null)
            {
                // 确保在UI线程执行滚动操作
                DispatcherQueue.TryEnqueue(() =>
                {
                    MyDataGrid.ScrollIntoView(ViewModel.CurrentProcessedItem, null);
                });
            }
        }
    }
}

对应的XAML布局：

<Page
    x:Class="YourAppNamespace.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid>
        <StackPanel>
            <Button Content="开始处理" 
                    Command="{x:Bind ViewModel.ProcessItemsCommand}" 
                    IsEnabled="{x:Bind !ViewModel.IsProcessing, Mode=OneWay}"/>
            <DataGrid x:Name="MyDataGrid"
                      ItemsSource="{x:Bind ViewModel.Items, Mode=OneWay}"
                      AutoGenerateColumns="False"
                      Height="400">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="ID" Binding="{Binding Id}"/>
                    <DataGridTextColumn Header="名称" Binding="{Binding Name}"/>
                    <DataGridCheckBoxColumn Header="已处理" Binding="{Binding IsProcessed}"/>
                </DataGrid.Columns>
            </DataGrid>
        </StackPanel>
    </Grid>
</Page>

进阶优化（无代码后台的纯绑定方案） #

如果不想在代码后台写监听逻辑，可以用WinUI行为库（Microsoft.Xaml.Behaviors.WinUI）实现纯绑定的滚动行为：

1. 安装NuGet包：Microsoft.Xaml.Behaviors.WinUI.Managed
2. 自定义行为类：

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.Xaml.Behaviors;

public class ScrollToItemBehavior : Behavior<DataGrid>
{
    public static readonly DependencyProperty TargetItemProperty =
        DependencyProperty.Register(nameof(TargetItem), typeof(object), typeof(ScrollToItemBehavior),
            new PropertyMetadata(null, OnTargetItemChanged));

    public object TargetItem
    {
        get => GetValue(TargetItemProperty);
        set => SetValue(TargetItemProperty, value);
    }

    private static void OnTargetItemChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var behavior = (ScrollToItemBehavior)d;
        if (behavior.AssociatedObject != null && e.NewValue != null)
        {
            behavior.AssociatedObject.ScrollIntoView(e.NewValue, null);
        }
    }
}

3. 在XAML中使用行为：

<DataGrid x:Name="MyDataGrid"
          ItemsSource="{x:Bind ViewModel.Items, Mode=OneWay}"
          AutoGenerateColumns="False">
    <interactivity:Interaction.Behaviors>
        <local:ScrollToItemBehavior TargetItem="{x:Bind ViewModel.CurrentProcessedItem, Mode=OneWay}"/>
    </interactivity:Interaction.Behaviors>
    <!-- 列定义省略 -->
</DataGrid>

MVVM规则遵守要点 #

• ViewModel绝对不能引用任何UI控件，所有UI操作必须由视图层触发
• 用ObservableObject实现属性通知，确保视图能感知状态变化
• 异步逻辑必须用AsyncRelayCommand处理，避免阻塞UI线程
• 涉及UI的操作（如滚动）必须通过DispatcherQueue切换到UI线程执行

内容的提问来源于stack exchange，提问作者Maks V. Zaikin