MAUI Picker样式定制问题：无法修改背景色及取消按钮位置

一、修改Picker背景色 #

方法1：直接设置基础属性 #

如果目标平台支持直接覆盖样式，可直接在Picker标签中添加BackgroundColor属性：

<Picker x:Name="picker"
        Title="Select a monkey"
        BackgroundColor="#E0E0E0">
  <Picker.ItemsSource>
    <x:Array Type="{x:Type x:String}">
      <x:String>Baboon</x:String>
      <x:String>Capuchin Monkey</x:String>
      <x:String>Blue Monkey</x:String>
      <x:String>Squirrel Monkey</x:String>
      <x:String>Golden Lion Tamarin</x:String>
      <x:String>Howler Monkey</x:String>
      <x:String>Japanese Macaque</x:String>
    </x:Array>
  </Picker.ItemsSource>
</Picker>

方法2：自定义ControlTemplate（全平台统一样式） #

若基础设置被平台原生样式覆盖，可通过ControlTemplate完全自定义Picker外观：

<ContentPage.Resources>
  <!-- 反转布尔值转换器，用于切换标题和选中项显示 -->
  <local:InverseBooleanConverter x:Key="InverseBooleanConverter"/>
  
  <ControlTemplate x:Key="CustomPickerTemplate">
    <Frame BackgroundColor="#E0E0E0"
           CornerRadius="8"
           Padding="10">
      <Grid ColumnDefinitions="*,Auto">
        <!-- 未选中时显示标题 -->
        <Label Text="{TemplateBinding Title}"
               IsVisible="{TemplateBinding IsFocused, Converter={StaticResource InverseBooleanConverter}}"
               TextColor="#666666"/>
        <!-- 选中后显示选项文本 -->
        <Label Text="{TemplateBinding SelectedItem}"
               IsVisible="{TemplateBinding IsFocused}"
               TextColor="#000000"/>
        <!-- 自定义下拉触发按钮 -->
        <Button Grid.Column="1"
                Text="▼"
                TextColor="#000000"
                BackgroundColor="Transparent"
                Command="{TemplateBinding ToggleCommand}"/>
      </Grid>
    </Frame>
  </ControlTemplate>
</ContentPage.Resources>

<!-- 使用自定义模板的Picker -->
<Picker x:Name="picker"
        Title="Select a monkey"
        ControlTemplate="{StaticResource CustomPickerTemplate}">
  <Picker.ItemsSource>
    <x:Array Type="{x:Type x:String}">
      <x:String>Baboon</x:String>
      <x:String>Capuchin Monkey</x:String>
      <x:String>Blue Monkey</x:String>
      <x:String>Squirrel Monkey</x:String>
      <x:String>Golden Lion Tamarin</x:String>
      <x:String>Howler Monkey</x:String>
      <x:String>Japanese Macaque</x:String>
    </x:Array>
  </Picker.ItemsSource>
</Picker>

对应的转换器代码：

namespace YourAppNamespace
{
    public class InverseBooleanConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return !(bool)value;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return !(bool)value;
        }
    }
}

二、调整取消按钮位置 #

Picker的弹出选择框是平台原生控件，需通过平台Handler定制：

Android平台实现 #

在Platforms/Android/Program.cs中添加如下代码：

Microsoft.Maui.Handlers.PickerHandler.Mapper.AppendToMapping("CustomCancelBtnPos", (handler, view) =>
{
    if (handler.PlatformView is Android.Widget.Spinner spinner)
    {
        spinner.Click += (s, e) =>
        {
            // 自定义AlertDialog替代原生弹出
            var alertDialog = new Android.App.AlertDialog.Builder(handler.Context)
                .SetTitle(view.Title)
                .SetItems(view.Items.ToArray(), (dialog, which) =>
                {
                    view.SelectedIndex = which;
                    dialog.Dismiss();
                })
                .SetNegativeButton("取消", (dialog, which) => dialog.Dismiss())
                .Create();

            // 调整取消按钮到左侧
            var negativeBtn = alertDialog.GetButton((int)Android.App.DialogButtonType.Negative);
            var layoutParams = negativeBtn.LayoutParameters as Android.Widget.LinearLayout.LayoutParams;
            layoutParams.Gravity = Android.Views.GravityFlags.Left;
            negativeBtn.LayoutParameters = layoutParams;

            alertDialog.Show();
            spinner.Handled = true; // 阻止原生弹出逻辑
        };
    }
});

iOS平台实现 #

在Platforms/iOS/Program.cs中添加如下代码：

Microsoft.Maui.Handlers.PickerHandler.Mapper.AppendToMapping("CustomCancelBtnPos", (handler, view) =>
{
    if (handler.PlatformView is UIKit.UITextField textField)
    {
        var pickerView = new UIKit.UIPickerView();
        pickerView.DataSource = new PickerDataSource(view.Items);
        pickerView.Delegate = new PickerDelegate(view);
        textField.InputView = pickerView;

        // 自定义工具栏放置取消按钮
        var toolbar = new UIKit.UIToolbar(new CoreGraphics.CGRect(0, 0, UIScreen.MainScreen.Bounds.Width, 44));
        toolbar.BarStyle = UIKit.UIBarStyle.Default;

        var cancelBtn = new UIKit.UIBarButtonItem("取消", UIKit.UIBarButtonItemStyle.Plain, (s, e) =>
        {
            textField.ResignFirstResponder();
        });
        var flexibleSpace = new UIKit.UIBarButtonItem(UIKit.UIBarButtonSystemItem.FlexibleSpace);
        // 将取消按钮放在左侧
        toolbar.SetItems(new[] { cancelBtn, flexibleSpace }, false);
        textField.InputAccessoryView = toolbar;
    }
});

// 辅助类：Picker数据源
public class PickerDataSource : UIKit.UIPickerViewDataSource
{
    private readonly List<string> _items;
    public PickerDataSource(List<string> items) => _items = items;
    public override nint GetComponentCount(UIKit.UIPickerView pickerView) => 1;
    public override nint GetRowsInComponent(UIKit.UIPickerView pickerView, nint component) => _items.Count;
}

// 辅助类：Picker代理
public class PickerDelegate : UIKit.UIPickerViewDelegate
{
    private readonly Picker _mauiPicker;
    public PickerDelegate(Picker mauiPicker) => _mauiPicker = mauiPicker;
    public override string GetTitle(UIKit.UIPickerView pickerView, nint row, nint component)
    {
        return _mauiPicker.Items[(int)row];
    }
    public override void Selected(UIKit.UIPickerView pickerView, nint row, nint component)
    {
        _mauiPicker.SelectedIndex = (int)row;
        pickerView.Superview?.Superview?.ResignFirstResponder();
    }
}

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