UWP中基于MVVM实现ListView多选并绑定选中项问题

问题核心 #

在UWP中采用MVVM模式实现ListView多选时，无法通过绑定直接在ViewModel中获取选中项，现有方案多为代码后置或基于WPF，导致命令实现受阻。需求是选中PDF转换后的BitmapImage页面并执行操作。

现有代码问题分析 #

• View中已通过CommandParameter绑定ListView的SelectedItems，但ViewModel的RelayCommand未正确定义参数类型
• ViewModel的PdfPages是BitmapImage集合，与Model的PdfPageModel脱节，不利于后续操作PDF文档

分步解决方案 #

1. 修正RelayCommand参数类型 #

UWP的ListView.SelectedItems类型为IList<object>，因此需要将RelayCommand的泛型参数指定为IList<object>，并在命令执行方法中接收该参数：

public ObservableCollection<BitmapImage> PdfPages { get; set; }

private ICommand _selectedPagesCommand;
public ICommand SelectedPagesCommand
{
    get
    {
        if (_selectedPagesCommand == null)
        {
            _selectedPagesCommand = new RelayCommand<IList<object>>(async (selectedItems) =>
            {
                // 将选中项转换为BitmapImage集合
                var selectedImages = selectedItems.Cast<BitmapImage>().ToList();
                
                // 执行你的业务操作，比如根据选中页面处理PDF
                foreach (var image in selectedImages)
                {
                    // 后续可关联到对应的PdfPageModel进行操作
                }
            });
        }
        return _selectedPagesCommand;
    }
}

2. 优化Model与ViewModel关联（可选但推荐） #

当前ViewModel直接存放BitmapImage，无法关联到原始的PdfDocument，建议调整Model包含BitmapImage属性，让ViewModel的集合类型与Model匹配：

修正后的Model

public class PdfPageModel
{
    public string Title { get; set; }
    public PdfDocument PdfDoc { get; set; }
    public BitmapImage PageImage { get; set; } // 新增图片属性

    public PdfPageModel(string title, PdfDocument pdfdoc, BitmapImage pageImage)
    {
        Title = title;
        PdfDoc = pdfdoc;
        PageImage = pageImage;
    }
}

修正后的ViewModel

public ObservableCollection<PdfPageModel> PdfPages { get; set; }

private ICommand _selectedPagesCommand;
public ICommand SelectedPagesCommand
{
    get
    {
        if (_selectedPagesCommand == null)
        {
            _selectedPagesCommand = new RelayCommand<IList<object>>(async (selectedItems) =>
            {
                // 直接转换为PdfPageModel集合，方便操作PDF文档
                var selectedPages = selectedItems.Cast<PdfPageModel>().ToList();
                
                foreach (var page in selectedPages)
                {
                    // 可以直接访问page.PdfDoc进行PDF操作（提取、合并等）
                }
            });
        }
        return _selectedPagesCommand;
    }
}

修正后的View ItemTemplate

<ListView.ItemTemplate>
    <DataTemplate x:DataType="local:PdfPageModel">
        <Image Source="{x:Bind PageImage}"/>
    </DataTemplate>
</ListView.ItemTemplate>

3. 确保RelayCommand实现正确 #

如果项目中没有现成的泛型RelayCommand，可使用以下UWP兼容版本：

public class RelayCommand<T> : ICommand
{
    private readonly Action<T> _execute;
    private readonly Func<T, bool> _canExecute;

    public RelayCommand(Action<T> execute) : this(execute, null)
    {
    }

    public RelayCommand(Action<T> execute, Func<T, bool> canExecute)
    {
        _execute = execute ?? throw new ArgumentNullException(nameof(execute));
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter)
    {
        return _canExecute == null || _canExecute((T)parameter);
    }

    public void Execute(object parameter)
    {
        _execute((T)parameter);
    }

    public event EventHandler CanExecuteChanged
    {
        add => CommandManager.RequerySuggested += value;
        remove => CommandManager.RequerySuggested -= value;
    }
}

关键说明 #

• UWP中ListView.SelectedItems无法直接通过双向绑定到ViewModel集合，通过按钮命令传递参数是符合MVVM的可行方案
• 若需要实时监听选中项变化，可通过自定义附加属性或Microsoft.Xaml.Behaviors.Uwp.Managed中的EventTriggerBehavior绑定SelectionChanged事件，将选中项同步到ViewModel

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