.NET MAUI如何将Picker直接嵌入页面布局而非弹窗/下拉框？

默认的Picker控件确实只提供弹窗/下拉框样式，要实现直接嵌入页面的选择效果，完全可以做到，不一定非要从零自定义，下面是两种实用方案：

方案一：用CollectionView实现嵌入型选择组件 #

这是最通用、跨平台一致性最好的方案，灵活度高，能自定义任意布局（横向、纵向、网格等）。

示例代码 #

XAML部分

<StackLayout>
    <!-- 显示当前选中项 -->
    <Label Text="{Binding SelectedItem}" Margin="10" />
    
    <!-- 嵌入页面的选择列表 -->
    <CollectionView 
        ItemsSource="{Binding Items}"
        SelectedItem="{Binding SelectedItem}"
        SelectionMode="Single">
        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Horizontal" />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Frame 
                    Margin="5" 
                    BackgroundColor="{Binding IsSelected, Converter={StaticResource BoolToColorConverter}, FallbackValue=LightGray}"
                    Padding="15,8">
                    <Label Text="{Binding .}" />
                </Frame>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</StackLayout>

ViewModel部分（简化版）

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;

public class MainViewModel : INotifyPropertyChanged
{
    public ObservableCollection<string> Items { get; set; } = new()
    {
        "选项1", "选项2", "选项3", "选项4"
    };

    private string _selectedItem;
    public string SelectedItem
    {
        get => _selectedItem;
        set
        {
            _selectedItem = value;
            OnPropertyChanged();
        }
    }

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

辅助转换器（可选，用于高亮选中项）

using System.Globalization;
using Microsoft.Maui.Controls;

public class BoolToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? Colors.Blue : Colors.LightGray;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

这种方式完全替代了Picker的选择逻辑，用户可以直接在页面上点击选项完成选择，样式和布局完全可控。

方案二：通过Handler修改原生Picker的显示行为（平台特定） #

如果想基于原生Picker改造，可通过MAUI的Handler修改平台原生控件的属性，但这种方式跨平台一致性差，需要针对不同平台单独处理：

Android平台示例 #

修改Android端的Picker Handler，将原生Spinner的显示模式改为嵌入页面的下拉框：

using Microsoft.Maui.Handlers;
using Microsoft.Maui.Controls.Platform;

public static class PickerHandlerExtensions
{
    public static void UseEmbeddedPicker(this IMauiHandlersCollection handlers)
    {
        handlers.AddHandler<Picker, PickerHandler>();
        PickerHandler.Mapper.AppendToMapping("EmbeddedPicker", (handler, view) =>
        {
            if (handler.PlatformView is Android.Widget.Spinner spinner)
            {
                // 设置为嵌入页面的下拉模式（而非弹窗）
                spinner.SetPopupBackgroundResource(Android.Resource.Color.White);
                spinner.SetDropDownVerticalOffset(0);
            }
        });
    }
}

然后在MauiProgram.cs中注册：

builder.ConfigureMauiHandlers(handlers =>
{
    handlers.UseEmbeddedPicker();
});

不过这种方式在iOS平台需要单独修改UIPickerView的显示逻辑，复杂度较高，不如CollectionView方案省心。

总结 #

如果需要跨平台一致的嵌入效果，优先选择CollectionView方案，实现简单、样式灵活；如果必须基于原生Picker改造，再考虑Handler的平台特定修改。

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