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

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

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>

Answer 2

Not to detract from the answer already given, but a couple of points to note for people running into this...
"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.
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.