xamarin 表单 - 填充集合视图内的列表视图答案

【问题标题】：xamarin forms - populate list view that is inside collection viewxamarin 表单 - 填充集合视图内的列表视图
【发布时间】：2021-05-06 15:14:38
【问题描述】：

我正在使用 Xamarin Forms 集合视图，在此集合视图中是工具包扩展器，当有人单击标题时我已经绑定了一个命令，在此命令中我试图在扩展器的网格内填充一个列表视图，请参阅代码下面：

<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>

但是当我尝试像这样填充列表视图时，在我的代码后面：

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

            GetSubTasks(taskcategoryid);

        });

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

它说子类别不可用。我将如何在数据集合中填充列表视图。

这个方法我也试过了，还是不行：

<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>

这是我用于 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);
        }
    }

这里是子任务类：

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

【问题讨论】：

首先，在 CollectionView 中嵌套 ListView 是一个非常糟糕的主意，您应该避免它。但是，如果您必须这样做，您的 CollectionView ItemsSource 应该包含您需要的嵌套数据，并且您应该使用绑定来设置 ListView ItemsSource。
我已经这样做了，什么也没做，我很快就会得到一个我尝试在那里做的例子
@Jason 我更新了我的问题
如果您想动态加载子猫，您需要使用 INPC 并引发 PropertyChanged 事件。或者像我最初建议的那样做，用原始数据加载所有子猫。
页面加载时查看 VS 的输出窗格。是否有任何错误或警告？此外，当taskcategoryid 更改时，您的代码中没有任何内容可以告诉 XAML subCategories 属性将返回不同的值。 taskcategoryid 需要是具有支持字段的属性。它的设置器必须包含一行，说明“subCategories”属性已更改。阅读“属性更改通知”或“MVVM”或“ViewModel”。找到一些示例，其中设置一个属性也会更改另一个属性。（当 .Net Maui 最终完成时，尝试 MVU。可能比 DataBinding/MVVM 更容易做到。）

标签： c# xamarin.forms

【解决方案1】：

根据您的代码，我做了一个示例，您可以看看。

 <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; }
}

截图：

注意：ListView中的数据项称为单元格，在ListView中添加ViewCell。

【讨论】：