How can we set a default color `#c4bfc7` for row records displaying in the Xamarin forms page

Question

Where do we set a default color #c4bfc7 for row records displaying in the page, below is the xaml. Now while tapping, it is showing some color, which is fine. But I want to display some color for rows by default

<ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="2*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="2*"/>
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding image}" WidthRequest="50" HeightRequest="50" Grid.Column="0" VerticalOptions="Center"/>
                        <StackLayout Grid.Column="1">
                            <Label Text="{Binding FullName}" TextColor="White" HorizontalTextAlignment="Start"/>
                        </StackLayout>
                        <StackLayout Grid.Column="2">
                            <Label Text="{Binding SoccerStatus}" HorizontalTextAlignment="Center" TextColor="White"/>
                        </StackLayout>
                        <StackLayout Grid.Column="3">
                            <Label Text="{Binding CurrentDate}" HorizontalTextAlignment="Center" TextColor="White"/>
                        </StackLayout>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>

Help me understand what exactly do you mean by, "by default" do you mean as a background color? — FreakyAli, Aug 09 '19 at 05:54
Exactly, as a background colour. I have set it and tried, but not working for me — soccerway, Aug 09 '19 at 05:55
Thanks, can't we add as in xaml to make it as background color ? An easy way ! — soccerway, Aug 09 '19 at 06:10
This case handles also the scenario where you want different colours for different row's — FreakyAli, Aug 09 '19 at 06:11
Also when you get time can you please have a look at this too, https://stackoverflow.com/questions/57423443/how-can-we-received-a-image-file-from-imagetoupload-source-and-passed-into-anoth — soccerway, Aug 09 '19 at 06:11
@G Hakim That too many code for a background color, any easy way you familiar with ? I am ok for the rows having the same color. — soccerway, Aug 09 '19 at 06:14
I am not really following the MVVM pattern, I am doing something in a cluttered way. — soccerway, Aug 09 '19 at 06:20
Then you can check my answer's update section just a one-line change in your ViewCell should do the trick — FreakyAli, Aug 09 '19 at 06:21
All good that is working for me, when you get time can you look my other question with image — soccerway, Aug 09 '19 at 06:24

FreakyAli · Accepted Answer · 2019-08-09T06:19:15.210

UPDATE

Your grid inside the ViewCell would look something like below:

<Grid BackgroundColor="#c4bfc7">

First of all, you might wanna add a property for hex code in your model that is bound to your ListView

public class ListModel
{
   public string HexCode{get; set;}
}

Now when you are filling this model based on your conditions push in the correct hex code that you want as that items background colour. Once you are done with that your listview would look something like below:

<ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid BackgroundColor={Binding HexCode}>

Then add a convertor that converts hex to colour:

public class HexToColorConvertor : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string colorHex = (string)value;

        if (string.IsNullOrEmpty(colorHex) && string.IsNullOrWhiteSpace(colorHex))
            return Color.White;

        return Color.FromHex(colorHex); //Note that if the hex code is not valid this might crash

    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        // Not implemented as we do not convert back
        throw new NotSupportedException();
    }
}

Now add this convertor to your resources like below:

<common:HexToColorConvertor  x:Key="HexToColor" />

Where common is the namespace of that convertor and then use it like below:

<ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid BackgroundColor={Binding HexCode, Converter={StaticResource HexToColor}}>

I have added your converter in my starter project. Gonna use it everywhere... Thanks — prasadsunny1, Aug 09 '19 at 06:28

prasadsunny1 · Answer 2 · 2019-08-09T06:14:54.387

You should set #c4bfc7 background colour to outmost view which is is grid inside view cell here.

<ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid BackgroundColor="#c4bfc7">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="2*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="2*"/>
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding image}" WidthRequest="50" HeightRequest="50" Grid.Column="0" VerticalOptions="Center"/>
                        <StackLayout Grid.Column="1">
                            <Label Text="{Binding FullName}" TextColor="White" HorizontalTextAlignment="Start"/>
                        </StackLayout>
                        <StackLayout Grid.Column="2">
                            <Label Text="{Binding SoccerStatus}" HorizontalTextAlignment="Center" TextColor="White"/>
                        </StackLayout>
                        <StackLayout Grid.Column="3">
                            <Label Text="{Binding CurrentDate}" HorizontalTextAlignment="Center" TextColor="White"/>
                        </StackLayout>
                    </Grid>
                </ViewCell>
            </DataTemplate>
</ListView.ItemTemplate>

Furthermore If you want to change the list view selected item color. Here is an answer which worked for me. It includes adding few keys to android's style.xml https://stackoverflow.com/a/38457882/4707196

It is not the selected item color, but a background /default color for rows — soccerway, Aug 09 '19 at 06:03

How can we set a default color `#c4bfc7` for row records displaying in the Xamarin forms page

2 Answers2

UPDATE