Unable to bind a property for a listview which is inside a carousel view

Question

I have a xamarin view called "AssignmentsPage.xaml" and a ViewModel called "AssignmentsViewModel.cs"

Inside the cs file of "AssignmentsPage.xaml.cs" I have the following code inside the constructor

public AssignmentsPage()
{
      this.InitializeComponent();
      this.BindingContext = new AssignmentsViewModel(Navigation, this);
}

Inside the xaml page (AssignmentsPage.xaml), I have carousel view at first, Inside the carousel view I have a list view

<ContentPage 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"
             xmlns:viewmodel="clr-namespace:XXX.ViewModel" x:DataType="viewmodel:AssignmentsViewModel"
             x:Class="XXX.View.AssignmentsPage"           
             Title="Assignments Page"
             x:Name="MyAssignmentsView">


# Inside the content page I have the following
<controls:CarouselViewControl x:Name="CarouselView" Orientation="Horizontal" InterPageSpacing="10" 
                                                    Position="{Binding Position}" ItemsSource="{Binding AssignmentsCalendar}" 
                                                    PositionSelectedCommand="{Binding PositionSelectedCommand}"
                                                    PositionSelected="Handle_PositionSelected" 
                                                    VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

           <controls:CarouselViewControl.ItemTemplate>

                   <DataTemplate>

                          <StackLayout x:Name="Header" Spacing="0">

                                  <ListView x:Name="AssignmentsListView"  ItemsSource="{Binding Assignments}"  // I have tried AssignmentsCalendar.Assignments as well
                                                   IsPullToRefreshEnabled="False"
                                                  VerticalScrollBarVisibility="Always"  BackgroundColor="#f5f5f5"
                                                  SeparatorColor="Transparent" HasUnevenRows="True"
                                                  AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" >
                                                 // Some Logic
                                  </ListView>

                           </StackLayout>

                   <DataTemplate>
           </controls:CarouselViewControl.ItemTemplate>
</controls:CarouselViewControl>

AssignmentsCalendar is a member of AssignmentsViewModel class and AssignmentsCalendar(ObservableCollection) contains the property called Assignments(ObservableCollection). But, I am unable to access it.

Can someone help me with this?

Thanks in advance.

Answer 1

Hello,​

If you want to show the data in the Listview, your Model need to change it like following structure. MyModel.cs contains List<MyListModel> Assignments, I add the Name property for testing. Name property could show in the CarouselView If you add Label in the StackLayout. If you do not need Name property, you can remove it.

MyListModel.cs contains properties(I add DisplayName in the Listview's <TextCell> ) that you want to Show them in the Listview.

   public class MyModel  
       {  
     
           public string Name { get; set; }  
     
           public List<MyListModel> Assignments { get; set; }  
     
           public MyModel()  
           {  
     
           }  
       }  
     
       public class MyListModel  
       {  
     
           public string DisplayName { get; set; }  
       }  

Here is my test AssignmentsViewModel.cs. I add <TextCell Text="{Binding DisplayName}" /> in <DataTemplate> of <ListView.ItemTemplate>. DisplayName could appear normally.

   public class AssignmentsViewModel  
       {  
            
           public ObservableCollection<MyModel> AssignmentsCalendar { get; set; }  
           public AssignmentsViewModel(INavigation navigation, ContentPage mainPage)  
           {  
               
               //Create a dataset to appear in the Listview  
               var  Assignments = new List<MyListModel>();  
               Assignments.Add(new MyListModel() { DisplayName = "test1" });  
               Assignments.Add(new MyListModel() { DisplayName = "test2" });  
     
               //Set value to the AssignmentsCalendar  
               AssignmentsCalendar = new ObservableCollection<MyModel> { new MyModel() { Name="Cars1", Assignments = Assignments }, new MyModel() { Name = "Cars2", Assignments = Assignments } };  
           }  
       }  

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Can you share your XAML code as well?

Sure. Here is my XAML code. I do not know details about your custom CarouselView , So I add the native CarouselView to make a test

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App18.MainPage">

    <StackLayout>
        <CarouselView  ItemsSource="{Binding AssignmentsCalendar}"                                                     
                       VerticalOptions="FillAndExpand" 
                       HorizontalOptions="FillAndExpand">
            <CarouselView.ItemsLayout>
                <LinearItemsLayout Orientation="Horizontal" />
            </CarouselView.ItemsLayout>
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <StackLayout x:Name="Header" Spacing="0">
                        <Label Text="{Binding Name}"></Label>
                        <ListView x:Name="AssignmentsListView"  ItemsSource="{Binding Assignments}" 
                                                   IsPullToRefreshEnabled="False"
                                                  VerticalScrollBarVisibility="Always"  BackgroundColor="#f5f5f5"
                                                  SeparatorColor="Transparent" HasUnevenRows="True"
                                                  AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" >
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <TextCell Text="{Binding DisplayName}" />
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </StackLayout>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
    </StackLayout>

</ContentPage>

And here is my XAML background code.

public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            this.BindingContext = new AssignmentsViewModel(Navigation, this);
        }
    }