Xamarin Forms WinPhone - How to make Label Text Underline WinPhone?

Question

How can I make Label text Underline in WinPhone using Xamarin Forms ?

Create renderer for `Label` and use native **WinPhone** approach for creating underlined text. — Yehor Hromadskyi, Aug 02 '16 at 14:06
Have you seen [this](https://github.com/XLabs/Xamarin-Forms-Labs/wiki/ExtendedLabel) sample? — Yehor Hromadskyi, Aug 02 '16 at 14:12
Yes @EgorGromadskiy but i cant find **ExtendedLabelRenderer** for WinPhone in this [github repo](https://github.com/XLabs/Xamarin-Forms-Labs/wiki/ExtendedLabel#platform-code) — DzMob Nadjib, Aug 03 '16 at 09:07

score 1 · Answer 1 · edited May 23 '17 at 11:46

1

You have top create a new control in your PCL/shared project inheriting from Label.

public class Exlabel : Label
{
}

In your windows phone project create a Custom Renderer for it as follows and use the TextBlock.TextDecorations Property to set the underline. The label is rendered as TextBlock in windows.

Sample (untested):

[assembly: ExportRenderer(typeof(Exlabel), typeof(ExlabelRenderer))]
namespace CustomRenderer.WinPhone81
{
    public class ExlabelRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.TextDecorations = TextDecorations.UnderLine;
            }
        }
    }
}

If you are using the windows phone check out this sample - How to format texts of TextBlock using xaml in Windows Phone.

For WinRT you can use this - TextBlock underline in WinRT.

In SilverLight WinPhone (the old and not so supported template), you can also use the Margin to achieve what you require, similar to How to make an underlined input text field in Windows Phone?.

edited May 23 '17 at 11:46

Community

1
1

answered Aug 02 '16 at 14:49

Rohit Vipin Mathews

11,629
15
57
112

I can't find this property ! I have this error : Error CS1061 'TextBlock' does not contain a definition for 'TextDecorations' and no extension method 'TextDecorations' accepting a first argument of type 'TextBlock' could be found (are you missing a using directive or an assembly reference?) – DzMob Nadjib Aug 03 '16 at 09:32
What is the type you are getting for `Control` in Windows phone project? – Rohit Vipin Mathews Aug 03 '16 at 09:41
Are you missing the namespace, its available in the link provided. `System.Windows.Controls`. Please try to resolve compile time errors. – Rohit Vipin Mathews Aug 03 '16 at 12:28
I talk about **Xamarin WinPhone**, i can't use `System.Windows.Controls`, but we talk about `Windows.UI.Xaml.Controls`, [See this link](https://msdn.microsoft.com/library/windows/apps/br209652) – DzMob Nadjib Aug 03 '16 at 15:44

score 0 · Answer 2 · answered Aug 02 '16 at 13:21

0

I think you need to create a custom view for this as a Layout/Grid that has a Label and a BoxView with a small heightRequest below the label to act as a line.

answered Aug 02 '16 at 13:21

Ahmad ElMadi

2,507
21
36

Yes i can't find another solution – DzMob Nadjib Aug 03 '16 at 15:47

score 0 · Accepted Answer · answered Aug 02 '16 at 13:35

0

Try using following xaml;

<StackLayout Orientation="Vertical">
    <Label Text="SomeText"/>
    <BoxView HeightRequest="1" HorizontalOptions="FillAndExpand" BackgroundColor="Black"/>
</StackLayout>

this should do it for all 3 platforms. :)

answered Aug 02 '16 at 13:35

Tolga Kartal

617
4
12

1

This merely draws a box view with height 1 and has nothing to do with underline. It would break when your label text is shorter or you specify alignment and when it goes into 2 lines. – Rohit Vipin Mathews Aug 03 '16 at 09:43
I have the same implementation with a data trigger on text property length and this provides me a google material design entry. I'm happy with it till now. :) – Tolga Kartal Aug 03 '16 at 10:00
As @RohitVipinMathews said, this is really just a hacky workaround and would potentially have issues. – jbyrd Dec 07 '17 at 13:33

score 0 · Answer 4 · answered Jan 05 '17 at 09:36

Create a label renderer in your WinPhone project:

using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Documents;
[assembly: ExportRenderer(typeof(ExtendedLabel), typeof(ExtendedLabelRenderer))]

namespace SampleProject.WinPhone
{
public class ExtendedLabelRenderer: LabelRenderer
{
    ExtendedLabel element;
    TextBlock control;
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);

        if((ExtendedLabel)Element == null || Control == null)
            return;

        element = (ExtendedLabel)Element;
        control = Control;
        UnderlineText();
    }
    void UnderlineText()
    {
        control.Text = string.Empty;
        Underline ul = new Underline();
        Run run = new Run();
        run.Text = element.Text;
        ul.Inlines.Add(run);
        control.Inlines.Add(ul);
    }
  }
 }

Xamarin Forms WinPhone - How to make Label Text Underline WinPhone?

4 Answers4