Getting background color from view model property

Is it possible to get a control’s background color from a property in ViewModel?

The purpose is to be able to change color of Border or Button based on user actions. Because I’m using the MVVM approach, ideally, I simply set the background color of my control through a property in my view model.

I tried the following but it didn’t work:

<Border
   BackgroundColor="{Binding MyBorderBackgroundColor}">
    <Label Text=“Hello World” />
</Border>

In my view model, I use a string property and set it to either a color name such as Red or a Hex value such as #FF0000. I have an Init() method that I call from OnAppearing() and set the value -- see below:

[ObservableProperty]
string myBorderBackgroundColor;
    
...
    
public void Init()
{
   MyBorderBackgroundColor = "Red"; // Or Hex value => MyBorderBackgroundColor = "#FF0000";
}

The app simply ignores the color setting and defaults to page background. No error but just doesn't use the value set through the view model property.

Any suggestions?

Your backing property is a string, while it should be a Color. However, I do understand you would think this works, because in XAML you can simply add a string to it.

Background

To understand why that works in XAML but not code, we'll have to learn about TypeConverter. Since XAML can only contain strings, we have to find a way to convert that string into a type that is actually useable. With a TypeConverter we do just that.

On an object where we expect people to use a string in XAML but still expect the desired outcome we add this attribute, here it is for Color:

[TypeConverter(typeof(Converters.ColorTypeConverter))]
public class Color
{
   /// The class
}

Here is the full implementation of ColorTypeConverter in case you're curious.

This means that when the XAML parser finds this property and the corresponding (string) value, it will invoke that TypeConverter first and that results into the concrete type, in our case Color, to be used.

When you do a binding like you're doing, the TypeConverter is not invoked, and thus we're now binding a string value to a property that expects a Color object and therefore: not working.

The Fix

To fix this, change the backing property to a Color and initialize it as such.

[ObservableProperty]
Color myBorderBackgroundColor;

// ...
    
public void Init()
{
   MyBorderBackgroundColor = Colors.Red; // Or Hex value => MyBorderBackgroundColor = Color.FromArgb("#FF0000");
}

Your XAML contains a small error with no quotes around the binding. Not sure if that is in your actual code, but just to be sure. Make sure there is quotes around the value of BackgroundColor like so:

<Border
   BackgroundColor="{Binding MyBorderBackgroundColor}">
    <Label Text="Hello World" />
</Border>

First of all, you need to make sure that the binding is set up correctly using double quotes:

<Border
   BackgroundColor="{Binding MyBorderBackgroundColor}">
    <Label Text=“Hello World” />
</Border>

Then, I would recommend using the Color type in the ViewModel instead of a string since there is no implicit conversion between those types. That's how I am doing it in my own apps, too.

So, you could change your code to the following and define the color in a variety of different ways (the list is not final):

[ObservableProperty]
string myBorderBackgroundColor;
    
//...
    
public void Init()
{
   // use hex value
   MyBorderBackgroundColor = Color.FromArgb("#FF0000");

   // parse string
   MyBorderBackgroundColor = Color.Parse("Red");

   // use RGB
   MyBorderBackgroundColor = Color.FromRgb(255,0,0);

   // use named color
   MyBorderBackgroundColor = Colors.Red;

   //...
}

You can find more information about Colors in the official documentation.