question

SrinathMannam-4826 avatar image
0 Votes"
SrinathMannam-4826 asked LeonLu-MSFT commented

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

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.



dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered LeonLu-MSFT edited

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.


· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@LeonLu-MSFT Thanks for the response. I also have a similar data structure that you mentioned. But I get the following 2 different errors:

1-) If I remove a reference of the view model in the XAML file then I get the following error.

xmlns:viewmodel="clr-namespace:XXX.ViewModel" x:DataType="viewmodel:AssignmentsViewModel"

179447-image.png


2-) If I add the above-mentioned reference then the first error is not there anymore. This following error is coming when I reference a property of AssignmentsCalendar(ObservableCollection) which is Assignment(ObservableCollection). Here the solution doesn't build.

179509-image.png


  • But I found a solution, not sure whether this is the correct way or not.

  • If I remove the view model reference in my XAML then mentioned 1st error it shows.

  • Even though the first error is there, it builds the solution and deploys it into the device. Is it a problem of visual studio IntelliSense error or am I missing something wrong?

  • If this IntelliSense error is not there for you, Can you share your XAML code as well?


0 Votes 0 ·
image.png (34.9 KiB)
image.png (30.4 KiB)
LeonLu-MSFT avatar image LeonLu-MSFT SrinathMannam-4826 ·

If you use x:DataType="viewmodel:AssignmentsViewModel" way to set bindingContext. But your AssignmentsViewModel have two parameters, So you can not bind it use this way.

0 Votes 0 ·
LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered LeonLu-MSFT commented

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);
        }
    }
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

So the solution is not to use the reference x:DataType="viewmodel:AssignmentsViewModel". The issue is with visual studio IntelliSense.

Can you share the version of visual studio are you using?

0 Votes 0 ·
LeonLu-MSFT avatar image LeonLu-MSFT SrinathMannam-4826 ·

Can you share the version of visual studio are you using?

Microsoft Visual Studio Enterprise 2022 (64-bit)
Version 17.0.4

0 Votes 0 ·