Spacing between stack layouts containing Grid in Xamarin Forms

Question

I am relatively new to Xamarin and I am trying to achieve a screen something like this:

For the vertical listed items what I did, is I created individual StackLayouts for each item (so that in future if I need to add something to a specific item I can do it), that in themselves have Grids that further have the Icons and the Label. Something like this (I cant use XAML and have to code it in):

 ysiStackLayout layoutPropertyDashboardIem = new ysiStackLayout()
        {
            HorizontalOptions = LayoutOptions.FillAndExpand,
            VerticalOptions = LayoutOptions.Center,
       };

        layoutDashboardItems.Children.Add(layoutPropertyDashboardIem);

        Grid gridProperty = new Grid()
        {
            HorizontalOptions = LayoutOptions.Center,
            RowDefinitions = {
                new RowDefinition { Height = GridLength.Auto }
            },
            ColumnDefinitions =
            {
                new ColumnDefinition {Width = GridLength.Auto}
            },
            ColumnSpacing = 1
        };

        layoutPropertyDashboardIem.Children.Add(gridProperty); 

        ysiIcon iconProperty = new ysiIcon()
        {
            Icon = IconSet.fa_AngleDoubleLeft,
            IconSize = 30
        };

        gridProperty.Children.Add(iconProperty, 0, 0);

        ysiLabel labelProperty = new ysiLabel()
        {
            Text = "Property"
        };

        gridProperty.Children.Add(labelProperty, 1, 0);

` This is giving me the necessary items correctly;

But I am unable to give the spacing between the two items, annoyingly so. I have tried properties like Spacing and Padding but I haven't been able to find the exact way. Can someone please me direct an approach I can opt for? It'd really be a lot of help!

Answer 1

First, I would suggest adding child items before adding the parents to the root layout if that makes sense.

So create your grid, add item to that grid, then add the grid to the parent StackLayout.

To add the spacing, I would try Spacing and/or Margin:

ysiStackLayout layoutPropertyDashboardIem = new ysiStackLayout() {
    HorizontalOptions = LayoutOptions.FillAndExpand,
    VerticalOptions = LayoutOptions.Center,
    Spacing = 5                                 // Adding Spacing
};

Grid gridProperty = new Grid() {
    HorizontalOptions = LayoutOptions.Center,
    RowDefinitions = { new RowDefinition { Height = GridLength.Auto } },
    ColumnDefinitions = { new ColumnDefinition {Width = GridLength.Auto} },
    ColumnSpacing = 1,
    Margin = new Thickness(5)                   // Adding Margin
};

ysiIcon iconProperty = new ysiIcon() {
    Icon = IconSet.fa_AngleDoubleLeft,
    IconSize = 30
};

gridProperty.Children.Add(iconProperty, 0, 0);

ysiLabel labelProperty = new ysiLabel { Text = "Property" };

gridProperty.Children.Add(labelProperty, 1, 0);

layoutPropertyDashboardIem.Children.Add(gridProperty); // Add children in reverse order up the layout tree

layoutDashboardItems.Children.Add(layoutPropertyDashboardIem); // Add children in reverse order up the layout tree