How can I add duplicate StackLayout object in a scroll view?

andyfmking2andyfmking2 TZMember

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;


    }
}`

What I get

What I expect to get

I'd really appreciate your input.

Thanks.

Sign In or Register to comment.