Xamarin.Forms Custom Entry

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

  1. public class CustomEntry : Entry  
  2.   {  
  3.       public static readonly BindableProperty BorderColorProperty =  
  4.       BindableProperty.Create(nameof(BorderColor),  
  5.           typeof(Color),typeof(CustomEntry),Color.Gray);  
  6.       // Gets or sets BorderColor value  
  7.       public Color BorderColor  
  8.       {   get => (Color)GetValue(BorderColorProperty);   
  9.           set => SetValue(BorderColorProperty, value);   
  10.       }  
  11.         
  12.       public static readonly BindableProperty BorderWidthProperty =  
  13.       BindableProperty.Create(nameof(BorderWidth),typeof(int),  
  14.           typeof(CustomEntry),Device.OnPlatform<int>(1, 2, 2));  
  15.       // Gets or sets BorderWidth value  
  16.       public int BorderWidth  
  17.       {  
  18.           get =>(int)GetValue(BorderWidthProperty);   
  19.           set => SetValue(BorderWidthProperty, value);   
  20.       }  
  21.       public static readonly BindableProperty CornerRadiusProperty =  
  22.       BindableProperty.Create(nameof(CornerRadius),  
  23.           typeof(double),typeof(CustomEntry),Device.OnPlatform<double>(6, 7, 7));  
  24.       // Gets or sets CornerRadius value  
  25.       public double CornerRadius  
  26.       {  
  27.           get =>(double)GetValue(CornerRadiusProperty);   
  28.           set => SetValue(CornerRadiusProperty, value);   
  29.       }  
  30.       public static readonly BindableProperty IsCurvedCornersEnabledProperty =  
  31.       BindableProperty.Create(nameof(IsCurvedCornersEnabled),  
  32.           typeof(bool),typeof(CustomEntry),true);  
  33.       // Gets or sets IsCurvedCornersEnabled value  
  34.       public bool IsCurvedCornersEnabled  
  35.       {  
  36.           get => (bool)GetValue(IsCurvedCornersEnabledProperty);   
  37.           set => SetValue(IsCurvedCornersEnabledProperty, value);   
  38.       }  
  39.   }  

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

  1. public class CustomEntryRenderer : EntryRenderer  
  2.     {  
  3.         protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)  
  4.         {  
  5.             base.OnElementChanged(e);  
  6.             if (e.NewElement != null)  
  7.             {  
  8.                 var view = (CustomEntry)Element;  
  9.                 if (view.IsCurvedCornersEnabled)  
  10.                 {  
  11.                     // creating gradient drawable for the curved background  
  12.                     var _gradientBackground = new GradientDrawable();  
  13.                     _gradientBackground.SetShape(ShapeType.Rectangle);  
  14.                     _gradientBackground.SetColor(view.BackgroundColor.ToAndroid());  
  15.                   
  16.                     // Thickness of the stroke line  
  17.                     _gradientBackground.SetStroke(view.BorderWidth, view.BorderColor.ToAndroid());  
  18.                   
  19.                     // Radius for the curves  
  20.                     _gradientBackground.SetCornerRadius(  
  21.                         DpToPixels(this.Context,Convert.ToSingle(view.CornerRadius)));  
  22.                   
  23.                     // set the background of the   
  24.                     Control.SetBackground(_gradientBackground);  
  25.                 }  
  26.                 // Set padding for the internal text from border  
  27.                 Control.SetPadding(  
  28.                     (int)DpToPixels(this.Context, Convert.ToSingle(12)),Control.PaddingTop,  
  29.                     (int)DpToPixels(this.Context, Convert.ToSingle(12)),Control.PaddingBottom);  
  30.             }  
  31.         }  
  32.         public static float DpToPixels(Context context, float valueInDp)  
  33.         {  
  34.             DisplayMetrics metrics = context.Resources.DisplayMetrics;  
  35.             return TypedValue.ApplyDimension(ComplexUnitType.Dip, valueInDp, metrics);  
  36.         }  
  37.     }  

Xamarin

CustomEntryRenderer.cs

  1. public class CustomEntryRenderer : EntryRenderer  
  2.     {  
  3.         protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)  
  4.         {  
  5.             base.OnElementChanged(e);  
  6.   
  7.             if (e.NewElement != null)  
  8.             {  
  9.                 var view = (CustomEntry)Element;  
  10.   
  11.                 Control.LeftView = new UIView(new CGRect(0f, 0f, 9f, 20f));  
  12.                 Control.LeftViewMode = UITextFieldViewMode.Always;  
  13.   
  14.                 Control.KeyboardAppearance = UIKeyboardAppearance.Dark;  
  15.                 Control.ReturnKeyType = UIReturnKeyType.Done;  
  16.                 // Radius for the curves  
  17.                 Control.Layer.CornerRadius = Convert.ToSingle(view.CornerRadius);  
  18.                 // Thickness of the Border Color  
  19.                 Control.Layer.BorderColor = view.BorderColor.ToCGColor();  
  20.                 // Thickness of the Border Width  
  21.                 Control.Layer.BorderWidth = view.BorderWidth;  
  22.                 Control.ClipsToBounds = true;  
  23.             }  
  24.         }  
  25.     }  

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.

Write the following code for CustomEntry.

MainPage.xaml

  1. <custom:CustomEntry  
  2.                              CornerRadius="18"  
  3.                              IsCurvedCornersEnabled="True"  
  4.                              BorderColor="BlueViolet"      
  5.                              HorizontalTextAlignment="Center"  
  6.                              FontSize="17"  
  7.                              HeightRequest="40"  
  8.                              Placeholder="Custom Entry"  
  9.                              PlaceholderColor="Gray"  
  10.                              TextColor="Black"  
  11.                              FontAttributes="Bold"  
  12.                              WidthRequest="100"/>  

Xamarin

Now, you will have your Custom Entry working!!

Relaterd Video Click Here 

Features of CustomEntry controls

  1. Custom Border Color Property=(CustomBorderColor="#24C4FF")
  2. Custom Corner Radius Property=(CustomBorderRadius="4")
  3. Custom Border Width Property=(CustomBorderWidth="4")
  4. Custom IsCurvedCornersEnabled =(IsCurvedCornersEnabled ="True")