Adding space in Xamarin.Forms layouts? - xamarin

Question

What's the proposed way to add space to layouts in Xamarin.Forms?
One way would be to add a Frame with no children like so:
new Frame {
BackgroundColor = Color.White,
HeightRequest = 1,
MinimumHeightRequest = 1,
HasShadow = false
}
Unfortunately, HeightRequest and MinimumHeightRequest get ignored.
Does a better way exist?

Answer 1

You could put your controls inside layouts (like frame, scroll view, stack panel) and use Padding property:
this.stackPanel = new StackLayout ()
{
Padding = new Thickness (8, 8)
};
var scrollView = new ScrollView ()
{
Content = stackPanel,
Padding = new Thickness (1, 2, 3, 4)
};
var frame = new Frame ()
{
Padding = new Thickness (8)
};
If you want space between two buttons for example, I believe this would do the trick. The first one adds 10 to bottom padding, the second adds 10 to top padding for total of 20.
var frame1 = new Frame ()
{
Padding = new Thickness (0,0,0,10),
Content = new Button()
};
var frame2 = new Frame ()
{
Padding = new Thickness (0,10,0,0),
Content = new Button()
};

Answer 2

Most Xamarin.Forms Layouts supports adding space between elements:
StackLayout has a Spacing property,
Grid has RowSpacing and ColumnSpacing properties,
...
Now, if you want to add spacing at a particular place, the way to to it is to include a BoxView:
myStackLayout.Children.Add (new BoxView {Color = Color.Transparent, HeightRequest = 5});
You can also wrap your content in a Frame or ContentView, but it adds padding to the content instead of adding space (although the effect will be the same).

Answer 3

What I do worked perfectly for me:
Suppose you want to distribute 2 Labels evenly on a horizontal StackLayout:
new StackLayout
{
Orientation = StackOrientation.Horizontal,
HorizontalOptions=LayoutOptions.CenterAndExpand,
Spacing = 0, // <- Very important!!
Children = {
new Label { Text = "Label 1" },
new BoxView { HorizontalOptions = LayoutOptions.FillAndExpand }, // <- the clever part
new Label { Text = "Label 2" }
}
};
Summary
By inserting BoxViews that fill the remaining space ("FillAndExpand") between your views, your views appear evenly distributed.
By setting Spacing = 0, you don't get extra space between your views.

Answer 4

Try:
myFrame.TranslateX=10;
myFrame.TranslateY=10;

Answer 5

I wanted to share a screenshot in conjunction with Lay González's answer but the edit queue was full->
To get dynamic spacing similar to CSS "Space-Between" in Xamarin you can insert filler views between your views that actually have content.
Here is an example:
Omit the filler view after the last "actual" view so that the view you want is at the end (the "-50" label at the bottom in the example).