Xamarin.Forms Custom Underline Label

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