Skip to content

Instantly share code, notes, and snippets.

@davidtavarez
Last active April 6, 2022 20:09
Show Gist options
  • Save davidtavarez/e3580c98357edd89de6f to your computer and use it in GitHub Desktop.
Save davidtavarez/e3580c98357edd89de6f to your computer and use it in GitHub Desktop.
Xamarin.Forms Entry just with bottom border.
using Xamarin.Forms;
namespace YOUTNAMESPACE
{
public class LineEntry : Entry
{
public static readonly BindableProperty BorderColorProperty =
BindableProperty.Create<LineEntry, Color> (p => p.BorderColor, Color.Black);
public Color BorderColor {
get { return (Color)GetValue (BorderColorProperty); }
set { SetValue (BorderColorProperty, value); }
}
public static readonly BindableProperty FontSizeProperty =
BindableProperty.Create<LineEntry, double> (p => p.FontSize, Font.Default.FontSize);
public double FontSize {
get { return (double)GetValue (FontSizeProperty); }
set { SetValue (FontSizeProperty, value); }
}
public static readonly BindableProperty PlaceholderColorProperty =
BindableProperty.Create<LineEntry, Color> (p => p.PlaceholderColor, Color.Default);
public Color PlaceholderColor {
get { return (Color)GetValue (PlaceholderColorProperty); }
set { SetValue (PlaceholderColorProperty, value); }
}
}
}
using Xamarin.Forms.Platform.iOS;
using Xamarin.Forms;
using UIKit;
using YOUTNAMESPACE.iOS;
using System.ComponentModel;
using CoreAnimation;
using Foundation;
[assembly: ExportRenderer (typeof(YOUTNAMESPACE.LineEntry), typeof(LineEntryRenderer))]
namespace YOUTNAMESPACE.iOS
{
public class LineEntryRenderer: EntryRenderer
{
protected override void OnElementChanged (ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged (e);
if (Control != null) {
Control.BorderStyle = UITextBorderStyle.None;
var view = (Element as LineEntry);
if (view != null) {
DrawBorder (view);
SetFontSize (view);
SetPlaceholderTextColor (view);
}
}
}
protected override void OnElementPropertyChanged (object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged (sender, e);
var view = (LineEntry)Element;
if (e.PropertyName.Equals (view.BorderColor))
DrawBorder (view);
if (e.PropertyName.Equals (view.FontSize))
SetFontSize (view);
if (e.PropertyName.Equals (view.PlaceholderColor))
SetPlaceholderTextColor (view);
}
void DrawBorder (LineEntry view)
{
var borderLayer = new CALayer ();
borderLayer.MasksToBounds = true;
borderLayer.Frame = new CoreGraphics.CGRect (0f, Frame.Height / 2, Frame.Width, 1f);
borderLayer.BorderColor = view.BorderColor.ToCGColor ();
borderLayer.BorderWidth = 1.0f;
Control.Layer.AddSublayer (borderLayer);
Control.BorderStyle = UITextBorderStyle.None;
}
void SetFontSize (LineEntry view)
{
if (view.FontSize != Font.Default.FontSize)
Control.Font = UIFont.SystemFontOfSize ((System.nfloat)view.FontSize);
else if (view.FontSize == Font.Default.FontSize)
Control.Font = UIFont.SystemFontOfSize (17f);
}
void SetPlaceholderTextColor (LineEntry view)
{
if (string.IsNullOrEmpty (view.Placeholder) == false && view.PlaceholderColor != Color.Default) {
var placeholderString = new NSAttributedString (view.Placeholder,
new UIStringAttributes { ForegroundColor = view.PlaceholderColor.ToUIColor () });
Control.AttributedPlaceholder = placeholderString;
}
}
}
}
@parth7676
Copy link

@vhugogarcia For IOS maybe this will help you

void DrawBorder(ExtendedEntry view)
{
view.Placeholder = "Test Place Holder";
view.PlaceholderColor = Color.Black;
var borderLayer = new CALayer();
borderLayer.MasksToBounds = true;
borderLayer.Frame = new CoreGraphics.CGRect(0f, Frame.Height / 2, Frame.Width, 1f);
borderLayer.BorderColor = UIColor.Black.CGColor;
borderLayer.BorderWidth = 1.0f;
borderLayer.CornerRadius = 1;
Control.Layer.AddSublayer(borderLayer);
Control.BorderStyle = UITextBorderStyle.None;
}

@mshenoy83
Copy link

What worked for me was to create an Xml file called entry_underline.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item android:bottom="1dp"
      android:left="-20dp"
      android:right="-20dp"
      android:top="-20dp">
    <shape android:shape="rectangle" >
      <stroke android:width="1dp"/>
    </shape>
  </item>
</layer-list>

Then I used this code to import the xml as a background for my Entry

Control.Background = Resources.GetDrawable("entry_underline");

Still figuring out how to color this thing. If anyone has any ideas , they're welcome

@tooluke
Copy link

tooluke commented Nov 2, 2017

if you would change FontFamily


`

using YOURNAMESPACE.iOS;
using System.ComponentModel;
using CoreAnimation;
using Foundation;

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

            if (Control != null)
            {
                Control.BorderStyle = UITextBorderStyle.None;

                var view = (Element as LineEntry);
                if (view != null)
                {   
                    SetFontSize(view);
                    SetFontFamily(view);
                    DrawBorder(view);
                    SetPlaceholderTextColor(view);
                }
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            var view = (LineEntry)Element;

            if (e.PropertyName.Equals(view.FontFamily))
                SetFontFamily(view);
            if (e.PropertyName.Equals(view.FontSize))
                SetFontSize(view);
            if (e.PropertyName.Equals(view.PlaceholderColor))
                SetPlaceholderTextColor(view);
        }

        void DrawBorder(LineEntry view)
        {
            var borderLayer = new CALayer();
            borderLayer.MasksToBounds = true;
            borderLayer.Frame = new CoreGraphics.CGRect(0f, Frame.Height/2 , Frame.Width, .5f);
            borderLayer.BorderWidth = .5f;

            Control.Layer.AddSublayer(borderLayer);
            Control.BorderStyle = UITextBorderStyle.None;
        }

        void SetFontSize(LineEntry view)
        {
            if (view.FontSize != Font.Default.FontSize)
                Control.Font = UIFont.SystemFontOfSize((System.nfloat)view.FontSize);
            else if (view.FontSize == Font.Default.FontSize)
                Control.Font = UIFont.SystemFontOfSize(17f);
        }

        void SetFontFamily(LineEntry view)
        {
            if (view.FontFamily != Font.Default.FontFamily)
                Control.Font = UIFont.FromName(view.FontFamily, (System.nfloat)view.FontSize);
            else if (view.FontFamily == Font.Default.FontFamily)
                Control.Font = UIFont.FromName(YOURFONTNAME, 17f);       
        }

        void SetPlaceholderTextColor(LineEntry view)
        {
            if (string.IsNullOrEmpty(view.Placeholder) == false && view.PlaceholderColor != Color.Default)
            {
                var placeholderString = new NSAttributedString(view.Placeholder,
                                            new UIStringAttributes { ForegroundColor = view.PlaceholderColor.ToUIColor() });
                Control.AttributedPlaceholder = placeholderString;
            }
        }
    }
}

`

Thank's you David

@agat366
Copy link

agat366 commented Feb 9, 2018

That looks cool, but what if I use Style property for the control font family/size/color etc.? (Including implicit style definition)? In that case, it doesn't work at all. In addition, the input width also differs from default controls as it lacks the padding sizes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment