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):

Solution 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

Solution 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.

Solution 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);
    }
  }
}

Solution 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"}
    }
  }

Solution 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)
    }
};

View more solutions

Comments

[ad1Dima]

I know about paddings. But if we speak about your sample, I want set spacing between two labels. Sure, I can put each label in layout, but it increases complexity.

[ad1Dima]

what a pity. Any plans?

[ad1Dima]

All those things going for children's layout. Margins works other way. For ex, if there was margins you'll be able to get different left space for different children in StackLayout. Or Different spacing between childs. Without margins you have to put each child to separate container to reach that.

[Ahmed Hesham]

@ad1Dima Yes you are right, Spacing and Padding are applied on all child views. So if you want each label child view to have different margin you can use LabelRenderer. I'll edit the answer to show that.

[Léon Pelletier]

I'm all with them. Implementing margins in a layout engine is such a pita as it adds an ugly layer to it. Margins may (e.g.) act on the exterior (outer) available space without affecting the original size of your view. It involves for the engine developer to make concessions between different layout behaviors (does allowing 20% of the width includes margin or not, etc.) and to break their nice and simple engine. Implementing it in Xamarin.Forms will imply dealing with all platform layouting API features and behaviors.

[ad1Dima]

As I can see, that's padding not margin. Am I right?

[Clint StLaurent]

This is real correct answer. Just update to the latest release of Xamarin.Forms. I can confirm that 2.2.0.45 which is a stable release at this time (not a pre-release) the Margin property seems to work as expected: IE: The way all of WPF developers are used to.

[ToolmakerSteve]

My apologies for downvoting. It was necessary to push this answer below the updated, accepted, answer that clarifies there now is margin support. (I originally didn't notice that answer, as it was not at top.)

[Stephane Delcroix]

@ToolmakerSteve that's fine

[AUSTX_RJL]

This answer does NOT say what the margin values are, e.g. "1, 2, 3, 4" -- Define each parameter.

[ad1Dima]

@AUSTX_RJL Should it?

[Joep Beusenberg]

Actually there's a difference between spaces and comma. With spaces the order is TRBL while with comma's it is LTRB. Super confusing.