Set the background color based on the data-bound value

Question

I saw the answers before, but nothing helped me.

I also have a DecideModel class (This will be a dataset retrieved from the database, but for this question I added an ObservableCollection) which contains

 static DecideModel() { All = new ObservableCollection<DecideModel> { new DecideModel { DatePerformed = new DateTime(2015, 4, 06), Result = "Maybe" }, new DecideModel { DatePerformed = new DateTime(2015, 4, 05), Result = "No" }, new DecideModel { DatePerformed = new DateTime(2015, 4, 04), Result = "Yes" } }; } public DateTime DatePerformed { set; get; } public string Result { set; get; } public static IList<DecideModel> All { set; get; } } 

In my XAML code, I have

 <ContentPage.Resources> <ResourceDictionary> <Color x:Key="Maybe">#ffddbc21</Color> <Color x:Key="Yes">#3CB371</Color> <Color x:Key="No">#B22222</Color> <Color x:Key="Depends">#ffd78800</Color> </ResourceDictionary> </ContentPage.Resources> <Label Text="{Binding Result}" HorizontalOptions="FillAndExpand" BackgroundColor="{StaticResource {BindingSource Result}}" /> 

I am trying to dynamically set the background color of the label with respect to what result I got from the object.

Please let me know if you have ideas on how to do this. I am looking for any useful option.

Answer 1

You might need a ValueConverter . Now you set the background color to “Possible,” “No,” or “Yes,” which is clearly not a color.

What you need to do is convert this value to color. You can do it like this.

Create a new class that implements the IValueConverter interface. It probably looks something like this:

 public class YesNoMaybeToColorConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { switch(value.ToString().ToLower()) { case "yes": return Color.Green; case "no": return Color.Red; case "maybe": return Color.Orange; } return Color.Gray; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { // You probably don't need this, this is used to convert the other way around // so from color to yes no or maybe throw new NotImplementedException(); } } 

Then add this class as a static resource to your XAML page as follows:

 <ContentPage.Resources> <!-- Add this line below --> <local:YesNoToBooleanConverter x:Key="YesNoMaybeToColorConverter" /> <!-- You can remove the underneath --> <!--<ResourceDictionary> <Color x:Key="Maybe">#ffddbc21</Color> <Color x:Key="Yes">#3CB371</Color> <Color x:Key="No">#B22222</Color> <Color x:Key="Depends">#ffd78800</Color> </ResourceDictionary>--> </ContentPage.Resources> 

Now in your binding you have to tell him which converter to use. Do it like this:

 <Label Text="{Binding Result}" HorizontalOptions="FillAndExpand" BackgroundColor="{Binding Result, Converter={StaticResource YesNoMaybeToColorConverter}}" /> 

Now he should see the value in the Result field, put it through the converter you specified and return the color that matches your value.