How to change background color on a listview

DanielHindrikes

For iOS and WP I override OnElementChange method on ListViewRenderer. But on Android the ListViewRenderer is internal. What is the best method to change the background color for a listview on Android?

ChaseFlorell

is this what you're looking for?

        var lv = new ListView();
        lv.BackgroundColor = Color.Blue;

HEATHALLEN

What if you wanted to change the selected item background color? Don't tell me to write a renderer either. LOL

ChaseFlorell

Well, that does seem to be the defacto answer around here ... lol

DanZhu

Binding background to the model property eg: IsSelected . then you set the value of property。
when you tapped a item set the item's, set the IsSelected property.
//============eg============
public class SceneCellModel :BaseModel
{
public SceneCellModel()
{
}

    public string SceneName { get;set; }

    bool isSelected =false;
    public bool IsSelected {
        get { return isSelected; }
        set { SetProperty(ref isSelected, value, "IsSelected"); }
    }      
}

//============= DataTemplate =========
...
var grid = new Grid()
{
Padding = new Thickness(0, 5),
ColumnSpacing = 0,

        RowSpacing = 2,
                BackgroundColor = Color.White,//FromRgb(0x22, 0x22, 0x22)
            };
            ////-----------------------------
            grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(40, GridUnitType.Absolute) });
            ////-----------------------------
            grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(5, GridUnitType.Absolute) }); 
            grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(50, GridUnitType.Absolute) }); 
            grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });      
            grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(80, GridUnitType.Absolute) });

            grid.Children.Add(icon, 1, 2, 0, 1); 
            grid.Children.Add(text, 2, 3, 0, 1); 
            grid.Children.Add(more, 3, 0); //error
            grid.SetBinding(Grid.BackgroundColorProperty, new Binding("IsSelected",converter: new IsSelectedToBackgroundConvert(), converterParameter: grid.BackgroundColor ));

            return new ViewCell()
            {
                View = grid
            };

DanZhu

grid.SetBinding(Grid.BackgroundColorProperty, new Binding("IsSelected",converter: new IsSelectedToBackgroundConvert(), converterParameter: grid.BackgroundColor ));

DanielHindrikes

I missed that it was so simple on android, on iOS it doesn't work, but now I know that it is because I had to set the color on every cell in the ListView because they have a default color.

ClaudiuTomescu

Does anyone know how can I make a ListView's background transparent? Here is a snippet of the code I'm working with:

`var listview = new ListView {
ItemsSource = items,
VerticalOptions = LayoutOptions.FillAndExpand,
BackgroundColor = Color.Transparent,
};

        // Build the template for the menu item
        var cell = new DataTemplate(typeof(ImageCell));
        cell.SetBinding(TextCell.TextProperty, "Title");
        cell.SetBinding(ImageCell.ImageSourceProperty, "IconSource");
        cell.SetValue (VisualElement.BackgroundColorProperty, Color.Transparent);

listview.ItemTemplate = cell;`

The listview itself is transparent (my page background color is Red), but the populated cells are white. Am I doing something wrong?

Thanks!

CraigDunn

@ClaudiuTomescu‌ yeah, it looks like the default white color that is being set on the UITableView cell on iOS can't be set to Transparent, so for now you can only set the color - including set the color of each cell background (to have it work with Xamarin.Forms on iOS).

DanielHindrikes

I using a custom renderer for setting each cell to transparent.

JamesPettigrew

Does anybody know why I can't set the cell colour? ThermostatCell inherits from ViewCell.

var cell = new DataTemplate(typeof (ThermostatCell)); cell.SetValue(VisualElement.BackgroundColorProperty, Color.Black);

deckertron9000

@JamesPettigrew‌
I don't believe ViewCell has a bindable property for background color. What I do to get around this is set the background color of the layout that contains everything in the cell (in the custom cell class, in your case ThermostatCell) and make sure it's layout options are set to fill the whole cell.

DanielHindrikes

I have written a blog post about how I did, http://danielhindrikes.se/xamarin/xamarin-forms-change-background-color-on-ios-listview/

deckertron9000

@dhindrik‌
That's super simple and works great!