Change the Color of Text in ListView

Question

The default color of ListView is red, I want to change it. I tried to use the Label inside the ListView, but it returns nothing (scree in empty, no values).

As u see the Itemsource in ListView and Label in Text is Bind to the same value, it is the reason for the empty screen.

How can I change the Color of Text?

<ListView
    BackgroundColor="#004B86"
    ItemsSource="{Binding Attributes}" >
    <ListView.ItemTemplate>
        <DataTemplate>
            <Label 
            Text="{Binding Attributes}"
            TextColor="White">
            </Label>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Attributes

foreach (var item in _credential.CredentialAttributesValues)
{
    _attributes.Add(item.Name.ToString());
    _attributes.Add(item.Value.ToString());
}    

Bindable Properties

private ObservableCollection<string> _attributes = new ObservableCollection<string>();
public ObservableCollection<string> Attributes
{
    get
    {
        return _attributes;
    }
    set
    {
        this.RaiseAndSetIfChanged(ref _attributes, value);
    }
}

Answer 1

So I am not sure if I fully understood what needs to happen, but if you want to change the color of something you can try to do the following. I did update some of the variable names to be something more appropriate. Let me know if this is correct or not

Your page where you load the ListView will look as follows, note the x:Name property:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:XamarinFormsPlayground.Controls;assembly=XamarinFormsPlayground" xmlns:local="clr-namespace:XamarinFormsPlayground.Resources"
             x:Class="XamarinFormsPlayground.MainPage"
             x:Name="root">
    <ListView
    BackgroundColor="{Binding ListViewColor, Mode=TwoWay}"
    ItemsSource="{Binding Colors, Mode=TwoWay}" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Label 
                        Text="{Binding .}"
                        TextColor="White">
                        <Label.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding BindingContext.ChangeColorCommand, Source={x:Reference root}}" CommandParameter="{Binding .}"/>
                        </Label.GestureRecognizers>
                    </Label>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

In the code behind I set the BindingContext to be that of the ViewModel i've bound it to, the view model looks as follows:

public class BasicViewModel : BindableObject
    {
        private ObservableCollection<string> colors = new ObservableCollection<string>();
        private Color listViewColor = Color.FromHex("#004B86");

    public Color ListViewColor {
        get {  return listViewColor; }
        set {
            listViewColor = value;
            OnPropertyChanged("ListViewColor");
        }
    }
    public ICommand ChangeColorCommand => new Command<string>(x => ChangeColor(x));
    public ObservableCollection<string> Colors {
        get {
            return colors;
        }
        set {
            colors = value;
            OnPropertyChanged("Colors");
        }
    }

    public BasicViewModel()
    {
        LoadData();
    }

    public void LoadData()
    {
        colors.Add("Red");
        colors.Add("Blue");
        colors.Add("Green");
        colors.Add("White");
        colors.Add("Orange");

        Colors = colors;
    }

    private void ChangeColor(string color)
    {
        if(!string.IsNullOrEmpty(color))
        {
            var selectedColor = typeof(Color).GetRuntimeFields()
                .Where(x => x.IsPublic)
                .Where(x => x.IsStatic)
                .Where(x => x.FieldType == typeof(Color))
                .Where(x => x.Name.ToLower() == color.ToLower())
                .First();
        
            ListViewColor = (Color) selectedColor.GetValue(null);

        }
    }
}

Explanation:

In the XAML we bound our color names to be {Binding .} because the items inside of the DataTemplate use the ItemSource as its BindingContext, and since it is just a collection of strings, it only has itself to bind to, that's what the . binding means.

Then, we bind the TapGestureRecognizer on the Label to the BindingContext of the overall page, hence the interesting syntax for the command binding.

The magic part of the code lies in the ChangeColor method, it will go through the runtimefields of the Color struct and find the color that matches the name we tapped on. The .ToLower() portion of the code is there just to negate any case sensitivity in the color names.

Using the above methodology you should be able to extend it to fit your needs as well. If you want to change the color of the Text that the ListView is actually rendering then you will just need to modify the above XAML's binding a little bit. Really all you would need to do is define a regular color for your overall listview (say like black) then for where you have the Color="White" on your Label just set its binding to be {Binding BindingContext.ChangeColorCommand, Source={x:Reference root}, Mode=TwoWay}"

Answer 2

In your DetailedCell, there must be some labels where you can set the Title and Subtitle. So you can change the TextColor property of those labels there to change the text color.

Update:

<ListView BackgroundColor="#004B86" ItemsSource="{Binding Attributes}" >
    <ListView.ItemTemplate>
        <DataTemplate>
            
            <ViewCell>
                
                <Label 
                    Text="{Binding Attributes}" TextColor="White">
                </Label>
                
            </ViewCell>

        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>