Set background color depending on data-bound value

Question

I've seen some answers before but nothing really helped me out.

I also have a class DecideModel (This will be a dataset retrieved from DB, but for purpose of this question, I have 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 have obtained from the Object.

Please let me know if you have any idea on how to do it. I am looking for any useful option available.

Answer 1

For a pure XAML way of achieving this without much overhead, you can use a DataTrigger. Note that you can add as many setters per trigger as needed, making this slightly more flexible than the previously suggested solutions, it's also keeping view logic in the view where it should be.

<Label Text="{Binding Result}" HorizontalOptions="FillAndExpand">
    <Label.Triggers>
        <DataTrigger TargetType="Label" Binding="{Binding Result}" Value="Yes">
            <Setter Property="BackgroundColor" Value="#3CB371" />
        </DataTrigger>
        <DataTrigger TargetType="Label" Binding="{Binding Result}" Value="No">
            <Setter Property="BackgroundColor" Value="#B22222" />
        </DataTrigger>
        <DataTrigger TargetType="Label" Binding="{Binding Result}" Value="Maybe">
            <Setter Property="BackgroundColor" Value="#ddbc21" />
        </DataTrigger>
        <DataTrigger TargetType="Label" Binding="{Binding Result}" Value="Depends">
            <Setter Property="BackgroundColor" Value="#d78800" />
        </DataTrigger>
    </Label.Triggers>
</Label>

Note that you could probably cut out one of the triggers by setting the BackgroundColor property to a sensible default (likely "Depends" in this case).