Xamarin.Forms Custom Underline Label

I have created a custom underline label today because of a need that arose.

I came under 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,

Firstly we create a ContentView whose name is under 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>

Then we are using 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); }  
    }  
}

Please make sure to add view reference.....

xmlns:local="clr-namespace:MyNewApp"
<local:UnderLineLabel Text="Forget Password" TextColor="Brown" LineColor="Orange" HorizontalOptions="EndAndExpand"/>

TADAAA!  

You should 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")