.Net maui：如何在绑定中引用颜色？

Question

所以我有一个标签，我想从 mvvm 变量设置文本颜色。

虚拟机

[ObservableProperty]
private string col = "White";

XAML

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

所以一般来说 TextColor="White" 效果很好

我尝试过使用 Color 对象 https://learn.microsoft.com/en-us/dotnet/maui/user-interface/graphics/colors

例如

[ObservableProperty]
private Color col = Colors.White;

但我无法让它发挥作用。

我曾希望一个简单的字符串能够工作......哦，我徒劳的希望......

谢谢，G。

编辑：我应该补充一点，我的标签位于 CollectionView 中？

大编辑：它适用于独立标签，即

  [ObservableProperty]
  private Color col = Colors.White;

所以问题是标签是否在 CollectionView 中。我想知道为什么？

编辑：因为 CollectionView 绑定到 ItemsSource - 啊，真是个假人！

Answer 1

如果您想将颜色（类型为string）绑定到您的视图，您可以使用绑定值转换器来实现此目的。

我创建了一个demo来实现这一点，你可以参考以下代码：

MyModel.cs

public class MyModel: INotifyPropertyChanged
{
    string name;
    public string Name
    {
        set
        {
            if (name != value)
            {
                name = value;
                OnPropertyChanged("Name");

            }
        }
        get
        {
            return name;
        }
    }


    string _value;
    public string Value
    {
        set
        {
            if (_value != value)
            {
                _value = value;
                OnPropertyChanged("Value");

            }
        }
        get
        {
            return _value;
        }
    }

    private string _textColor = "Green";
    public string TextColor
    {
        get { return _textColor; }
        set
        {
            _textColor = value;

            OnPropertyChanged("TextColor");

        }
    }


    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

MyViewModel.cs

public class MyViewModel
{
    public ObservableCollection<MyModel> dataList { get; set; }

    public ICommand ColorChangeCommand { protected set; get; }
    public MyViewModel()
    {
        dataList = new ObservableCollection<MyModel>();
        dataList.Add(new MyModel() { Name = "test1", Value = "1" });
        dataList.Add(new MyModel() { Name = "test2", Value = "2" });
        dataList.Add(new MyModel() { Name = "test3", Value = "3" });
        ColorChangeCommand = new Command<MyModel>(async (key) =>
        {
            key.TextColor = "Red";

        });

    }
}

字符串到颜色转换器.cs

public class StringToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var color = value.ToString();
        switch (color)
        {
            case "Green":
                return Colors.Green;
            case "Red":
                return Colors.Red;
            default:
                return Colors.Yellow;
        }
    }

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

一用法：

 <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp0706.Tab1"
             xmlns:local="clr-namespace:MauiApp0706" 
             Title="Tab1">

    <ContentPage.Resources>
        <ResourceDictionary>
            <local:StringToColorConverter x:Key="ColorConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>
    <VerticalStackLayout>
        <CollectionView
             ItemsSource="{Binding dataList}"
             x:Name="mylistview"
             >
            <CollectionView.ItemTemplate>
                <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Grid Column="0">
                            <Label Text="{Binding Name}" TextColor="{Binding TextColor, Converter = {StaticResource ColorConverter}}"/>
                            </Grid>
                            <Grid Column="1">
                            <Label Text="{Binding Value}" TextColor="{Binding TextColor, Converter = {StaticResource ColorConverter}}"/>
                            </Grid>
                            <Grid Column="2">
                                <Button Text="change" Command="{Binding BindingContext.ColorChangeCommand, Source={x:Reference Name=mylistview} }"  CommandParameter="{Binding .}"></Button>
                            </Grid>

                        </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </VerticalStackLayout>
</ContentPage>