Xamarin Forms Margins

Question

I'm trying to find some margins analog in Xamarin.Forms documentation. Does anybody know is there something or paddings is all we are having?

Update: For best understanding of what margin is (it's from MSDN for WPF):

Answer 1

At Last! Xamarin Forms 2.2.0 includes Margins support!

Here are the docs with a great visual.

UPD Special for @AUSTX_RJL Margin value is Thickness, just like in any other XAML frameworks.

You can set Thickness in XAML by setting one, two or four values separated by comma or whitespace: "1 2 3 4" is same as "1, 2, 3, 4" and sets:

• 1 for Left
• 2 for Top
• 3 for Right
• 4 for Bottom

Fields of Thickness

"1 2" sets:

• 1 for Left and Right fields
• 2 for Top and Bottom fields

"1" sets 1 for all fields of Thickness

Answer 2

As of 2014-06-05, there are no margins in Xamarin.Forms. Wrap your content in ContentView, Frame or any other Layout, and use the Padding property.

Answer 3

 StackLayout components = new StackLayout
        {
            Orientation = StackOrientation.Vertical,
            Spacing=10,
            Padding = new Thickness (10, 10, 10, 20),
            Children = {
                new Label {Text = "Hello"},
                new Label {Text = "World"}
            }
        };  

Using the Spacing property you can add space between all children views in the layout.

Using the Padding property you can add space in (left, top, right and bottom) positions of the layout.

If you want each label child view to have different margin, you can do the following. 1)Create and use custom Label like that:

using System;
using Xamarin.Forms;

namespace SharedViews
{

/// <summary>
/// Label propertis that will be rendered in native iOS and native Android Renderers.
/// </summary>
public class MyLabel : Label
{
    /// <summary>
    /// The x position of the label.
    /// </summary>
    public static readonly BindableProperty xProperty = BindableProperty.Create<MyLabel,int>(p => p.X,0);

    public int X{
        get{ return (int)base.GetValue(xProperty);}
        set {base.SetValue(xProperty,value);}
    }

    /// <summary>
    /// The y position of the label.
    /// </summary>
    public static readonly BindableProperty yProperty = BindableProperty.Create<MyLabel,int>(p => p.Y,0);

    public int Y{
        get{ return (int)base.GetValue(yProperty);}
        set {base.SetValue(yProperty,value);}
    }

   }
}

2) Create your iOS and android renderers

Android Renderer:

using System;
using Android.Widget;
using Android.Graphics;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer (typeof (MyLabel), typeof (MyLabelRenderer))]
namespace ChessGame.Android{
/// <summary>
/// Android label renderer:
/// here we set native Android label properties that can't be accessed in xamarin label.
/// </summary>
public class MyLabelRenderer : LabelRenderer
{
    protected override void OnElementChanged (ElementChangedEventArgs<Label> e) {
        base.OnElementChanged (e);
        MyLabel element = (MyLabel)this.Element;
        var nativeLabelView = (TextView)Control;
        nativeLabelView.SetX (element.X);
        nativeLabelView.SetY (element.Y);
    }
  }
}

Answer 4

Layouts support a Padding property which applies to the children contained in the Layout. I think this is the closest to a Margin concept that they currently support

  var stackLayout = new StackLayout {
    Padding = new Thickness (10, 10, 10, 20),
    Children = {
      new Label {Text = "Hello"},
      new Label {Text = "World"}
    }
  }

Answer 5

Here's an extension to the Xamarin.Forms.View for adding padding to any item:

public static class XamarinFormsUtil
{
    public static View WithPadding(this View view, double all)
    {
        return WithPadding (view, all, all, all, all);
    }

    public static View WithPadding(this View view, double left, double top, double right, double bottom)
    {
        return new Frame () {
            Content = view,
            Padding = new Thickness(left, top, right, bottom)
        };
    }
}

With this static class referenced, you can now create the Content for your page inside the constructor, using WithPadding for convenience:

Content = new StackLayout () {
    Orientation = StackOrientation.Vertical,
    Children = {
        welcome.WithPadding(10),
        stars.WithPadding(10),
        starCount.WithPadding(10)
    }
};

Answer 6

Margins - control the space between controls.
Padding - controls the spacing between a parent control and its child controls.

As @ad1dima stated, Xamarin forms 2.2 (released on April 27) introduced margins. You can find documentation on the margin property at https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/margin-and-padding/