MAUI自定义Picker：FontAwesome图标与文本双字体显示异常排查

针对你遇到的原生Picker无法单条目双字体、Windows自定义Handler后条目无内容显示的问题，以下是具体排查和解决步骤：

1. 确认基础模型与集合配置 #

首先确保数据模型PickerItem是公共属性，且ViewModel中的集合已正确初始化：

// 数据模型
public class PickerItem
{
    public string Icon { get; set; } // 存储FontAwesome Unicode编码，如"\uf007"
    public string Text { get; set; }
}

// ViewModel中的集合
public ObservableCollection<PickerItem> PickerItems { get; } = new()
{
    new PickerItem { Icon = "\uf007", Text = "用户" },
    new PickerItem { Icon = "\uf015", Text = "首页" },
    // 其他条目
};

2. 修复Windows平台自定义Handler #

重新实现Windows平台的Picker Handler，确保ItemTemplate正确绑定属性并设置字体：

using Microsoft.Maui.Handlers;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Data;

namespace YourApp.Platforms.Windows;

public class CustomPickerHandler : PickerHandler
{
    protected override void ConnectHandler(PickerComboBox platformView)
    {
        base.ConnectHandler(platformView);
        
        var dataTemplate = new Microsoft.UI.Xaml.DataTemplate(() =>
        {
            var stackPanel = new StackPanel
            {
                Orientation = Microsoft.UI.Xaml.Controls.Orientation.Horizontal,
                Spacing = 8
            };

            // FontAwesome图标文本块
            var iconTextBlock = new TextBlock
            {
                FontFamily = new Microsoft.UI.Xaml.Media.FontFamily("ms-appx:///Assets/Fonts/FontAwesome6Free-Solid.otf#Font Awesome 6 Free Solid"),
                FontSize = 16
            };
            iconTextBlock.SetBinding(TextBlock.TextProperty, new Binding { Path = new PropertyPath("Icon") });

            // 普通文本块
            var textTextBlock = new TextBlock
            {
                FontFamily = new Microsoft.UI.Xaml.Media.FontFamily("Segoe UI"),
                FontSize = 16
            };
            textTextBlock.SetBinding(TextBlock.TextProperty, new Binding { Path = new PropertyPath("Text") });

            stackPanel.Children.Add(iconTextBlock);
            stackPanel.Children.Add(textTextBlock);
            return stackPanel;
        });

        platformView.ItemTemplate = dataTemplate;
    }
}

在MauiProgram.cs中注册该Handler：

builder.ConfigureMauiHandlers(handlers =>
{
#if WINDOWS
    handlers.AddHandler<Picker, CustomPickerHandler>();
#endif
});

3. 正确配置XAML中的Picker与x:DataType #

确保XAML中x:DataType的命名空间正确指向PickerItem所在的程序集，同时绑定上下文设置正常：

<!-- 先声明命名空间，替换为你的模型所在命名空间 -->
xmlns:local="clr-namespace:YourApp.Models"

<Picker ItemsSource="{Binding PickerItems}"
        SelectedItem="{Binding SelectedPickerItem}">
    <Picker.ItemTemplate>
        <DataTemplate x:DataType="local:PickerItem">
            <HorizontalStackLayout Spacing="8">
                <Label Text="{Binding Icon}"
                       FontFamily="FontAwesome"
                       FontSize="16"/>
                <Label Text="{Binding Text}"
                       FontSize="16"/>
            </HorizontalStackLayout>
        </DataTemplate>
    </Picker.ItemTemplate>
</Picker>

4. 排查条目无内容显示的核心原因 #

如果仍无内容，检查以下几点：

• x:DataType命名空间错误：确认local前缀对应的命名空间与PickerItem所在命名空间完全一致
• 属性访问权限：PickerItem的Icon和Text必须是公共get属性
• FontAwesome字体注册：确保字体文件已放入Resources/Fonts目录，并在MauiProgram.cs中注册：

  builder.ConfigureFonts(fonts =>
  {
      fonts.AddFont("FontAwesome6Free-Solid.otf", "FontAwesome");
  });
  

• BindingContext设置：页面的BindingContext已正确关联到ViewModel，确保PickerItems集合不为空

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