如何在MAUI.NET中通过AppendToMapping自定义Windows端Picker下拉框？

问题背景 #

已通过AppendToMapping成功修改MAUI Picker主控件的背景色，但需要进一步自定义Windows端点击Picker后弹出的下拉列表样式，包括：

• 设置下拉列表的背景色、圆角、阴影、边框
• 调整下拉列表的位置偏移
• 禁用选中项的系统主题色

尝试过查看WinUI 3.0的ComboBox结构、遍历VisualTree，但无法通过控件对象访问下拉元素，需要知道如何获取并修改该下拉元素。

现有代码 #

MauiProgram.cs #

Microsoft.Maui.Handlers.ElementHandler.ElementMapper.AppendToMapping("Classic", (handler, view) =>
{
    if (view is myPicker)
    {
        EntryMapper.Map(handler, view);
    }
});

自定义Picker控件 #

public class myPicker : Picker
{
    // 注意：原代码中BindableProperty的owner类型写错，已修正为typeof(myPicker)
    public static BindableProperty PopupBackgroundColorProperty = BindableProperty.Create(
        nameof(PopupBackgroundColor), 
        typeof(Color), 
        typeof(myPicker), 
        Color.FromRgba(0, 0, 0, 0));
        
    public Color PopupBackgroundColor
    {
        get => (Color)GetValue(PopupBackgroundColorProperty);
        set => SetValue(PopupBackgroundColorProperty, value);
    }
}

XAML声明 #

<uiUtilities:myPicker PopupBackgroundColor="Blue"/>

EntryMapper代码 #

public static class EntryMapper
{
    public static void Map(IElementHandler handler, IElement view)
    {
        if(view is myPicker)
        {
            var casted = (PickerHandler)handler;
            var view2 = (myPicker)view;
            view2.BackgroundColor = view2.PopupBackgroundColor; // 测试生效
            // 实际需修改下拉框样式
        }
    }
}

解决方法 #

MAUI的Picker在Windows端映射为WinUI 3的ComboBox，其下拉列表通过Flyout实现。我们可以通过监听DropDownOpened事件，在下拉列表打开后获取对应的FlyoutPresenter修改样式，同时自定义ComboBoxItem的样式来禁用系统选中主题色。

修改后的EntryMapper.Map方法如下：

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Media.Animation;
using Windows.UI;

public static class EntryMapper
{
    public static void Map(IElementHandler handler, IElement view)
    {
        if (view is not myPicker pickerView || handler is not PickerHandler pickerHandler)
            return;

        var comboBox = pickerHandler.PlatformView as ComboBox;
        if (comboBox == null)
            return;

        // 监听下拉打开事件
        comboBox.DropDownOpened += ComboBox_DropDownOpened;

        void ComboBox_DropDownOpened(object sender, RoutedEventArgs e)
        {
            var currentComboBox = sender as ComboBox;
            if (currentComboBox == null)
                return;

            // 获取下拉列表的FlyoutPresenter
            var flyoutPresenter = FindVisualChild<FlyoutPresenter>(currentComboBox);
            if (flyoutPresenter != null)
            {
                // 设置背景色
                flyoutPresenter.Background = pickerView.PopupBackgroundColor.ToWindowsColor();
                // 设置圆角
                flyoutPresenter.CornerRadius = new CornerRadius(8);
                // 设置边框
                flyoutPresenter.BorderBrush = Colors.DarkGray;
                flyoutPresenter.BorderThickness = new Thickness(1);
                // 添加阴影
                var dropShadow = new DropShadow
                {
                    BlurRadius = 12,
                    Offset = new Vector3(0, 4, 0),
                    Color = Colors.Gray,
                    Opacity = 0.7
                };
                ElementCompositionPreview.SetElementShadow(flyoutPresenter, dropShadow);
                // 调整位置偏移（向下偏移5px）
                if (currentComboBox.Flyout is Flyout flyout)
                {
                    flyout.VerticalOffset = 5;
                }
            }

            // 自定义ComboBoxItem样式，禁用系统选中主题色
            foreach (var item in currentComboBox.Items)
            {
                var itemContainer = currentComboBox.ItemContainerGenerator.ContainerFromItem(item) as ComboBoxItem;
                if (itemContainer != null)
                {
                    itemContainer.Style = CreateCustomComboBoxItemStyle(currentComboBox.XamlRoot);
                }
            }
        }
    }

    // 遍历VisualTree查找子元素
    private static T FindVisualChild<T>(DependencyObject parent) where T : DependencyObject
    {
        for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
        {
            var child = VisualTreeHelper.GetChild(parent, i);
            if (child is T typedChild)
                return typedChild;
            var result = FindVisualChild<T>(child);
            if (result != null)
                return result;
        }
        return null;
    }

    // 创建自定义ComboBoxItem样式
    private static Style CreateCustomComboBoxItemStyle(XamlRoot xamlRoot)
    {
        var style = new Style(typeof(ComboBoxItem))
        {
            Setters =
            {
                // 正常状态背景
                new Setter(ComboBoxItem.BackgroundProperty, new SolidColorBrush(Colors.White)),
                // 正常状态前景
                new Setter(ComboBoxItem.ForegroundProperty, new SolidColorBrush(Colors.Black)),
                // 选中状态背景
                new Setter(ComboBoxItem.SelectedBackgroundProperty, new SolidColorBrush(Colors.LightBlue)),
                // 选中状态前景
                new Setter(ComboBoxItem.SelectedForegroundProperty, new SolidColorBrush(Colors.Black)),
                // 悬停状态背景
                new Setter(ComboBoxItem.HoverBackgroundProperty, new SolidColorBrush(Colors.LightGray)),
                // 禁用系统默认的选中高亮动画
                new Setter(ComboBoxItem.UseSystemFocusVisualsProperty, false)
            }
        };
        return style;
    }
}

注意事项 #

1. 确保项目中引用了Microsoft.UI.Xaml相关命名空间
2. 下拉列表的位置偏移可通过Flyout.VerticalOffset和HorizontalOffset自由调整
3. 自定义ComboBoxItem样式时，可根据需求修改各状态的颜色值

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