.Net maui: How to reference a color in a binding?

Question

So I have a label and I want to set the text colour from a mvvm variable.

VM

[ObservableProperty]
private string col = "White";

XAML

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

So in general TextColor="White" works fine

I've tried using the Color object https://learn.microsoft.com/en-us/dotnet/maui/user-interface/graphics/colors

e.g.

[ObservableProperty]
private Color col = Colors.White;

but I can't get it to work.

I had hoped that a simple string would work...oh for my vain hopes...

Thanks, G.

Edit: I should add that my label is in a CollectionView?

BIG EDIT: IT WORKS for a standalone label i.e.

  [ObservableProperty]
  private Color col = Colors.White;

So the issue is if the label is in a CollectionView. I wonder why?

EDIT: Because the CollectionView is bound to the ItemsSource - doh what a dummy!

Answer 1

Not to detract from the answer already given, but a couple of points to note for people running into this...

1. "Color col = Colors.White" - Color and Colors aren't the same thing, and within "Color" there is System.Drawing.Color and Microsoft.Maui.Graphics.Color, so be careful you're not accidentally mixing types.
2. If you do your UI in C# rather than XAML, then you can just bind directly to a Color to begin with and get rid of all the string-converting.

EDIT: I have since written a blog on how to write your UI in C# Creating MAUI UI's in C#

Answer 2

If you want to bind color(which type is string) to your view, you can use Binding value converters to achieve this.

I created a demo to achieve this , you can refer to the following code:

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";

        });

    }
}

StringToColorConverter.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;
    }
}

A usage:

 <?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>