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模拟器上运行时的最终结果： enter image description here 。

Answer 1

详细解释here：

扩展：如果可用，元素是否会占用更多空间？



后缀展开：如果父视图大于组合大小   所有的孩子，即可用的额外空间，然后是空间   具有该后缀的子视图中的比例。那些孩子   将“占据”他们的空间，但不一定“填补”它。好   在下面的示例中查看此行为。



没有后缀：   没有Expand后缀的孩子即使获得额外的空间也不会   更多空间可用。

        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 而不是中心时，您的内部项可能占用比“需要”更多的空间（您强制StackLayout提供更多空间）。否则，StackLayout将只给它们“足够”的空间，但不会更多，因为这是它的默认行为。

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

1 个答案: