Carousel View and List View binding not working with Xamarin Forms

Question

I have one big problem with Xamarin Forms - I have to create a carousel view/page with different list in the different pages. This is the code I've written

My main content page is DailyCarouselPage

public class DailyCarouselPage : ContentPage
{
    public CarouselViewControl carousel;
    public DailyCarouselPage ()
    {

        ObservableCollection<DailyAppointmentList> collection = new ObservableCollection<DailyAppointmentList>();

        collection.Add(new DailyAppointmentList());
        collection.Add(new DailyAppointmentList());

        StackLayout body = new StackLayout();
        carousel = new CarouselViewControl();

        carousel.ItemsSource = collection;
        carousel.ItemTemplate = new DailyAppointmentListTemplate();

        body.Children.Add(carousel);

        Content = body;
    }
}

Then I have this class that contains the list of the lists that I have to show:

class DailyAppointmentList
{
    public ObservableCollection<Appointment> list { get; set; }

    public DailyAppointmentList()
    {
        list = new ObservableCollection<Appointment>();
        list = new AppointmentListModel().List; //this list is declared in another class, which isn't important to the problem
    }
}

Basic ListView template:

public class DailyAppointmentListTemplate : DataTemplate
{
    public DailyAppointmentListTemplate ()
    {
        StackLayout stack = new StackLayout();
        ListView list = new ListView()
        {
            ItemTemplate = new DataTemplate(typeof(AppointmentCellTemplate))
        };

        list.SetBinding(ListView.ItemsSourceProperty, "list");

        stack.Children.Add(list);
    }
}

Template for the cell of the list:

public class AppointmentCellTemplate : ViewCell
{
    public AppointmentCellTemplate ()
    {
        StackLayout stack = new StackLayout();

        Label subject = new Label();
        subject.SetBinding(Label.TextProperty, "Subject");

        Label description = new Label();
        description.SetBinding(Label.TextProperty, "Description");

        Label date = new Label();
        date.SetBinding(Label.TextProperty, "Start");

        stack.Children.Add(subject);
        stack.Children.Add(description);
        stack.Children.Add(date);

        View = stack;
    }
}

Lastly, my Appointment class:

public class Appointment
{
    public Guid? AppointmentId { get; set; }
    public DateTime? Start { get; set; }
    public DateTime? End { get; set; }
    public string Subject { get; set; }
    public string Description { get; set; }
    public Costumer Costumer { get; set; }
    public double? Latitude { get; set; }
    public double? Longitude { get; set; }
}

I can't get the list to show in main DailyCarouselPage, no matter what. I tried other methods but didn't work either. Seems like I keep doing some kind of mistake with the bindings, but I can't figure out what I'm doing wrong.

Anonymous Anonymous · Accepted Answer · 2018-01-18T09:37:41

Try to add

Xamarin.Forms.Init();
CarouselViewRenderer.Init();

In your iOS and Android projects to show it.

Then in my test if you want to add ListView in the CarouselViewControl, please just set ItemSource like:

public DailyCarouselPage()
{
    ObservableCollection<ListView> collection = new ObservableCollection<ListView>();

    ListView myListView = new ListView
    {
        ItemTemplate = new DataTemplate(typeof(AppointmentCellTemplate)),
        ItemsSource = (new DailyAppointmentList()).list
    };

    collection.Add(myListView);
    collection.Add(myListView);

    carousel = new CarouselViewControl();
    carousel.ItemsSource = collection;

    Content = carousel;
}

Moreover, please pay attention to: just set the ContentPage's Content as carousel.

Carousel View and List View binding not working with Xamarin Forms

1 Answers