Today, I am creating another new post in which I am going to tell you how to customize the button in Xamarin.Forms. So, let's start.

We will first create a class with a name as "CustomLabel" and then, we will write a code in C #.

  1. public class CustomLabel : Label
  2. {
  3. public static readonly BindableProperty CurvedCornerRadiusProperty =
  4. BindableProperty.Create(
  5. nameof(CurvedCornerRadius),
  6. typeof(double),
  7. typeof(CustomLabel),
  8. 12.0);
  10. public double CurvedCornerRadius
  11. {
  12. get { return (double)GetValue(CurvedCornerRadiusProperty); }
  13. set { SetValue(CurvedCornerRadiusProperty, value); }
  14. }
  16. public static readonly BindableProperty CurvedBackgroundColorProperty =
  17. BindableProperty.Create(
  18. nameof(CurvedCornerRadius),
  19. typeof(Color),
  20. typeof(CustomLabel),
  21. Color.Default);
  23. public Color CurvedBackgroundColor
  24. {
  25. get { return (Color)GetValue(CurvedBackgroundColorProperty); }
  26. set { SetValue(CurvedBackgroundColorProperty, value); }
  27. }
  28. }

Now, we can write some code in Android project for setting the radius and background color.

  1. [assembly: ExportRenderer(typeof(CustomLabel), typeof(CurvedLabelRenderer))]
  2. namespace XYZApp.Droid
  3. {
  4. public class CurvedLabelRenderer : LabelRenderer
  5. {
  6. private GradientDrawable _gradientBackground;
  7. protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
  8. {
  9. base.OnElementChanged(e);
  10. var view = (CustomLabel)Element;
  11. if (view == null) return;
  12. // creating gradient drawable for the curved background
  13. _gradientBackground = new GradientDrawable();
  14. _gradientBackground.SetShape(ShapeType.Rectangle);
  15. _gradientBackground.SetColor(view.CurvedBackgroundColor.ToAndroid());
  17. // Thickness of the stroke line
  18. _gradientBackground.SetStroke(4, view.CurvedBackgroundColor.ToAndroid());
  20. // Radius for the curves
  21. _gradientBackground.SetCornerRadius(DpToPixels(this.Context,
  22. Convert.ToSingle(view.CurvedCornerRadius)));
  24. // set the background of the label
  25. Control.SetBackground(_gradientBackground);
  26. }
  27. //Px to Dp Conver
  28. public static float DpToPixels(Context context, float valueInDp)
  29. {
  30. DisplayMetrics metrics = context.Resources.DisplayMetrics;
  31. return TypedValue.ApplyDimension(ComplexUnitType.Dip, valueInDp, metrics);
  32. }
  33. }
  34. }

Then, we will create the same in iOS project also.

  1. [assembly: ExportRenderer(typeof(CustomLabel), typeof(CurvedLabelRenderer))]
  2. namespace XYZApp.iOS
  3. {
  4. public class CurvedLabelRenderer : LabelRenderer
  5. {
  6. protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
  7. {
  8. base.OnElementChanged(e);
  9. if (e.NewElement != null)
  10. {
  11. var _xfViewReference = (CustomLabel)Element;
  12. this.Layer.CornerRadius = (float)_xfViewReference.CurvedCornerRadius;
  13. this.Layer.BackgroundColor = _xfViewReference.CurvedBackgroundColor.ToCGColor();
  14. }
  15. }
  16. }
  17. }

Now, again, please make sure to add a view reference.....

xmlns:local="clr-namespace:CustomLabelApp"

Then, write the XAML code in main page.

  1. <StackLayout Padding="20">
  2. <control:CustomLabel FontSize="14.5"
  3. CurvedBackgroundColor="#6DB040"
  4. TextColor="White"
  5. Text="Custom Label"
  6. HorizontalOptions="FillAndExpand"
  7. CurvedCornerRadius="16"
  8. HeightRequest="40"
  9. VerticalTextAlignment="Center"
  10. HorizontalTextAlignment="Center"/>
  11. <Label Text="Simple Label"
  12. HeightRequest="40"
  13. VerticalTextAlignment="Center"
  14. BackgroundColor="Gray"
  15. HorizontalTextAlignment="Center"/>
  16. </StackLayout>

You should have your Custom Label working!!

Features of CustomLabel controls

  1. Custom Curved Background Color Property=(CurvedBackgroundColor="#24C4FF")
  2. Custom Curved Corner Radius Property=(CurvedCornerRadius="4")

For complete source code, click here.