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

Question

我希望这个示例代码能够创建3个嵌套框,每个框都在其父框架中居中.我的理解是基于Xamarin.Form的LayoutOptions有什么区别,特别是Fill和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

正如这里详细解释的那样:

扩展:元素是否会占用更多空间？

• 后缀展开:如果父视图大于其所有子项的组合大小,即可用额外空间,则该空间在具有该后缀的子视图之间成比例.那些孩子将"占据"他们的空间,但不一定"填补"它.我们将在下面的示例中查看此行为.

• 无后缀:没有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而不是Center时,您的内部项可能占用比"需要"更多的空间(您强制StackLayout提供更多空间).否则StackLayout将只给它们"足够"的空间,但不会更多,因为这是它的默认行为.