How to set top padding of Entry in Xamarin Forms

Question

In my Xamarin forms application, I need to set a top padding for Entry control in iOS. I created renderers for Entry , but only I am able to set Left and Right padding. Please help me. Following is the my Entry Renderer

public class CustomRenderer: EntryRenderer
{
    protected override void OnElementChanged (ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged (e);
        if (Control != null) {
            Control.LeftView = new UIView (new CGRect (0, 0, 15, 0));
            Control.LeftViewMode = UITextFieldViewMode.Always;

        }
    }

}

Answer 1

Use this for setting padding to an entry cell:

Padding in IOS :

Control.LeftView = new UIView(new CGRect(0,15,0,0));
Control.LeftViewMode = UITextFieldViewMode.Always;
Control.RightView = new UIView(new CGRect(0,10, 0, 0));
Control.RightViewMode = UITextFieldViewMode.Always;

Padding in Android:

Control.SetPadding(0, 10, 0, 0);

Accordingly, you can set the value to make text start from specific position.

Answer 2

To accomplish this, we need to do two things:

1. Increase the height of the Entry in Xamarin.Forms
2. Create an iOS Custom Renderer to align the text to the bottom of the UITextField

Increase The Entry Height in Xamarin.Forms

In this example, I use a RelativeLayout to set the height of the Padded Entry to 50, Constraint.Constant(50).

using System;

using Xamarin.Forms;

namespace CustomEntrySample
{
    public class EntryWithTopPadding : Entry
    {
    }

    public class App : Application
    {
        public App()
        {
            var normalEntry = new Entry
            {
                Text = "This Entry Has Normal Padding",
                BackgroundColor = Color.Lime
            };

            var paddedEntry = new EntryWithTopPadding
            {
                Text = "This Entry Has Extra Top Padding",
                BackgroundColor = Color.Aqua
            };

            var mainLayout = new RelativeLayout();
            mainLayout.Children.Add(
                normalEntry,
                Constraint.Constant(0),
                Constraint.RelativeToParent(parent => parent.Y + 10),
                Constraint.RelativeToParent(parent => parent.Width)
            );
            mainLayout.Children.Add(
                paddedEntry,
                Constraint.Constant(0),
                Constraint.RelativeToView(normalEntry, (parent, view) => view.Y + view.Height + 10),
                Constraint.RelativeToParent(parent => parent.Width),
                Constraint.Constant(50)
            );

            MainPage = new NavigationPage(
                new ContentPage
                {
                    Title = "Title",
                    Content = mainLayout,
                    Padding = new Thickness(10, 0, 10, 0)
                }
            );
        }
    }
}

Create Custom Renderer to Align Text to the Bottom of UITextField

Set the VerticalAlignment property of the UITextField to UIControlContentVerticalAlignment.Bottom

using UIKit;

using CustomEntrySample;
using CustomEntrySample.iOS;

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(EntryWithTopPadding), typeof(EntryWithTopPaddingCustomRenderer))]
namespace CustomEntrySample.iOS
{
    public class EntryWithTopPaddingCustomRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if(Control == null)
                return;

            Control.VerticalAlignment = UIControlContentVerticalAlignment.Bottom;
        }
    }
}