如何在 Xamarin Forms StackLayout 中居中嵌套内容？

Question

我希望此示例代码创建 3 个嵌套框，每个框都在其父框内居中。我的理解是基于What is the difference between Xamarin.Form's LayoutOptions, especially Fill and Expand?。这些框似乎水平居中但不是垂直居中。

完整回购：https://github.com/pawelpabich/Xamarin-Forms-Nested-Content

示例代码：

var mainPage = new ContentPage();

        var content = new StackLayout()
        {
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
            BackgroundColor = Color.Yellow,
            HeightRequest = 200,
            WidthRequest = 200,
            Children =
            {
                new StackLayout()
                {
                    BackgroundColor = Color.Blue,
                    HeightRequest = 100,
                    WidthRequest = 100,
                    VerticalOptions = LayoutOptions.Center,
                    HorizontalOptions = LayoutOptions.Center,
                    Children =
                    {
                        new StackLayout()
                        {
                            BackgroundColor = Color.Green,
                            HeightRequest = 50,
                            WidthRequest = 50,
                            VerticalOptions = LayoutOptions.Center,
                            HorizontalOptions = LayoutOptions.Center,
                        }
                    }
                }
            }

        };

        mainPage.Content = content;
        MainPage = mainPage;

应用程序在 windows 模拟器上运行时的最终结果：。

Answer 1

如here 所解释的非常详细：

Expansion: Will the element occupy more space if available?

Suffix Expand: If the parent view is larger than the combined size of all its children, i.e. additional space is available, then the space is proportioned amongst child views with that suffix. Those children will "occupy" their space, but do not necessarily "fill" it. We'll have a look on this behavior in the example below.

No suffix: The children without Expand suffix won't get additional space, even if more space is available.

        var mainPage = new ContentPage();

        var content = new StackLayout()
        {
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
            BackgroundColor = Color.Yellow,
            HeightRequest = 200,
            WidthRequest = 200,
            Children =
            {
                new StackLayout()
                {
                    BackgroundColor = Color.Blue,
                    HeightRequest = 100,
                    WidthRequest = 100,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    HorizontalOptions = LayoutOptions.Center,
                    Children =
                    {
                        new StackLayout()
                        {
                            BackgroundColor = Color.Green,
                            HeightRequest = 50,
                            WidthRequest = 50,
                            VerticalOptions = LayoutOptions.CenterAndExpand,
                            HorizontalOptions = LayoutOptions.Center,
                        }
                    }
                    }
            }

            };

        mainPage.Content = content;
        MainPage = mainPage;

工作正常。

因此，当您使用 CenterAndExpand 而不是 Center 时，您的内部项目可以占据比他们“需要”更多的 space ”（你强迫 StackLayout 提供更多 space）。否则 StackLayout 将只给它们“足够”space 但不会更多，因为这是默认行为。

如何在 Xamarin Forms StackLayout 中居中嵌套内容？

How to center nested content in Xamarin Forms StackLayout?

xamarin.forms