BackgroundColor="{Binding ...." does not work

Question

BackgroundColor="{Binding [item from 'Models']" does not work

based on sample: 'Shell Mixed Navigation'

when using: BackgroundColor="red" or "#f2a82f" --> it works

when using: BackgroundColor="{Binding VARHaute.NiveauColor}" --> Image disappears, no color

In 'Models' : NiveauColor = "#f2a82f", other items in 'Models' work correctly !)

PS, see github: https://github.com/edikaufmann/RandoGIT 'VARHauteDetailPage.xaml'

? what in the world I'm not seeing ?

Answer 1

If you look at the property of BackgroundColor you will see that it takes a Color parameter.

public Color BackgroundColor { get; set; }

Your model is trying to feed it a string. So it doesn't understand what it should do with that. Fortunate there is a good way to go about this. We can make a converter where you can manipulate the value before it goes into the property.

<Image
    BackgroundColor = "{Binding VARHaute.NiveauColor, Converter={StaticResource ColarHexStringToMAUIColorConverter}}"
    HeightRequest = "30"
    HorizontalOptions = "Center"
    Source = "hiking.png"
    WidthRequest = "50" />

We have to tell the view where to find resourses so at the top you have to add:

<ContentPage.Resources>
    <ResourceDictionary>
        <converters:ColorHexStringToMAUIColorConverter x:Key="ColorHexStringToMAUIColorConverter" />
    </ResourceDictionary>
</ContentPage.Resources>

We make a simple converter like so:

public class ColorHexStringToMAUIColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string hexColor = (string)value;
        ColorTypeConverter converter = new ColorTypeConverter();

        return (Color)converter.ConvertFromInvariantString(hexColor);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

UPDATE

The comeplete ContentPage

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
    x:Class="Randoff.Views.VARHauteDetailPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:converters="clr-namespace:Randoff.Converters"
    Title="VAR-Haute">

    <ContentPage.Resources>
        <ResourceDictionary>
            <converters:ColorHexStringToMAUIColorConverter x:Key="ColorHexStringToMAUIColorConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>

    <ScrollView>
        <StackLayout Margin="0">
            <Label
                HorizontalOptions="Center"
                Style="{DynamicResource TitleStyle}"
                Text="{Binding VARHaute.Name}" />
            <!--<Label Text="{Binding VARHaute.Location}"
                   FontAttributes="Italic"
                   HorizontalOptions="Center" />-->
            <Image
                HeightRequest="240"
                HorizontalOptions="Center"
                Source="{Binding VARHaute.Image}"
                WidthRequest="300" />
            <Image
                Aspect="AspectFill"
                HeightRequest="100"
                HorizontalOptions="Center"
                Source="{Binding VARHaute.Profil}"
                WidthRequest="200" />
            <Label
                HorizontalOptions="Center"
                Style="{DynamicResource BodyStyle}"
                Text="{Binding VARHaute.Distance, StringFormat='Distance: {0}km'}" />
            <Label
                HorizontalOptions="Center"
                Style="{DynamicResource BodyStyle}"
                Text="{Binding VARHaute.Denivele, StringFormat='Dénivelé: {0}m'}" />
            <Image
                BackgroundColor="red"
                HeightRequest="30"
                HorizontalOptions="Center"
                Source="hiking.png"
                WidthRequest="50" />
            <Image
                BackgroundColor="{Binding VARHaute.NiveauColor, Converter={StaticResource ColorHexStringToMAUIColorConverter}}"
                HeightRequest="30"
                HorizontalOptions="Center"
                Source="hiking.png"
                WidthRequest="50" />

            <Button
                BackgroundColor="{StaticResource Primary}"
                Command="{Binding TapCommand}"
                CommandParameter="{Binding VARHaute.Map}"
                Text="Map"
                TextColor="White"
                WidthRequest="150" />
        </StackLayout>

    </ScrollView>
</ContentPage>

The converter in its own file

using Microsoft.Maui.Graphics.Converters;
using System.Globalization;

namespace Randoff.Converters;

public class ColorHexStringToMAUIColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string hexColor = (string)value;
        ColorTypeConverter converter = new ColorTypeConverter();

        return (Color)converter.ConvertFromInvariantString(hexColor);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}