How to center nested content in Xamarin Forms StackLayout?

Question

I expect this sample code to create 3 nested boxes with each box centered within its parent. My understanding is based on What is the difference between Xamarin.Form's LayoutOptions, especially Fill and Expand?. The boxes seem to be centered horizontally but not vertically.

Full repo: https://github.com/pawelpabich/Xamarin-Forms-Nested-Content

Sample Code:

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;

End result when the app is running on a windows emulator: .

Answer 1

As explained here in great detail:

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; 

Works fine.

So, when you use CenterAndExpand instead of Center, your inner items can occupy more space than they “need” (you are forcing StackLayout to give more space). Otherwise StackLayout will give them only “enough” space but not more as this is it's default behaviour.