xamarin forms add duplicate stacklayout object to a scrollView

Question

Introduction

I am new to C# programming, and have just started learning Xamarin Forms. I'm using Xamarin in Visual Studio 2017 on Windows to make a cross-platform app.

Current Situation

I have created a TabbedPage called Buy,it has a contentPage called BuyAnimals.

The ContentPage needs to have a ScrollView which has a single StackLayout as its child.

The StackLayout has 3 children which are Frames.

Inside each frame, there's supposed to be a StackLayout called animalStack.

The animalStack has many children made from StackLayout.

The Problem.

If I use that same animalStack as the content for each of the three Frames, only the last frame displays the contents of the animalStack while the other two frames show nothing.

Why aren't the other frames showing a duplicate of the information being show in the last frame? How can I make them show the information?

My code is as show below.

`public partial class Buy : TabbedPage { public Buy () { InitializeComponent();

        var animalItemIdStack = new StackLayout
        {
            Children = {
                new Label { Text = "Post ID: "},
                new Label { Text = "Animal ID"}
            },
            Orientation = StackOrientation.Horizontal
        };

        var animalUserIdStack = new StackLayout
        {
            Children = {
                new Label { Text = "user ID: "},
                new Label { Text = "Posting userID"}
            },
            Orientation = StackOrientation.Horizontal
        };

        var animalBreedStack = new StackLayout
        {
            Children = {
                new Label { Text = "Breed: "},
                new Label { Text = "Animal's breed"}
            },
            Orientation = StackOrientation.Horizontal
        };

        var animalGenderStack = new StackLayout
        {
            Children = {
                new Label { Text = "Gender: "},
                new Label { Text = "Animal's gender"}
            },
            Orientation = StackOrientation.Horizontal
        };
        var animalAgeStack = new StackLayout
        {
            Children = {
                new Label { Text = "Age: "},
                new Label { Text = "Animal's age"}
            },
            Orientation = StackOrientation.Horizontal
        };
        var animalColorStack = new StackLayout
        {
            Children = {
                new Label { Text = "Color: "},
                new Label { Text = "Animal's color"}
            },
            Orientation = StackOrientation.Horizontal
        };
        var animalPriceStack = new StackLayout
        {
            Children = {
                new Label { Text = "Price: "},
                new Label { Text = "Animal's price"}
            },
            Orientation = StackOrientation.Horizontal
        };
        var animalLocationStack = new StackLayout
        {
            Children = {
                new Label { Text = "Location: "},
                new Label { Text = "Animal owner's location"}
            },
            Orientation = StackOrientation.Horizontal
        };
        var animalEmailStack = new StackLayout
        {
            Children = {
                new Label { Text = "Location: "},
                new Label { Text = "Animal's location"}
            },
            Orientation = StackOrientation.Horizontal
        };
        var animalPhoneStack = new StackLayout
        {
            Children = {
                new Label { Text = "Phone: "},
                new Label { Text = "Animal owner's phone"}
            },
            Orientation = StackOrientation.Horizontal
        };
        var animalDatePostedStack = new StackLayout
        {
            Children = {
                new Label { Text = "Posted: "},
                new Label { Text = "Posted date"}
            },
            Orientation = StackOrientation.Horizontal
        };
        var animalLastEditStack = new StackLayout
        {
            Children = {
                new Label { Text = "Last Edit: "},
                new Label { Text = "Last Edited date"}
            },
            Orientation = StackOrientation.Horizontal
        };

        var animalStack = new StackLayout
        {
            Children =
            {
                animalItemIdStack,
                animalUserIdStack,
                animalBreedStack,
                animalGenderStack,
                animalAgeStack,
                animalColorStack,
                animalPriceStack,
                animalLocationStack,
                animalEmailStack,
                animalEmailStack,
                animalPhoneStack,
                animalDatePostedStack,
                animalLastEditStack
            },
            Orientation = StackOrientation.Vertical
        };

        var animalFrame = new Frame();
        animalFrame.Content = animalStack;

        var animalFrame2 = new Frame();
        animalFrame2.Content = animalStack;

        var animalFrame3 = new Frame();
        animalFrame3.Content = animalStack;

        var animalFullStack = new StackLayout();

        animalFullStack.Children.Add(animalFrame);
        animalFullStack.Children.Add(animalFrame2);
        animalFullStack.Children.Add(animalFrame3);

        var animalScrollView = new ScrollView();
        animalScrollView.Content = animalFullStack;

        BuyAnimals.Content = animalScrollView;


    }
}`

I'd really appreciate your input.

Thanks.

you can't add the same instance of a view to a layout multiple times. You need to create a new instance instead. — Jason
Seems like some properties of the StackLayout object (and others similars) are defined/calculated when they are shown based on his parent, so the same of it instance can't have multiple parents. — Diego Rafael Souza
Although, in this specific case, I guess you may use a ListView and define your layout as an ItemTemplate ViewCell. I will answer with some code to you to test if it fits (I really recommend you use bindings too) — Diego Rafael Souza

Diego Rafael Souza Diego Rafael Souza · Accepted Answer · 2017-07-24T20:11:44

Seems that is it what you wanna do:

public partial class Buy (...){
    InitalizeComponent();
    Content = GetContent();
}

public View GetContent()
{
    var animalItemIdStack = new StackLayout
    {
        Children = {
                new Label { Text = "Post ID: "},
                new Label { Text = "Animal ID"}
            },
        Orientation = StackOrientation.Horizontal
    };

    var animalUserIdStack = new StackLayout
    {
        Children = {
                new Label { Text = "user ID: "},
                new Label { Text = "Posting userID"}
            },
        Orientation = StackOrientation.Horizontal
    };

    var animalBreedStack = new StackLayout
    {
        Children = {
                new Label { Text = "Breed: "},
                new Label { Text = "Animal's breed"}
            },
        Orientation = StackOrientation.Horizontal
    };

    var animalGenderStack = new StackLayout
    {
        Children = {
                new Label { Text = "Gender: "},
                new Label { Text = "Animal's gender"}
            },
        Orientation = StackOrientation.Horizontal
    };
    var animalAgeStack = new StackLayout
    {
        Children = {
                new Label { Text = "Age: "},
                new Label { Text = "Animal's age"}
            },
        Orientation = StackOrientation.Horizontal
    };
    var animalColorStack = new StackLayout
    {
        Children = {
                new Label { Text = "Color: "},
                new Label { Text = "Animal's color"}
            },
        Orientation = StackOrientation.Horizontal
    };
    var animalPriceStack = new StackLayout
    {
        Children = {
                new Label { Text = "Price: "},
                new Label { Text = "Animal's price"}
            },
        Orientation = StackOrientation.Horizontal
    };
    var animalLocationStack = new StackLayout
    {
        Children = {
                new Label { Text = "Location: "},
                new Label { Text = "Animal owner's location"}
            },
        Orientation = StackOrientation.Horizontal
    };
    var animalEmailStack = new StackLayout
    {
        Children = {
                new Label { Text = "Location: "},
                new Label { Text = "Animal's location"}
            },
        Orientation = StackOrientation.Horizontal
    };
    var animalPhoneStack = new StackLayout
    {
        Children = {
                new Label { Text = "Phone: "},
                new Label { Text = "Animal owner's phone"}
            },
        Orientation = StackOrientation.Horizontal
    };
    var animalDatePostedStack = new StackLayout
    {
        Children = {
                new Label { Text = "Posted: "},
                new Label { Text = "Posted date"}
            },
        Orientation = StackOrientation.Horizontal
    };
    var animalLastEditStack = new StackLayout
    {
        Children = {
                new Label { Text = "Last Edit: "},
                new Label { Text = "Last Edited date"}
            },
        Orientation = StackOrientation.Horizontal
    };

    var animalStack = new StackLayout
    {
        Children =
            {
                animalItemIdStack,
                animalUserIdStack,
                animalBreedStack,
                animalGenderStack,
                animalAgeStack,
                animalColorStack,
                animalPriceStack,
                animalLocationStack,
                animalEmailStack,
                animalEmailStack,
                animalPhoneStack,
                animalDatePostedStack,
                animalLastEditStack
            },
        Orientation = StackOrientation.Vertical
    };

    var animalFrame = new Frame();
    animalFrame.Content = animalStack;


    var listView = new ListView();
    listView.ItemTemplate = new DataTemplate(() =>
    {
        return new ViewCell { View = animalFrame };
    });
    listView.ItemsSource = new List<object>()
            {
                new object(),
                new object(),
                new object(),
            };

    var contentStack = new StackLayout();
    contentStack.Children.Add(listView);

    return contentStack;
}

You'll need to complement this method with bindings. See this article about bindings and this one about listview templating.

I hope it helps you.

xamarin forms add duplicate stacklayout object to a scrollView

1 Answers