Xamarin.Forms ListView Multilining and selected item color

Question

Hi i've ran every link on google but i can't seem to find a solution to my 2 problems.

I'm building n app for android and IOS in Xamarin Forms and i want a List containing Text and Image Like this example.

The problems are: [Update] 1. I can't make the text displaying the coordinates. 2. I can't replace the ugly orange on item selected

Like this:[Update]

Here is my code:

MainPage

private ObservableCollection<Store> stores { get; set; }
    public MainPage()
    {
        InitializeComponent();
        storesList.BackgroundColor = Color.CornflowerBlue;
        storesList.SeparatorColor=Color.White;
        storesList.ItemTemplate = new DataTemplate(typeof(StoreCell));
        stores = new ObservableCollection<Store>();

        Store store1 = new Store
        {
            Name = "Pombal",
            Location = new Coordinate(39.9143958, -8.6297282).ToString()
        };
        Store store2 = new Store
        {
            Name = "Unknown",
            Location = new Coordinate(8.9143958, -39.6297282).ToString(),
            Schedule = "09:00-12:30 / 13:30-18:00"
        };

        stores.Add(store1);
        stores.Add(store2);

        storesList.ItemsSource = stores;

    }

---

<ListView x:Name="storesList" RowHeight="70" HasUnevenRows="True">

</ListView>

StoreCell

public StoreCell()
    {
        InitializeComponent();
        var image = new Image();
        var nameLabel = new Label { TextColor = Color.White };
        var locationLabel = new Label { TextColor = Color.White };
        var scheduleLabel = new Label { TextColor = Color.White };
        var verticaLayout = new StackLayout();
        var horizontalLayout = new StackLayout();

        //set bindings
        nameLabel.SetBinding(Label.TextProperty, new Binding("Name"));
        locationLabel.SetBinding(Label.TextProperty, new Binding("Location"));
        scheduleLabel.SetBinding(Label.TextProperty, new Binding("Schedule"));
        image.SetBinding(Image.SourceProperty, new Binding("Image"));

        //Set properties for desired design
        horizontalLayout.Orientation = StackOrientation.Horizontal;
        horizontalLayout.HorizontalOptions = LayoutOptions.Fill;
        image.HorizontalOptions = LayoutOptions.End;
        nameLabel.FontSize = 24;

        //add views to the view hierarchy
        verticaLayout.Children.Add(nameLabel);
        verticaLayout.Children.Add(locationLabel);
        verticaLayout.Children.Add(scheduleLabel);
        horizontalLayout.Children.Add(verticaLayout);
        horizontalLayout.Children.Add(image);

        // add to parent view
        View = horizontalLayout;
    }

[Update]

The Coordinate class toString

public override string ToString()
{
    return X + " , " + Y;
}

The Store Class

Probably doing this wrong...

class Store
{

    public string Name { get; set; }
    public string Location { get; set; }
    public string Schedule { get; set; }

    public Store() : this(null, null, null)
    {

    }

    public Store(String name, string location) : this(name, location, "")
    {
    }

    public Store(String name, string location, String schedule)
    {
        Name = name;
        Location = location;
        Schedule = schedule;
    }
}

Any thing you need just ask, thanks you very much.

Answer 1

1. For "multiline" viewcells in your listview you have to set properties on your listview:

<ListView x:Name="storesList"
            HasUnevenRows="True"
            RowHeight="50"> 
<!-- your row height -->
<!-- ..... -->
</ListView>

HasUnevenRows is not necessary, but depends on your needs. I guess the name of the property tells u what it is for :D

2. For orange remove (Android only): Add/Replace this line in the Resources/values/styles.xml in Android Project:

< item name="android:colorActivatedHighlight" >#000000< /item >.

I'm unsure if the color will be used. In my case the orange will be replaced with a default gray. This is okay for me.

For iOS highlight color:

https://forums.xamarin.com/discussion/comment/162154/#Comment_162154