Underline Label in Xamarin.Forms

Hello everyone, in this post i will create a custom render in order of have a UnderlineLabel,

 First of all else, we need to create our class which hierarchy from Xamarin.Forms.Label:

using System;
using Xamarin.Forms;

namespace UnderlineLabelXF
{
    public class UnderlineLabel:Label
    {
        public UnderlineLabel()
        {
        }
    }
}

After that, we need to create the renderer in each platform, first we create in iOS:
We create a folder with the name Renderer, inside of it, we add a class in order of make the renderer:

 using Foundation;
using UIKit;
using UnderlineLabelXF;
using UnderlineLabelXF.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(UnderlineLabel), typeof(UnderlineRenderer))]
namespace UnderlineLabelXF.iOS
{
    public class UnderlineRenderer:LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);
            if (this.Control != null)
            {
                if (e.NewElement != null)
                {
                    var label = (UnderlineLabel)this.Element;
                    this.Control.AttributedText = new NSAttributedString(label.Text, underlineStyle: NSUnderlineStyle.Single);
                    Control.TextColor = UIColor.Black;
                }
            }

        }
    }
}


 in iOS we add an AttributedText in order of have a Underline text.
Now we can look the result:
So, now we need to do almost the same thing in Android, we add a folder with the name Renderer, and inside of it, we add a class to implement the underline text:

using System;
using Android.Graphics;
using UnderlineLabelXF;
using UnderlineLabelXF.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(UnderlineLabel), typeof(UnderlineRenderer))]
namespace UnderlineLabelXF.Droid
{
    public class UnderlineRenderer: LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);
            if (this.Control != null)
            {
                Control.PaintFlags = PaintFlags.UnderlineText;
                Control.SetTextColor(Android.Graphics.Color.Black);
            }

        }
    }
}
The PaintFlags allow us select the UnderlineText, but also has another options that we can see in other post.

Now we can look the result:



Here is the url for the complete code on Github:
https://github.com/osvaldosantiago/UnderlineLabelXF



Follow me on Twitter

Comentarios

Publicar un comentario

Entradas populares de este blog

Entry Show/Hide Password on Xamarin.Forms

Imagen
Hello, in this post i will talk about a way of how to implement a Show/Hide password on Entry control. In our Xamarin.Forms project, we add  a CustomRender for iOS, and  for Android we are using a Effects in order of have a result almost equals. I'm gonna start with the iOS functionality, so I will add a class render: using System ; using Xamarin.Forms ; namespace ShowHidePasswordEntryXF { public class ShowHidePasswordEntry : Entry { public ShowHidePasswordEntry () { } public string EntryText { get ; set ; } } } After that, in the iOS project, i will create the renderer, in which I add a UIButton and add a EventHandler in order to know if the user want to look the password or not: buttonRect . TouchUpInside   +=   ( object   sender ,   EventArgs   e1 )   = >                  {                      if   ( Control . SecureTextEntry )                      {                          Control . SecureTextEntry   =   false ;               
Leer más

Xamarin.Forms Frame

Imagen
Hello, in this post we gonna be look how we can use a Frame in Xamarin.Forms This simple rectangular view sometimes is very usefull for presentation purposes. The first, we add a new Page, called FramePage. in the constructor we add a new View, the Frame View, also we declare some properties, like OutlineColor, and if we want that has Shadow around of the frame:              this . Content   =   new  Xamarin . Forms . Frame   {              // It   has   a   few  properties                 OutlineColor = Color . Blue ,                 HasShadow = true , } So, to avoid that the frame fill all the page, we add the properties to center the frame inside of the page:                 HorizontalOptions = LayoutOptions . CenterAndExpand ,                 VerticalOptions = LayoutOptions . CenterAndExpand , And for last, we add the content of the frame, in this case we add a single Label, Content =   new   Label {                     Text = " This   is
Leer más

Xamarin.Forms Picker

Imagen
In this post, we gonna be see, the Picker Control in Xamarin.Forms The picker is a control that allows select one element from a predetermined list of options. The first thing that we need to do, is create a instance of Picker:             Xamarin . Forms . Picker   picker   =   new  Xamarin . Forms . Picker              {                 Title  =   " Chose   one   country " ,                 VerticalOptions  =   LayoutOptions . CenterAndExpand ,                 BackgroundColor = Color . Aqua              } ; Next, we need to asign the values for our Picker control, and we do it, on the next way:             picker . Items . Add   ( " Canada " ) ;              picker . Items . Add   ( " USA " ) ;              picker . Items . Add   ( " Mexico " ) ;              picker . Items . Add   ( " Brasil " ) ;              picker . Items . Add   ( " Argentina " ) ;              picker . Items . Add   ( &q
Leer más