xamarin forms - populate list view that is inside collection view

Question

I am using Xamarin Forms Collection View, inside this collection view is toolkit expander, When someone clicks the header I have binded a command, inside this command I am trying to populate a list view inside the grid of the expander, see code below:

<CollectionView x:Name="MathList" HeightRequest="320" SelectionChanged="MathList_SelectionChanged">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <xct:Expander Command="{Binding GetMathSubCatgories}">
                            <xct:Expander.Header>
                                <Frame Padding="10" Margin="10" HasShadow="False" BorderColor="LightGray" VerticalOptions="CenterAndExpand">
                                    <StackLayout Orientation="Horizontal">
                                        <Image Source="{Binding icon}" WidthRequest="25" HeightRequest="25"></Image>
                                        <Label Text="{Binding name}" TextColor="{Binding textColor}" FontSize="Large" FontAttributes="Bold" HeightRequest="35" VerticalOptions="CenterAndExpand"></Label>
                                    </StackLayout>
                                </Frame>
                            </xct:Expander.Header>
                            <Grid Padding="10">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <ListView x:Name="SubCatgories" ItemsSource="{Binding subTaskClass}">
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <StackLayout>
                                                <Frame Padding="10" Margin="10" HasShadow="False" BorderColor="LightGray" VerticalOptions="CenterAndExpand">
                                                    <StackLayout Orientation="Horizontal">
                                                        <Label Text="aaa" FontAttributes="Bold" HeightRequest="35" VerticalOptions="CenterAndExpand"></Label>
                                                    </StackLayout>
                                                </Frame>
                                            </StackLayout>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
                            </Grid>
                        </xct:Expander>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

But in my code behind when I try to populate the list view like so:

public ICommand GetMathSubCatgories => new Command(() =>
        {
            Console.Write("Here");

            GetSubTasks(taskcategoryid);

        });

        public async void GetSubTasks(int taskcategory)
        {
            SubCatgories.ItemsSource = await webService.GetMathSubTasks(taskcategory);
        }

It says SubCatgories is not available. How would I populate a list view inside the datacollection.

I have also tried this approach, still nothing:

<CollectionView x:Name="MathList" HeightRequest="320" SelectionChanged="MathList_SelectionChanged">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <xct:Expander Command="{Binding GetMathSubCatgories}">
                            <xct:Expander.Header>
                                <Frame Padding="10" Margin="10" HasShadow="False" BorderColor="LightGray" VerticalOptions="CenterAndExpand">
                                    <StackLayout Orientation="Horizontal">
                                        <Image Source="{Binding icon}" WidthRequest="25" HeightRequest="25"></Image>
                                        <Label Text="{Binding name}" TextColor="{Binding textColor}" FontSize="Large" FontAttributes="Bold" HeightRequest="35" VerticalOptions="CenterAndExpand"></Label>
                                    </StackLayout>
                                </Frame>
                            </xct:Expander.Header>
                            <Grid Padding="10">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <ListView x:Name="SubCatgories" ItemsSource="{Binding subCategories}">
                                    <ListView.ItemTemplate>
                                        <DataTemplate>
                                            <StackLayout>
                                                <Frame Padding="10" Margin="10" HasShadow="False" BorderColor="LightGray" VerticalOptions="CenterAndExpand">
                                                    <StackLayout Orientation="Horizontal">
                                                        <Label Text="{Binding name}" FontAttributes="Bold" HeightRequest="35" VerticalOptions="CenterAndExpand"></Label>
                                                    </StackLayout>
                                                </Frame>
                                            </StackLayout>
                                        </DataTemplate>
                                    </ListView.ItemTemplate>
                                </ListView>
                            </Grid>
                        </xct:Expander>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

Here is the class I am using for the collectionView

public class TaskClass
    {

        WebServiceClass webService = new WebServiceClass();

        List<SubTaskClass> subTasks = new List<SubTaskClass>();

        public int taskcategoryid { get; set; }
        public string type { get; set; }
        public string name { get; set; }
        public string icon { get; set; }
        public int sortOrder { get; set; }
        public string textColor
        {
            get
            {
                if (name == "Addition")
                {
                    return "#02cc9d";
                }
                else if (name == "Subtraction")
                {
                    return "black";
                }
                else if (name == "Divison")
                {
                    return "#fa5156";
                }
                else
                {
                    return "#23a0b6";
                }
            }
        }
        public List<SubTaskClass> subCategories
        {
            get
            {
                GetSubTasks(taskcategoryid);

                return subTasks;
            }
        }

        public async void GetSubTasks(int taskcategory)
        {
            subTasks = await webService.GetMathSubTasks(taskcategory);
        }
    }

and here is the SubTaskClass:

public class SubTaskClass
    {
        public int id { get; set; }
        public int taskcategory { get; set; }
        public string name { get; set; }
    }

Answer 1

From your code, I do one sample that you can take a look.

 <CollectionView
        x:Name="MathList"
        ItemsSource="{Binding catgories}"
        SelectedItem="{Binding selecteditem}"
        SelectionMode="Single">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <xct:Expander Command="{Binding command1}">
                    <xct:Expander.Header>
                        <Frame
                            Margin="10"
                            Padding="10"
                            BorderColor="LightGray"
                            HasShadow="False"
                            VerticalOptions="CenterAndExpand">
                            <StackLayout Orientation="Horizontal">
                                <Image
                                    HeightRequest="25"
                                    Source="{Binding icon}"
                                    WidthRequest="25" />
                                <Label
                                    FontAttributes="Bold"
                                    FontSize="Large"
                                    HeightRequest="35"
                                    Text="{Binding name}"
                                    TextColor="{Binding textColor}"
                                    VerticalOptions="CenterAndExpand" />
                            </StackLayout>
                        </Frame>
                    </xct:Expander.Header>
                    <Grid Padding="10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <ListView x:Name="SubCatgories" ItemsSource="{Binding subtasks}">
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell>


                                        <StackLayout>
                                            <Frame
                                                Margin="10"
                                                Padding="10"
                                                BorderColor="LightGray"
                                                HasShadow="False"
                                                VerticalOptions="CenterAndExpand">
                                                <StackLayout Orientation="Horizontal">
                                                    <Label
                                                        FontAttributes="Bold"
                                                        HeightRequest="35"
                                                        Text="{Binding name}"
                                                        VerticalOptions="CenterAndExpand" />
                                                </StackLayout>
                                            </Frame>
                                        </StackLayout>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </Grid>
                </xct:Expander>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

  public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        this.BindingContext = new SubCatgories();
    }
}
public class SubCatgories : INotifyPropertyChanged
{
    public ObservableCollection<TaskClass> catgories { get; set; }
    public ICommand command1 { get; set; }
    private TaskClass _selecteditem;
    public TaskClass selecteditem
    {
        get { return _selecteditem; }
        set
        {
            _selecteditem = value;
            RaisePropertyChanged("selecteditem");
        }
    }

    public SubCatgories()
    {
        catgories = new ObservableCollection<TaskClass>()
        {
            new TaskClass(){icon="favorite.png",name="catgory 1",textColor=Color.Black,subtasks=new ObservableCollection<SubTaskClass>(){
            new SubTaskClass(){name="sub class 1"}, new SubTaskClass(){name="sub class 2"}, new SubTaskClass(){name="sub class 3"}
            } },
             new TaskClass(){icon="check.png",name="catgory 2",textColor=Color.Blue,subtasks=new ObservableCollection<SubTaskClass>(){
            new SubTaskClass(){name="sub class 1"}, new SubTaskClass(){name="sub class 2"}, new SubTaskClass(){name="sub class 3"}
            } },
              new TaskClass(){icon="delete.png",name="catgory 3",textColor=Color.YellowGreen,subtasks=new ObservableCollection<SubTaskClass>(){
            new SubTaskClass(){name="sub class 1"}, new SubTaskClass(){name="sub class 2"}, new SubTaskClass(){name="sub class 3"}
            } },
               new TaskClass(){icon="flag.png",name="catgory 4",textColor=Color.ForestGreen,subtasks=new ObservableCollection<SubTaskClass>(){
            new SubTaskClass(){name="sub class 1"}, new SubTaskClass(){name="sub class 2"}, new SubTaskClass(){name="sub class 3"}
            } },
        };

        selecteditem = catgories[0];
        command1 = new Command(() => { Console.WriteLine(selecteditem.name); });
    }
  
    public event PropertyChangedEventHandler PropertyChanged;    
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

public class TaskClass
{
    public string icon { get; set; }
    public string name { get; set; }
    public Color textColor { get; set; }

    public ObservableCollection<SubTaskClass> subtasks { get; set; }
}

public class SubTaskClass
{
    public int id { get; set; }
    public int taskcategory { get; set; }
    public string name { get; set; }
}

The screenshot:

Note: Data items in a ListView are called cells, add ViewCell in ListView .