Xamarin.Forms Custom Underline Label

Hello Xamarin Friends ,
I came across the task of underline on a label in the design of a login and I also needed the underline label, that's why I have created a custom underline label today.

So let's start friends,

First, we create a ContentView whoes name is UnderLineLabel.xaml and then set the Label and Boxview.

	<ContentView.Content>
	<StackLayout Grid.Row="0" Padding="0" VerticalOptions="Center">
	<Label x:Name="customLabel" Text="{Binding Text, Mode=TwoWay}" TextColor="{Binding TextColor,Mode=TwoWay}"/>
	<BoxView x:Name="customBox"
	BackgroundColor="{Binding LineColor,Mode=TwoWay}"
	HeightRequest="1"
	Margin="0,-8,0,0" />
	</StackLayout>
	</ContentView.Content>

view raw UnderLineLabel.xaml hosted with ❤ by GitHub

Then we use the  BindableProperty to the code behind.

	public partial class UnderLineLabel : ContentView
	{
	public UnderLineLabel ()
	{
	InitializeComponent ();
	}
	public string Text
	{
	get { return (string)GetValue(TextProperty); }
	set { SetValue(TextProperty, value); }
	}
	public static BindableProperty TextProperty = BindableProperty.Create(nameof(Text),
	typeof(string),
	typeof(UnderLineLabel),
	defaultBindingMode: BindingMode.TwoWay,
	propertyChanged: (bindable, oldVal, newVal) =>
	{
	var matEntry = (UnderLineLabel)bindable;
	matEntry.customLabel.Text = (string)newVal;
	});
	public Color LineColor
	{
	get { return (Color)GetValue(LineColorProperty); }
	set { SetValue(LineColorProperty, value); }
	}
	public static BindableProperty LineColorProperty = BindableProperty.Create(nameof(LineColor),
	typeof(Color),
	typeof(UnderLineLabel),
	Color.Default,
	defaultBindingMode: BindingMode.TwoWay,
	propertyChanged: (bindable, oldVal, newVal) =>
	{
	var matEntry = (UnderLineLabel)bindable;
	matEntry.customBox.BackgroundColor= (Color)newVal;
	});
	public static readonly BindableProperty TextColorProperty =
	BindableProperty.Create(
	nameof(TextColor),
	typeof(Color),
	typeof(UnderLineLabel),
	Color.Default,
	defaultBindingMode: BindingMode.TwoWay,
	propertyChanged: (bindable, oldVal, newVal) =>
	{
	var matEntry = (UnderLineLabel)bindable;
	matEntry.customLabel.TextColor= (Color)newVal;
	});
	public Color TextColor
	{
	get { return (Color)GetValue(TextColorProperty); }
	set { SetValue(TextColorProperty, value); }
	}
	}

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

Please make sure to add view reference.....
xmlns:local="clr-namespace:MyNewApp"

<local:UnderLineLabel Text="Forget Password" TextColor="Brown" LineColor="Orange" HorizontalOptions="EndAndExpand"/>

view raw MainPage.xaml hosted with ❤ by GitHub

TADAA!,

Now, you will have your Custom UnderLine working!!

Features of Custom UnderLine controls

1. Text Color Property= ( TextColor="BlueViolet")
2. Text Property = (Text="Xamarin Skills")
3. Line Color Property=( LineColor="Orange")

To get full source code Click Here

To watch the video Click Here