Search code examples
c#xamarinnestedcollectionview

Xamarin nesting few CollectionViews


I have 3 classes, first with activity, second with meal and third with ingradients. I want to display these nesting CollectionViews first displaying activities, next meals and at last ingradients. I am still getting "The property 'ElementTemplateContent' is set more than once.". First two CollectionViews are work correctly. Issue arose when I tried to add third one. I also tried to add Bindable layout instead of CollectionView but the same error is occurring.

<CollectionView Margin="15, 30, 15, 15" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" SelectionMode="None" ItemsSource="{Binding Meal}" IsVisible="{Binding ActType}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical" ItemSpacing="1"/>
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Label TextColor="#2F3246" FontSize="12">
                <Label.FormattedText>
                    <FormattedString>
                        <FormattedString.Spans>
                            <Span Text="{Binding Name}" FontAttributes="Bold"/>
                        </FormattedString.Spans>
                    </FormattedString>
                </Label.FormattedText>
            </Label>
            <CollectionView Margin="15, 30, 15, 15" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" SelectionMode="None" ItemsSource="{Binding Ingradients}">
                <CollectionView.ItemsLayout>
                    <LinearItemsLayout Orientation="Vertical" ItemSpacing="1"/>
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Label TextColor="#2F3246" FontSize="12">
                            <Label.FormattedText>
                                <FormattedString>
                                    <FormattedString.Spans>
                                        <Span Text="{Binding Name}" FontAttributes="Bold"/>
                                    </FormattedString.Spans>
                                </FormattedString>
                            </Label.FormattedText>
                        </Label>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

This is how objects looks like

new Activity {
    Name = "Breakfast",
    Color = "#498467",
    // Color = "#C5283D",
    ActType = true,
    Time = "07:00",
    Meal = new ObservableCollection<Meal>{
        new Meal
        {
            Name = "Oatmeal",
            Ingradients = new ObservableCollection<Ingradients>
            {
                new Ingradients
                {
                    Name = "Oat",
                    Amount = 100.0,
                    Calories = 200,
                    Carbo = 120.0,
                    Protein = 20.0,
                    Fat = 10.0
                },
                new Ingradients
                {
                    Name = "Milk",
                    Amount = 100.0,
                    Calories = 20,
                    Carbo = 20.0,
                    Protein = 20.0,
                    Fat = 5.0
                }
            }
        }
    }
}

Solution

  • Some kind of containers (e.g. DataTemplate) can contain one and only one child. You should wrap DataTemplate content into a single object like StackLayout:

    <CollectionView Margin="15, 30, 15, 15" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" SelectionMode="None" ItemsSource="{Binding Meal}" IsVisible="{Binding ActType}">
        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Vertical" ItemSpacing="1"/>
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <StackLayout Orientation="Vertical"> // <--------------------------
                  <Label TextColor="#2F3246" FontSize="12">
                    <Label.FormattedText>
                        <FormattedString>
                            <FormattedString.Spans>
                                <Span Text="{Binding Name}" FontAttributes="Bold"/>
                            </FormattedString.Spans>
                        </FormattedString>
                    </Label.FormattedText>
                  </Label>
                  <CollectionView Margin="15, 30, 15, 15" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" SelectionMode="None" ItemsSource="{Binding Ingradients}">
                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout Orientation="Vertical" ItemSpacing="1"/>
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate>
                            <Label TextColor="#2F3246" FontSize="12">
                                <Label.FormattedText>
                                    <FormattedString>
                                        <FormattedString.Spans>
                                            <Span Text="{Binding Name}" FontAttributes="Bold"/>
                                        </FormattedString.Spans>
                                    </FormattedString>
                                </Label.FormattedText>
                            </Label>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                  </CollectionView>
                </StackLayout> // <--------------------------
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>