Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Use Xamarin.Forms Carousel View to display List of ListView, each contains list of objects

LeLGLeLG Member ✭✭

Hi guys, im using Xamarin.Forms and im having a problem trying to use alexrainman's Carousel View.

Particularly, i want to set up a Carousel View in which each view is a ListView , and then each ListView would display a List of objects.

I have read through the document pages and define the sources for my CarouselView and ListView as follow:

ObservableCollection<ObservableCollection<ItemFormat>> MyCarouselSource = new ObservableCollection<ObservableCollection<ItemFormat>>();
 ObservableCollection<ItemFormat> MyListViewSource = new ObservableCollection<ItemFormat>();

but i can not get it to work.

My ListView would have a list of objects, something like this:

[
{
"field_name":"value1",
"field_value":"value11"
},
{
"field_name":"value2",
"field_value":"value22"
},
...
]

Here is my code:

 public class ItemFormat
    {
        [JsonProperty("field_name")]
        public string FieldName { get; set; }

        [JsonProperty("field_value")]
        public string FieldValue { get; set; }
    }

View Model (ValidationBindableBase has the INotifyPropertyChanged in it):

 public class MyViewModel : ValidationBindableBase
    {
...
        ObservableCollection<ObservableCollection<ItemFormat>> _myCarouselSource;
        public ObservableCollection<ObservableCollection<ItemFormat>> MyCarouselSource
        {
            get => _myCarouselSource;
            set => SetProperty(ref _myCarouselSource, value);
        }


        ObservableCollection<ItemFormat> _myListViewSource;
        public ObservableCollection<ItemFormat> MyListViewSource
        {
            get => _myListViewSource;
            set => SetProperty(ref _myListViewSource, value);
        }
   public DetailedSalaryViewModel()
        {
        }
    }

code behind

public partial class MyViewPage : ContentPage
    {
        MyViewModel viewModel = new MyViewModel();
        public MyViewPage ()
        {
            InitializeComponent ();
            BindingContext = viewModel ;
        }
    }

The XAML view:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="salary_sheet.Views.MyViewPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:controls="clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions">
    <controls:CarouselViewControl
        x:Name="carousel"
        ItemsSource="{Binding MyCarouselSource}"
        Orientation="Horizontal"
        ShowArrows="true"
        ShowIndicators="true">
        <controls:CarouselViewControl.ItemTemplate>
            <DataTemplate>
                <ListView ItemsSource="{Binding MyListViewSource}" RowHeight="100">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <Grid Padding="5">

                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width=".5*" />
                                        <ColumnDefinition Width=".5*" />
                                    </Grid.ColumnDefinitions>

                                    <Label
                                        Grid.Column="0"
                                        HorizontalOptions="Start"
                                        Text="{Binding FieldName}" />
                                    <Label
                                        Grid.Column="1"
                                        HorizontalOptions="Start"
                                        Text="{Binding FieldValue}" />
                                </Grid>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </DataTemplate>
        </controls:CarouselViewControl.ItemTemplate>
    </controls:CarouselViewControl>
</ContentPage>

Please help me to correct the definition of the sources for my ListView and CarouselView.

Also how to establish and organize the view's XAML code.

I really appreciate all your help. Thank you.

Answers

  • RedRaRedRa Member ✭✭✭
    edited July 2019

    @LeLG From your question it is not obvious what is the issue, but I guess that you have not observed update from MyCarouselSource ...

    Seems like you do not have ****NotifyOnPropertyChanged**** method:

    class MyViewModel : INotifyPropertyChanged
    {
        public MyViewModel()
        {
        }
    
        public event PropertyChangedEventHandler PropertyChanged;
    
        ObservableCollection<ObservableCollection<ItemFormat>> _myCarouselSource;
        public ObservableCollection<ObservableCollection<ItemFormat>> MyCarouselSource
        {
            get => _myCarouselSource;
            set
            {
                _myCarouselSource = value;
                NotifyOnPropertyChanged();
            }
        }
    
        ObservableCollection<ItemFormat> _myListViewSource;
    
        public ObservableCollection<ItemFormat> MyListViewSource
        {
            get => _myListViewSource;
            set
            {
                _myListViewSource = value;
                NotifyOnPropertyChanged();
            }
        }
    
        void NotifyOnPropertyChanged([CallerMemberName] string name = "")
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }
    }
    

    Check the NotifyOnPropertyChanged method in example above

  • Amar_BaitAmar_Bait DZMember ✭✭✭✭✭
    edited July 2019

    You CarouselView.ItemsSource is a collection of collections, which means its children BindingContext will be a collection. So in the child ListView you just assign the BindingContext itself to ItemsSource:

    <controls:CarouselViewControl ItemsSource="{Binding MyCarouselSource}" ... >
        <controls:CarouselViewControl.ItemTemplate>
            <DataTemplate>
                <ListView ItemsSource="{Binding .}" RowHeight="100">
                    ...
                </ListView>
            </DataTemplate>
        </controls:CarouselViewControl.ItemTemplate>
    </controls:CarouselViewControl>
    
    

    Your ViewModel:

    // Add 3 Carousel items, each item containing 5 ListView items...
    for (int i = 0; i <= 3; i++)
    {
        var listViewCollection = new ObservableCollection<ItemFormat>();
    
        for (j = 0; j <= 5; j++)
        {
            listViewCollection.Add(new ItemFormat { Text = $"This is ListView item {j + 1} in Carousel item {i + 1}" });
        }
    
        MyCarouselSource.Add(listViewCollection);
    }
    
  • Bigbo718Bigbo718 Member

    Happy Wednesday, i was wondering if this issue got resolved.

Sign In or Register to comment.