如何将Color列表绑定到需要Brush类型的属性？

问题根源 #

核心错误是混淆了WPF和WinUI的命名空间：代码中引用了WPF的System.Windows.Media命名空间下的Color类型，但WinUI（Microsoft.UI.Xaml）的Color和SolidColorBrush属于Microsoft.UI.Xaml.Media命名空间。两种框架下的Color是完全独立的类型，绑定系统无法识别WPF的Color，只能将其转为字符串形式（如#FFF0F8FF），导致转换器或直接绑定失败。

解决方案 #

方案1：直接使用Brush列表（最简单） #

将ColorOptions改为List<Brush>，用WinUI的SolidColorBrush包装颜色值，无需转换器：

修改后的Page.xaml.cs

using Microsoft.UI.Xaml.Media;
// 移除using System.Windows.Media;

public readonly List<Brush> ColorOptions = new()
{
    new SolidColorBrush(Colors.AliceBlue),
    new SolidColorBrush(Colors.Black),
    new SolidColorBrush(Colors.DarkBlue),
    new SolidColorBrush(Colors.Brown),
    new SolidColorBrush(Colors.DarkGreen),
    new SolidColorBrush(Colors.Magenta)
};

Page.xaml保持不变

<GridView ItemsSource="{x:Bind ColorOptions}" IsItemClickEnabled="True" SelectionMode="Single">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Rectangle Fill="{Binding}" Width="40" Height="40" />
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

方案2：使用Color列表+正确的转换器 #

如果需要保留Color类型的列表，需修正转换器和命名空间：

1. 修正转换器的命名空间和类型判断
   BrushConverter.cs

using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Data;
// 移除using System.Windows.Media;

namespace App.Helpers;

public class BrushConverter : IValueConverter
{
    public object? Convert(object value, Type targetType, object parameter, string language)
    {
        // 先判断类型，避免转换异常
        if (value is Color color)
        {
            return new SolidColorBrush(color);
        }
        return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        if (value is SolidColorBrush brush)
        {
            return brush.Color;
        }
        return default(Color);
    }
}

2. 在XAML中声明转换器资源
   在Page根节点添加资源声明（注意添加命名空间引用）：

<Page
    ...
    xmlns:helpers="using:App.Helpers">

    <Page.Resources>
        <helpers:BrushConverter x:Key="BrushConverter"/>
    </Page.Resources>

    <!-- 原GridView代码 -->
    <GridView ItemsSource="{x:Bind ColorOptions}" IsItemClickEnabled="True" SelectionMode="Single">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Rectangle Fill="{Binding Converter={StaticResource BrushConverter}}" Width="40" Height="40" />
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</Page>

3. 修正Color列表的命名空间
   Page.xaml.cs

using Microsoft.UI.Xaml.Media;
// 移除using System.Windows.Media;

public readonly List<Color> ColorOptions = new()
{
    Colors.AliceBlue,
    Colors.Black,
    Colors.DarkBlue,
    Colors.Brown,
    Colors.DarkGreen,
    Colors.Magenta
};

关键说明 #

• WinUI和WPF是两个独立的框架，它们的媒体类型（Color、Brush等）不兼容，必须统一使用对应框架的命名空间。
• 之前的转换器失效，是因为它尝试将WPF的Color强制转换为WinUI的Color，导致类型转换异常，绑定系统 fallback 将Color转为字符串，最终出现你看到的Converter failed to convert value of type '#FFF0F8FF' to type 'Brush'错误。

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