.NET Maui 7.0 下拉式多选选择器实现方案咨询

针对你的需求（下拉触发、多选、兼容MAUI 7.0），可以参考以下几个可行方案：

方案一：自定义Popup封装多选选择器 #

利用MAUI 7.0原生支持的Popup控件，将带多选功能的CollectionView嵌入其中，通过按钮触发弹出，模拟下拉多选Picker的效果。

步骤1：创建多选Popup #

新建一个MultiSelectPopup.xaml，内容如下：

<?xml version="1.0" encoding="utf-8" ?>
<Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="YourNamespace.MultiSelectPopup"
       Size="300,400">
    <VerticalStackLayout>
        <CollectionView x:Name="SelectionCollectionView"
                        SelectionMode="Multiple"
                        ItemsSource="{Binding Items}"
                        SelectedItems="{Binding SelectedItems}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <HorizontalStackLayout Padding="10">
                        <CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay}"
                                  Margin="0,0,10,0"/>
                        <Label Text="{Binding DisplayText}"
                               VerticalOptions="Center"/>
                    </HorizontalStackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
        <HorizontalStackLayout HorizontalOptions="End" Padding="10">
            <Button Text="取消" Clicked="Cancel_Clicked"/>
            <Button Text="确认" Clicked="Confirm_Clicked" Margin="10,0,0,0"/>
        </HorizontalStackLayout>
    </VerticalStackLayout>
</Popup>

对应的后台代码MultiSelectPopup.xaml.cs：

using Microsoft.Maui.Controls;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace YourNamespace;

public partial class MultiSelectPopup : Popup
{
    public ObservableCollection<SelectableItem> Items { get; set; }
    public ObservableCollection<SelectableItem> SelectedItems { get; set; }
    public event EventHandler<ObservableCollection<SelectableItem>> SelectionConfirmed;

    public MultiSelectPopup(IEnumerable<string> itemList, IEnumerable<string> preselectedItems)
    {
        InitializeComponent();
        Items = new ObservableCollection<SelectableItem>(
            itemList.Select(item => new SelectableItem
            {
                DisplayText = item,
                IsSelected = preselectedItems.Contains(item)
            })
        );
        SelectedItems = new ObservableCollection<SelectableItem>(
            Items.Where(i => i.IsSelected)
        );
        BindingContext = this;
    }

    private void Confirm_Clicked(object sender, EventArgs e)
    {
        SelectionConfirmed?.Invoke(this, SelectedItems);
        Close();
    }

    private void Cancel_Clicked(object sender, EventArgs e)
    {
        Close();
    }
}

// 辅助模型类
public class SelectableItem : INotifyPropertyChanged
{
    private bool _isSelected;
    public string DisplayText { get; set; }

    public bool IsSelected
    {
        get => _isSelected;
        set
        {
            _isSelected = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

步骤2：在主页面使用Popup #

修改主页面的XAML，用按钮替代原来的CollectionView：

<Button Text="选择依赖任务" Clicked="OpenMultiSelectPopup_Clicked"/>
<Label Text="{Binding SelectedTasksSummary}" Margin="10,0"/>

主页面后台代码：

private async void OpenMultiSelectPopup_Clicked(object sender, EventArgs e)
{
    var viewModel = (YourViewModel)BindingContext;
    var popup = new MultiSelectPopup(
        viewModel.DependentTasks,
        viewModel.SelectedDependentTasks
    );
    
    popup.SelectionConfirmed += (s, selectedItems) =>
    {
        viewModel.SelectedDependentTasks.Clear();
        foreach (var item in selectedItems)
        {
            viewModel.SelectedDependentTasks.Add(item.DisplayText);
        }
        viewModel.UpdateSelectedTasksSummary();
    };

    await Shell.Current.ShowPopupAsync(popup);
}

ViewModel中补充对应的属性和方法：

public ObservableCollection<string> DependentTasks { get; set; } = new();
public ObservableCollection<string> SelectedDependentTasks { get; set; } = new();
public string SelectedTasksSummary { get; set; } = "未选择任务";

public void UpdateSelectedTasksSummary()
{
    SelectedTasksSummary = SelectedDependentTasks.Count > 0 
        ? $"已选：{string.Join(", ", SelectedDependentTasks)}" 
        : "未选择任务";
    OnPropertyChanged(nameof(SelectedTasksSummary));
}

方案二：使用兼容MAUI 7.0的第三方控件 #

可以选择支持MAUI 7.0的第三方输入控件，比如Syncfusion.Maui.Inputs中的MultiSelectComboBox，它原生支持下拉多选功能，无需自己封装。你可以通过NuGet搜索安装对应兼容MAUI 7.0的版本，使用方式类似原生Picker，只需绑定数据源和选中项即可。

方案三：自定义可复用下拉多选控件 #

如果需要在多个页面复用，可以将按钮和Popup的逻辑封装成一个ContentView，对外暴露ItemsSource、SelectedItems等绑定属性，进一步简化使用。

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