.NET MAUI如何通过绑定设置CollectionView内Label的TextColor属性

初始实现尝试 #

最开始尝试通过MVVM属性绑定设置Label的文本颜色，先后试了两种写法：

• 字符串类型属性方案
  在ViewModel中定义字符串类型的颜色属性：

[ObservableProperty]
private string col = "White";

对应XAML绑定代码：

<Label Text="{Binding Name}"
       FontSize="20"
       TextColor="{Binding Col}">

直接在XAML中硬编码TextColor="White"是可以正常运行的，最初误以为直接传入字符串格式的颜色名就能完成绑定。

• 强类型Color属性方案
  参考官方Color对象文档说明，将属性改为Color类型：

[ObservableProperty]
private Color col = Colors.White;

测试发现这种写法对页面中独立存在的Label完全生效，但放在CollectionView内部的Label始终无法正常绑定颜色。

问题根因 #

CollectionView绑定ItemsSource属性后，其内部子元素的绑定上下文会默认指向ItemsSource对应的列表中的单个数据项，而非页面级ViewModel。如果颜色属性定义在页面级ViewModel中，内部子元素默认找不到对应绑定路径，就会出现绑定失效的问题。

修复方案 #

• 如果颜色属性定义在页面级ViewModel：显式指定绑定源为页面实例即可。先给页面根节点设置名称，例如x:Name="CurrentPage"，再修改Label的绑定写法：

<Label Text="{Binding Name}"
       FontSize="20"
       TextColor="{Binding BindingContext.Col, Source={x:Reference CurrentPage}}">

• 如果需要根据每个列表项的自身状态显示不同颜色：直接将Color类型的颜色属性定义在列表项对应的Model类中，使用默认绑定即可正常生效。

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