Xamarin.Forms Custom Label

Hello My Xamarin Friends,

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

Introduction:-
Label is a graphical control that is used to display text on the form or page, usually label to determine the entry or other widget.
When building any application, a label is the general control which is used most often.
"A Label is something describe a person or thing"
For Exa. A label is a father introducing his sons as "the smart one".

So we will first create a class whose name "CustomLabel" and then we will write a code in "C #"

	public class CustomLabel : Label
	{
	public static readonly BindableProperty CurvedCornerRadiusProperty =
	BindableProperty.Create(
	nameof(CurvedCornerRadius),
	typeof(double),
	typeof(CustomLabel),
	12.0);
	public double CurvedCornerRadius
	{
	get { return (double)GetValue(CurvedCornerRadiusProperty); }
	set { SetValue(CurvedCornerRadiusProperty, value); }
	}
	public static readonly BindableProperty CurvedBackgroundColorProperty =
	BindableProperty.Create(
	nameof(CurvedCornerRadius),
	typeof(Color),
	typeof(CustomLabel),
	Color.Default);
	public Color CurvedBackgroundColor
	{
	get { return (Color)GetValue(CurvedBackgroundColorProperty); }
	set { SetValue(CurvedBackgroundColorProperty, value); }
	}
	}

view raw CustomLabel.cs hosted with ❤ by GitHub

Now we can write some code in android project for set the Radius and Background Color....

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using Android.App;
	using Android.Content;
	using Android.OS;
	using Android.Runtime;
	using Android.Views;
	using Android.Widget;
	using Xamarin.Forms;
	using CustomControlApp.Droid;
	using Xamarin.Forms.Platform.Android;
	using Android.Graphics.Drawables;
	using Android.Util;
	using CustomControlApp;
	[assembly: ExportRenderer(typeof(CustomLabel), typeof(CurvedLabelRenderer))]
	namespace XYZApp.Droid
	{
	public class CurvedLabelRenderer : LabelRenderer
	{
	private GradientDrawable _gradientBackground;
	protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
	{
	base.OnElementChanged(e);
	var view = (CustomLabel)Element;
	if (view == null) return;
	// creating gradient drawable for the curved background
	_gradientBackground = new GradientDrawable();
	_gradientBackground.SetShape(ShapeType.Rectangle);
	_gradientBackground.SetColor(view.CurvedBackgroundColor.ToAndroid());
	// Thickness of the stroke line
	_gradientBackground.SetStroke(4, view.CurvedBackgroundColor.ToAndroid());
	// Radius for the curves
	_gradientBackground.SetCornerRadius(DpToPixels(this.Context,
	Convert.ToSingle(view.CurvedCornerRadius)));
	// set the background of the label
	Control.SetBackground(_gradientBackground);
	}
	//Px to Dp Conver
	public static float DpToPixels(Context context, float valueInDp)
	{
	DisplayMetrics metrics = context.Resources.DisplayMetrics;
	return TypedValue.ApplyDimension(ComplexUnitType.Dip, valueInDp, metrics);
	}
	}
	}

view raw CurvedLabelRenderer.cs hosted with ❤ by GitHub

Then we will create in Ios Project Also

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using Foundation;
	using UIKit;
	using Xamarin.Forms;
	using CustomControlApp;
	using CustomControlApp.iOS;
	using Xamarin.Forms.Platform.iOS;
	[assembly: ExportRenderer(typeof(CustomLabel), typeof(CurvedLabelRenderer))]
	namespace XYZApp.iOS
	{
	public class CurvedLabelRenderer : LabelRenderer
	{
	protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
	{
	base.OnElementChanged(e);
	if (e.NewElement != null)
	{
	var _xfViewReference = (CustomLabel)Element;
	this.Layer.CornerRadius = (float)_xfViewReference.CurvedCornerRadius;
	this.Layer.BackgroundColor = _xfViewReference.CurvedBackgroundColor.ToCGColor();
	}
	}
	}
	}

view raw CurvedLabelRenderer.cs hosted with ❤ by GitHub

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

xmlns:local="clr-namespace:CustomLabelApp"
then write xaml code in main page.

	<?xml version="1.0" encoding="utf-8" ?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:local="clr-namespace:CustomControlApp"
	xmlns:control="clr-namespace:CustomControlApp"
	x:Class="CustomControlApp.MainPage">
	<ContentPage.Content>
	<StackLayout Padding="20">
	<control:CustomLabel FontSize="14.5"
	CurvedBackgroundColor="#6DB040"
	TextColor="White"
	Text="Custom Label"
	HorizontalOptions="FillAndExpand"
	CurvedCornerRadius="16"
	HeightRequest="40"
	VerticalTextAlignment="Center"
	HorizontalTextAlignment="Center"/>
	<Label Text="Simple Label"
	HeightRequest="40"
	VerticalTextAlignment="Center"
	BackgroundColor="Gray"
	HorizontalTextAlignment="Center"/>
	</StackLayout>
	</ContentPage.Content>
	</ContentPage>

view raw MainPage.xaml.cs hosted with ❤ by GitHub

TADDAAAA!

You should have your CustomLabel working!!

Features of CustomLabel controls:-

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

You want to full source code Click Here

If you want to watch this video Click Here

Public Properties of Label controls:-

1.  Font Font. =(Font="13")
2.  FontAttributes FontAttributes. =(FontAttributes ="Bold")
3.  FontFamily String. =(FontFamily ="Arial")
4.  FontSize Double. =(FontSize ="Default")
5.  HorizontalTextAlignment TextAlignment.=(HorizontalTextAlignment ="Start")
6.  LineBreakMode LineBreakMode =(LineBreakMode ="CharacterWrap")
7.  Text String. =(Text ="xamarin buddy")
8.  TextColor Color. =(TextColor ="Azure")