Xamarin.Forms Custom Entry

Article

Introduction

This article demonstrates how to create and use a Custom Entry control in Xamarin.Forms, XAML, and C#. This article starts with the introduction of the Custom Entry tag in XAML. After that, it demonstrates how to set BorderColor, BorderWidth, CornerRadius, and IsCurvedEnabled of a Custom Entry. In the end, the article discusses how to create a button at run-time.

Xamarin

Implementation

Open Visual Studio and select a New Project.

Xamarin

Now, select Cross Platform App, give the project a name, and set the project path. Then, click OK.

Xamarin

Select the template as "Blank App" and code sharing as "PCL".

Xamarin

Right-click on PCL Project and select Add >> New Item or Add >> Class.

Xamarin

We are creating a class CustomEntry.cs and writing the following C# code.

Xamarin

This property is set in the Android project as well as in iOS project.

Let us start with Android. We are creating a Class in Android Project and rendering the entry. Then, we set all the properties when initializing the PCL Project. Please make sure of the dependency ([assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]) of Android(CustomEntryRndered) and PCL(CustomEntry)…

Xamarin

CustomEntry.cs

public class CustomEntry : Entry
{
public static readonly BindableProperty BorderColorProperty =
BindableProperty.Create(nameof(BorderColor),
typeof(Color),typeof(CustomEntry),Color.Gray);
// Gets or sets BorderColor value
public Color BorderColor
{ get => (Color)GetValue(BorderColorProperty);
set => SetValue(BorderColorProperty, value);
}
public static readonly BindableProperty BorderWidthProperty =
BindableProperty.Create(nameof(BorderWidth),typeof(int),
typeof(CustomEntry),Device.OnPlatform<int>(1, 2, 2));
// Gets or sets BorderWidth value
public int BorderWidth
{
get =>(int)GetValue(BorderWidthProperty);
set => SetValue(BorderWidthProperty, value);
}
public static readonly BindableProperty CornerRadiusProperty =
BindableProperty.Create(nameof(CornerRadius),
typeof(double),typeof(CustomEntry),Device.OnPlatform<double>(6, 7, 7));
// Gets or sets CornerRadius value
public double CornerRadius
{
get =>(double)GetValue(CornerRadiusProperty);
set => SetValue(CornerRadiusProperty, value);
}
public static readonly BindableProperty IsCurvedCornersEnabledProperty =
BindableProperty.Create(nameof(IsCurvedCornersEnabled),
typeof(bool),typeof(CustomEntry),true);
// Gets or sets IsCurvedCornersEnabled value
public bool IsCurvedCornersEnabled
{
get => (bool)GetValue(IsCurvedCornersEnabledProperty);
set => SetValue(IsCurvedCornersEnabledProperty, value);
}
}

Now, it's time to go to the iOS project. Again, set the PCL(CustomEntry) property in IOS Project…. We are creating a Class, so right click on iOS Project and select Apple. Then, select "Class" and give this class a name as CustomEntryRendered.cs.

Xamarin

Now, let us write some code for Entry and Set Property.

CustomEntryRenderer.cs

public class CustomEntryRenderer : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
var view = (CustomEntry)Element;
if (view.IsCurvedCornersEnabled)
{
// creating gradient drawable for the curved background
var _gradientBackground = new GradientDrawable();
_gradientBackground.SetShape(ShapeType.Rectangle);
_gradientBackground.SetColor(view.BackgroundColor.ToAndroid());
// Thickness of the stroke line
_gradientBackground.SetStroke(view.BorderWidth, view.BorderColor.ToAndroid());
// Radius for the curves
_gradientBackground.SetCornerRadius(
DpToPixels(this.Context,Convert.ToSingle(view.CornerRadius)));
// set the background of the
Control.SetBackground(_gradientBackground);
}
// Set padding for the internal text from border
Control.SetPadding(
(int)DpToPixels(this.Context, Convert.ToSingle(12)),Control.PaddingTop,
(int)DpToPixels(this.Context, Convert.ToSingle(12)),Control.PaddingBottom);
}
}
public static float DpToPixels(Context context, float valueInDp)
{
DisplayMetrics metrics = context.Resources.DisplayMetrics;
return TypedValue.ApplyDimension(ComplexUnitType.Dip, valueInDp, metrics);
}
}

Xamarin

CustomEntryRenderer.cs

public class CustomEntryRenderer : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
var view = (CustomEntry)Element;
Control.LeftView = new UIView(new CGRect(0f, 0f, 9f, 20f));
Control.LeftViewMode = UITextFieldViewMode.Always;
Control.KeyboardAppearance = UIKeyboardAppearance.Dark;
Control.ReturnKeyType = UIReturnKeyType.Done;
// Radius for the curves
Control.Layer.CornerRadius = Convert.ToSingle(view.CornerRadius);
// Thickness of the Border Color
Control.Layer.BorderColor = view.BorderColor.ToCGColor();
// Thickness of the Border Width
Control.Layer.BorderWidth = view.BorderWidth;
Control.ClipsToBounds = true;
}
}
}

Now, go to the PCL Project and write this code in MainPage.xaml.

Xamarin

As you can see in the above code, we have to set the view reference in xmlns:custom="clr-namespace:CurvedEntry" MainPage.xaml.