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. }
  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());
  16. // Thickness of the stroke line
  17. _gradientBackground.SetStroke(view.BorderWidth, view.BorderColor.ToAndroid());
  19. // Radius for the curves
  20. _gradientBackground.SetCornerRadius(
  21. DpToPixels(this.Context,Convert.ToSingle(view.CornerRadius)));
  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);
  7. if (e.NewElement != null)
  8. {
  9. var view = (CustomEntry)Element;
  11. Control.LeftView = new UIView(new CGRect(0f, 0f, 9f, 20f));
  12. Control.LeftViewMode = UITextFieldViewMode.Always;
  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")