CODEWITHSUNDEEP
xamarinxamarin.forms
Will Nasby
Will Nasby

Reputation: 1148

Removing Padding from Entry

So Entry does not have a padding attribute, however there is some definite padding that goes on the Entry.

Example

enter image description here

I have the "Michigan" Entry lined up with the "Select" Label below, however they look misaligned because the entry has some padding to the left. I tried the margin attribute that entry does have, however it did not work.

How do I get rid of that gap/padding?

I'd like to add that adding an offset margin does not working.

Upvotes: 6

Views: 5505

Answers (4)

Adam Diament
Adam Diament

Reputation: 4840

Here's the same thing implemented on iOS for anyone who needs it there too. It's basically setting the left view to have 0 width that does it, but you can also play with the "LeftViewMode" to hide it completely. 

 this.Control.LeftView = new UIView(new CGRect(0, 0, 0, this.Control.Frame.Height));

Full code

using CoreGraphics;
using UIKit;
using YourNamespace.iOS.CustomRenderers;
using YourNamespace.Controls;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(BorderlessEntry), typeof(BorderlessEntryRenderer))]
namespace YourNamespace.iOS.CustomRenderers
{

    public class BorderlessEntryRenderer : Xamarin.Forms.Platform.iOS.EntryRenderer
    {

        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {

            base.OnElementChanged(e);
            if (this.Control != null)
            {

                this.Control.LeftView = new UIView(new CGRect(0, 0, 0, this.Control.Frame.Height));
                this.Control.LeftViewMode = UITextFieldViewMode.Always;

            }

        }
    }
}

Upvotes: 0

thomasgalliker
thomasgalliker

Reputation: 1857

I was struggling with the same issue, but I solved it by creating a custom Entry type which adds a Padding property to Xamarin Forms' Entry:

public class CustomEntry : Entry
{
    public static readonly BindableProperty PaddingProperty =
        BindableProperty.Create(
            nameof(Padding),
            typeof(Thickness),
            typeof(CustomEntry),
            new Thickness());

    public Thickness Padding
    {
        get { return (Thickness)this.GetValue(PaddingProperty); }
        set { this.SetValue(PaddingProperty, value); }
    }
}

Then I render this CustomEntry with a custom renderer, just as Danilow proposed, with the only difference, that I read the PaddingProperty from CustomEntry and apply it in the CustomEntryRenderer.

[assembly: ExportRenderer(typeof(Entry), typeof(CustomEntryRenderer))]

namespace CrossPlatformLibrary.Forms.Android.Renderers
{
    public class CustomEntryRenderer : EntryRenderer
    {
        public CustomEntryRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement == null)
            {
                return;
            }

            if (this.Element is CustomEntry customEntry)
            {
                var paddingLeft = (int)customEntry.Padding.Left;
                var paddingTop = (int)customEntry.Padding.Top;
                var paddingRight = (int)customEntry.Padding.Right;
                var paddingBottom = (int)customEntry.Padding.Bottom;
                this.Control.SetPadding(paddingLeft, paddingTop, paddingRight, paddingBottom);
            }
        }
    }
}

Beware: This code needs to be extended if you want to react on PaddingProperty changes - AND - you will need to write a custom renderer for IOS if you want to support the Padding property there too.

Upvotes: 1

Danilow
Danilow

Reputation: 420

For me the custom render that worked was:

[assembly: Xamarin.Forms.ExportRenderer(typeof(MyApp.Views.Controls.CustomEntry), typeof(MyApp.Droid.Views.Controls.CustomRenderer.Android.CustomEntryRenderer))]
namespace MyApp.Droid.Views.Controls
{
 namespace CustomRenderer.Android
    {
        public class CustomEntryRenderer : EntryRenderer
        {
            public CustomEntryRenderer(Context context) : base(context)
            {
            }

            protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Entry> e)
            {
                base.OnElementChanged(e);

                if (Control != null)
                {
                    Control.Background = new ColorDrawable(Color.Transparent);
                    Control.SetPadding(0, 0, 0, 0);
                    Control.Gravity = GravityFlags.CenterVertical | GravityFlags.Left;
                    Control.TextAlignment = TextAlignment.Gravity;
                }
            }
        }
    }
}

Upvotes: 3

Will Decker
Will Decker

Reputation: 3266

You need to make a custom renderer for the entry and set the Android EditText's PaddingLeft to 0 using the SetPadding method.

Excerpt from CustomEntryRenderer on Android:

protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
    base.OnElementChanged(e);
    if (e.NewElement == null) return;
    Control.SetPadding(0, Control.PaddingTop, Control.PaddingRight, Control.PaddingBottom);
}

Upvotes: 13

Related Questions