Xamarin.Forms Custom Label

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);  
  9.   
  10.       public double CurvedCornerRadius  
  11.       {  
  12.           get { return (double)GetValue(CurvedCornerRadiusProperty); }  
  13.           set { SetValue(CurvedCornerRadiusProperty, value); }  
  14.       }  
  15.   
  16.       public static readonly BindableProperty CurvedBackgroundColorProperty =  
  17.           BindableProperty.Create(  
  18.               nameof(CurvedCornerRadius),  
  19.               typeof(Color),  
  20.               typeof(CustomLabel),  
  21.               Color.Default);  
  22.   
  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 == nullreturn;  
  12.             // creating gradient drawable for the curved background  
  13.             _gradientBackground = new GradientDrawable();  
  14.             _gradientBackground.SetShape(ShapeType.Rectangle);  
  15.             _gradientBackground.SetColor(view.CurvedBackgroundColor.ToAndroid());  
  16.   
  17.             // Thickness of the stroke line  
  18.             _gradientBackground.SetStroke(4, view.CurvedBackgroundColor.ToAndroid());  
  19.   
  20.             // Radius for the curves  
  21.             _gradientBackground.SetCornerRadius(DpToPixels(this.Context,  
  22.                 Convert.ToSingle(view.CurvedCornerRadius)));  
  23.   
  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.

Ebook Download
View all
Learn
View all