Binding Color in Xamarin listView

Question

I've checked some answers before but nothing helped me. I'm trying to change background color of ViewCell in ListView by binding StackLayout BackgroundColor. For now it looks like this

Every cell should be filled with different color but it does not change at all. Code behind it:

OrderDatapage.XAML:

<ContentPage.Resources>
    <ResourceDictionary>
        <local:BackgroundConverter x:Key="BackgroundConverter" />
    </ResourceDictionary>
</ContentPage.Resources>
.
.
.
.
<StackLayout Orientation="Vertical">
       <ListView x:Name="timetableList"
                        RowHeight="25"
                        SeparatorVisibility="Default"
                        Margin="0,0,0,10"
                        >
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal"
                                        VerticalOptions="FillAndExpand"
                                        BackgroundColor="{Binding Paint, Converter={StaticResource BackgroundConverter}}">
                                        <Label Text="{Binding Number}"
                                                FontSize="Medium"
                                                Margin="20,0,0,0"
                                                TextColor="White"
                                                BackgroundColor="Black"
                                                />
                                        <Label Text="{Binding Title}"
                                                FontSize="Default"
                                                Margin="20,0,0,0"
                                                TextColor="Black"
                                                />
                                        <Label Text="{Binding Date}"
                                                FontSize="Default"
                                                HorizontalOptions="EndAndExpand"
                                                Margin="0,0,40,0"
                                                TextColor="Black"
                                                />
                             </StackLayout>
                        </ViewCell>
                   </DataTemplate>
               </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

Converter.cs

class BackgroundConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return Color.FromHex(value.ToString());
    }
}

OrderDataPage.cs

    List<TimetableItem> timeTableList { get; set; }
    public OrderDataPage()
    {
        InitializeComponent();
        timeTableList = new List<TimetableItem>();
        var timetable1 = new TimetableItem() { Number = "1", Title = "Test1", Date = "20-12-2020", Paint = "#63FF20" };
        var timetable2 = new TimetableItem() { Number = "2", Title = "Test2", Date = "20-12-2020", Paint = "#FFD933" };
        var timetable3 = new TimetableItem() { Number = "3", Title = "Test3", Date = "20-12-2020", Paint = "#C0C0C0" };
        timeTableList.Add(timetable1);
        timeTableList.Add(timetable2);
        timeTableList.Add(timetable3);

        timetableList.ItemsSource = timeTableList;

    }

Your code looks fine, did you checked with breakpoints either Value convert is getting called ? — Dilmah

Alessandro Caliaro Alessandro Caliaro · Accepted Answer · 2017-04-18T10:29:32

I think you should try to set Label's BackGroundColor to "Transparent" to see the StackLayout Background Color, but I am not sure if it works. Otherwise you can set Label's BackGroundColor to a particular color.

In your IValueConverter you should check if "value" is not null

if(value != null && value is string && (string)value != "")
    return Color.FromHex(value.ToString());
else
    return Color.Red;

UPDATE

I have done a little test setting the StackLayout's BackgroudColor

slView.SetBinding(StackLayout.BackgroundColorProperty, "BackgroundColor");

Where BackgroundColor is a string

List.Add(new Model { Description = "D1", Cost = 10.0, Qty = 1, BackgroundColor = "#9ac16e"});
List.Add(new Model { Description = "D2", Cost = 20.0, Qty = 2, BackgroundColor = "#8d0000" });
List.Add(new Model { Description = "D3", Cost = 30.0, Qty = 3, BackgroundColor = "#3a6cf6"});

And it works also without IValueConverter

The only problem is that you loose then Highlight when you select the row

You can find a repo HERE

Binding Color in Xamarin listView

1 Answers