xamarin 表单将重复的 stacklayout 对象添加到 scrollView

Question

简介

我是 C# 编程新手，刚刚开始学习 Xamarin Forms。我在 Windows 上的 Visual Studio 2017 中使用 Xamarin 来制作跨平台应用。

现状

我创建了一个名为 Buy 的 TabbedPage，它有一个名为 BuyAnimals 的 contentPage。

ContentPage 需要有一个 ScrollView，它有一个 StackLayout 作为其子级。

StackLayout 有 3 个子框架。

在每个框架内，应该有一个名为 animalStack 的 StackLayout。

animalStack 有许多由 StackLayout 制成的子代。

问题。

如果我使用相同的 animalStack 作为三个 Frame 中的每一个的内容，则只有最后一个 frame 显示 animalStack 的内容，而其他两个 frame 什么也不显示。

为什么其他帧没有显示上一帧中显示的信息的副本？我怎样才能让他们显示信息？

我的代码如下所示。

`public partial class Buy : TabbedPage { 公开购买 () { 初始化组件();

        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;


    }
}`

非常感谢您的意见。

谢谢。

Answer 1

看来这就是你想做的：

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

您需要使用绑定来补充此方法。 请参阅this article 了解绑定和this one 了解列表视图模板。

希望对你有帮助。