Xamarin: Binding a nested collection object to ListView

Question

Please bear with me, I'm new to Xamarin

I have this object Job with a list of subobject Process

public class Job
    {
        public string Id { get; set; }
        public string Title { get; set; }
        public DateTime Date { get; set; }
        public IEnumerable<Process> Processes { get; set; }
    }

public class Process
    {
        public string Id { get; set; }
        public string Description { get; set; }
        public string Procedure { get; set; }
    }

In the xaml page, I have a SwipeView that displays all the job Title s with an Expander , inside which I'm able to display the Job.Date for each job . But my issue is displaying a list of Processes inside a ListView .

ViewModel (redacted for brevity)

internal class MyJobsPageVM : BaseViewModel
    {
        public ObservableCollection<Job> MyJobs { get; }
        
        public MyJobsPageVM()
        {
            MyJobs = new ObservableCollection<CompJob>();
        }
        

        /* ... Code to load jobs with Rest Service into MyJobs ObservableCollection */
    }

XAML page (redacted for brevity)

    <ContentPage.BindingContext>
        <vm:MyJobsPageVM />
    </ContentPage.BindingContext>
                <CollectionView x:Name="JobsListSwipeCollectionView"
                                   ItemsSource="{Binding MyJobs}">
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <SwipeView>
                                <SwipeView.LeftItems>
                                    <SwipeItems Mode="Reveal" >
                                        <SwipeItem Text="Done"/>
                                    </SwipeItems>
                                </SwipeView.LeftItems>
                                <extensions:Expander>
                                    <extensions:Expander.Header>
                                         <Label>
                                                <Label.Text>
                                                    <MultiBinding>
                                                        <Binding Path="Title" />
                                                    </MultiBinding>
                                                </Label.Text>
                                         </Label>
                                    </extensions:Expander.Header>
                                    <StackLayout>
                                      <Label>
                                        <Label.Text>
                                            <MultiBinding>
                                                <Binding Path="Date" />
                                            </MultiBinding>
                                        </Label.Text>
                                      </Label>
<!-- This is where I am stuck -->    <ListView ItemsSource="{Binding path=Processes}">
                                        <ListView.ItemTemplate>
                                            <DataTemplate>
                                                <ViewCell>
                                                    <Label>
                                                        <Label.Text>
                                                            <MultiBinding>
                                                                <Binding Path="Description"/>
                                                            </MultiBinding>
                                                        </Label.Text>
                                                    </Label>
                                                </ViewCell>
                                            </DataTemplate>
                                        </ListView.ItemTemplate>
                                      </ListView>
                                    </StackLayout>
                                </extensions:Expander>
                           </SwipeView>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>

Answer 1

You can use BindableLayout to display a collection of items without wrapping it in CollectionView.

You can refer to the following code:

   <ContentPage.BindingContext>
    <form0530:MyJobsPageVM></form0530:MyJobsPageVM>
</ContentPage.BindingContext>

<StackLayout>
    <CollectionView x:Name="JobsListSwipeCollectionView"
                               ItemsSource="{Binding MyJobs}">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                        <StackLayout>
                            <Label Text="{Binding Title}">

                            </Label>

                            <!-- add code here -->

                    <StackLayout  BindableLayout.ItemsSource="{Binding Processes}">
                        <BindableLayout.ItemTemplate>
                            <DataTemplate>
                                <Label Text="{Binding Description}"/>
                            </DataTemplate>
                        </BindableLayout.ItemTemplate>
                    </StackLayout>

                </StackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</StackLayout>

Answer 2

The problem was being caused by the RefreshView that I omitted in my post for keeping it simple. I removed it, and all works well. I will try to find a better solution to reimplement the RefreshView functionality.