StackLayout inside StackLayout creates overflow

Question

I'm creating a menu and this is the scene:

(I'm just hiding the items names)

So this is the code:

public Menu(List<Document> documents, MenuItem parent) {
        ParentItem = parent;

        Orientation = StackOrientation.Vertical;
        HorizontalOptions = LayoutOptions.FillAndExpand;
        VerticalOptions = LayoutOptions.FillAndExpand;
        Spacing = 0;
        Margin = new Thickness(0);
        Padding = new Thickness(0);

        if (documents.Count > 0)
            foreach (Document doc in documents)
                AddItem(new MenuItem(doc, this));
    }

public MenuItem(Document doc, Menu parent) {
        Orientation = StackOrientation.Vertical;
        HorizontalOptions = LayoutOptions.FillAndExpand;
        VerticalOptions = LayoutOptions.Start;
        BackgroundColor = Color.Transparent;
        Spacing = 0;
        Margin = new Thickness(0);
        Padding = new Thickness(0);

        Document = doc;

        Parent = parent;
        Head = new MenuItemHead(doc);
        var bdy = new StackLayout() {
            Orientation = StackOrientation.Vertical,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            BackgroundColor = Color.Transparent,
            Spacing = 0,
            Margin = new Thickness(0),
            Padding = new Thickness(15, 0, 0, 0)
        };
        bdy.Children.Add(new Menu(doc.Documents, this));
        Body = bdy;

        Active = false;

        if (!doc.IsFolderOpen) {
            var tapped = new TapGestureRecognizer();
            tapped.Tapped += (s, e) => {
                bool wasActive = Active;
                parent.CollapseItems();
                if (!wasActive) Show();
            };
            Head.GestureRecognizers.Add(tapped);
        } else {
            if (doc.Documents.Count > 0) {
                var tapped = new TapGestureRecognizer();
                tapped.Tapped += async (s, e) => {
                    await MenuView.Push(new Menu(doc.Documents, this));
                };
                Head.GestureRecognizers.Add(tapped);
            }
        }
    }

Why the menu item body is overflowing? I don't get it, maybe I'm missing something.

FreakyAli FreakyAli · Accepted Answer · 2018-12-19T06:51:21

If you check the Microsoft Docs for a StackLayout

You will find out that your StackLayout has a default spacing of 6.

Setting the Spacing to 0 should do the trick for you.

StackLayout inside StackLayout creates overflow

1 Answers