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

Answer 2

Try to:

1. Set a RowHeight on your ListView to a proper size.
2. Instead of using a nested StackPanel it could be easier to use a GridView as a template for your list items.
3. Your Store class should have a proper ToString() method on your properties. Currently you have a property of type Coordinate what does ToString() returns?

Regarding the second problem with highlighting color of the ListItem . There are plenty of examples all over the web and especially on stackoverflow . It depends on what exactly you would like to achieve. If you want to totally disable highlighting on Android and iOS then you will have to take care of it separately for each platform using a custom renderer. Otherwise, if you would like to change or remove the orange color only on Android platform then you should check @Csharpest's solution.