Xamarin.Forms Etiqueta

Descargar el ejemplo

Mostrar texto en Xamarin.Forms

La Label vista se usa para mostrar texto, tanto de una sola como de varias líneas. Las etiquetas pueden tener decoraciones de texto, texto coloreado y usar fuentes personalizadas (familias, tamaños y opciones).

Decoraciones de texto

Las decoraciones de texto subrayado y tachado se pueden aplicar a Label instancias estableciendo la Label.TextDecorations propiedad en uno o varios TextDecorations miembros de enumeración:

• None
• Underline
• Strikethrough

En el ejemplo XAML siguiente se muestra cómo establecer la Label.TextDecorations propiedad :

<Label Text="This is underlined text." TextDecorations="Underline"  />
<Label Text="This is text with strikethrough." TextDecorations="Strikethrough" />
<Label Text="This is underlined text with strikethrough." TextDecorations="Underline, Strikethrough" />

El código de C# equivalente es el siguiente:

var underlineLabel = new Label { Text = "This is underlined text.", TextDecorations = TextDecorations.Underline };
var strikethroughLabel = new Label { Text = "This is text with strikethrough.", TextDecorations = TextDecorations.Strikethrough };
var bothLabel = new Label { Text = "This is underlined text with strikethrough.", TextDecorations = TextDecorations.Underline | TextDecorations.Strikethrough };

En las capturas de pantalla siguientes se muestran los TextDecorations miembros de enumeración aplicados a Label las instancias:

Nota

Las decoraciones de texto también se pueden aplicar a Span instancias. Para obtener más información sobre la Span clase , vea Texto con formato.

Transformar texto

Puede Label transformar el uso de mayúsculas y minúsculas de su texto, almacenado en la Text propiedad , estableciendo la TextTransform propiedad en un valor de la TextTransform enumeración. Esta enumeración tiene cuatro valores:

• None indica que el texto no se transformará.
• Default indica que se usará el comportamiento predeterminado de la plataforma. Este es el valor predeterminado de la propiedad TextTransform.
• Lowercase indica que el texto se transformará en minúsculas.
• Uppercase indica que el texto se transformará en mayúsculas.

En el ejemplo siguiente se muestra cómo transformar texto en mayúsculas:

<Label Text="This text will be displayed in uppercase."
       TextTransform="Uppercase" />

El código de C# equivalente es el siguiente:

Label label = new Label
{
    Text = "This text will be displayed in uppercase.",
    TextTransform = TextTransform.Uppercase
};

espaciado entre caracteres

El espaciado de caracteres se puede aplicar a Label instancias estableciendo la Label.CharacterSpacing propiedad en un double valor:

<Label Text="Character spaced text"
       CharacterSpacing="10" />

El código de C# equivalente es el siguiente:

Label label = new Label { Text = "Character spaced text", CharacterSpacing = 10 };

El resultado es que los caracteres del texto mostrado por están separados por Label unidades independientes del dispositivo espaciadas CharacterSpacing .

Nuevas líneas

Hay dos técnicas principales para forzar el texto en una Label nueva línea, desde XAML:

1. Use el carácter de fuente de línea unicode, que es "
".
2. Especifique el texto mediante la sintaxis del elemento de propiedad .

En el código siguiente se muestra un ejemplo de ambas técnicas:

<!-- Unicode line feed character -->
<Label Text="First line &#10; Second line" />

<!-- Property element syntax -->
<Label>
    <Label.Text>
        First line
        Second line
    </Label.Text>
</Label>

En C#, el texto se puede forzar a una nueva línea con el carácter "\n":

Label label = new Label { Text = "First line\nSecond line" };

Colores

Las etiquetas se pueden establecer para usar un color de texto personalizado a través de la propiedad enlazable TextColor .

Es necesario tener especial cuidado para garantizar que los colores se puedan usar en cada plataforma. Dado que cada plataforma tiene valores predeterminados diferentes para los colores de texto y fondo, deberá tener cuidado de elegir un valor predeterminado que funcione en cada uno.

En el ejemplo XAML siguiente se establece el color de texto de un Label:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TextSample.LabelPage"
             Title="Label Demo">
    <StackLayout Padding="5,10">
      <Label TextColor="#77d065" FontSize = "20" Text="This is a green label." />
    </StackLayout>
</ContentPage>

El código de C# equivalente es el siguiente:

public partial class LabelPage : ContentPage
{
    public LabelPage ()
    {
        InitializeComponent ();

        var layout = new StackLayout { Padding = new Thickness(5,10) };
        var label = new Label { Text="This is a green label.", TextColor = Color.FromHex("#77d065"), FontSize = 20 };
        layout.Children.Add(label);
        this.Content = layout;
    }
}

En las capturas de pantalla siguientes se muestra el resultado de establecer la TextColor propiedad :

Para obtener más información sobre los colores, vea Colores.

Fuentes

Para obtener más información sobre cómo especificar fuentes en , Labelvea Fuentes.

Truncamiento y ajuste

Las etiquetas se pueden establecer para controlar el texto que no cabe en una línea de varias maneras, expuestas por la LineBreakMode propiedad . LineBreakMode es una enumeración con los siguientes valores:

• HeadTruncation : trunca el encabezado del texto, que muestra el final.
• CharacterWrap : ajusta el texto en una nueva línea en un límite de caracteres.
• MiddleTruncation : muestra el principio y el final del texto, con el reemplazo intermedio por puntos suspensivos.
• NoWrap : no ajusta el texto, mostrando solo tanto texto como pueda caber en una línea.
• TailTruncation : muestra el principio del texto, truncando el final.
• WordWrap : ajusta el texto en el límite de la palabra.

Mostrar un número específico de líneas

El número de líneas mostradas por se Label puede especificar estableciendo la Label.MaxLines propiedad en un int valor:

• Cuando MaxLines es -1, que es su valor predeterminado, Label respeta el valor de la LineBreakMode propiedad para mostrar solo una línea, posiblemente truncada o todas las líneas con todo el texto.
• Cuando MaxLines es 0, Label no se muestra .
• Cuando MaxLines es 1, el resultado es idéntico a establecer la LineBreakMode propiedad en NoWrap, HeadTruncationMiddleTruncation, o TailTruncation. Sin embargo, Label respetará el valor de la LineBreakMode propiedad con respecto a la colocación de puntos suspensivos, si procede.
• Cuando MaxLines sea mayor que 1, Label se mostrará hasta el número especificado de líneas, respetando el valor de la propiedad con respecto a la LineBreakMode colocación de puntos suspensivos, si procede. Sin embargo, establecer la MaxLines propiedad en un valor mayor que 1 no tiene ningún efecto si la LineBreakMode propiedad está establecida NoWrapen .

En el ejemplo XAML siguiente se muestra cómo establecer la MaxLines propiedad en un Label:

<Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis nulla eu felis fringilla vulputate. Nullam porta eleifend lacinia. Donec at iaculis tellus."
       LineBreakMode="WordWrap"
       MaxLines="2" />

El código de C# equivalente es el siguiente:

var label =
{
  Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis nulla eu felis fringilla vulputate. Nullam porta eleifend lacinia. Donec at iaculis tellus.", LineBreakMode = LineBreakMode.WordWrap,
  MaxLines = 2
};

En las capturas de pantalla siguientes se muestra el resultado de establecer la MaxLines propiedad en 2, cuando el texto es lo suficientemente largo como para ocupar más de 2 líneas:

Mostrar HTML

La Label clase tiene una TextType propiedad , que determina si la Label instancia debe mostrar texto sin formato o texto HTML. Esta propiedad debe establecerse en uno de los miembros de la TextType enumeración:

• Text indica que Label mostrará texto sin formato y es el valor predeterminado de la Label.TextType propiedad .
• Html indica que mostrará texto Label HTML.

Por lo tanto, Label las instancias pueden mostrar HTML estableciendo la Label.TextType propiedad Htmlen y la Label.Text propiedad en una cadena HTML:

Label label = new Label
{
    Text = "This is <strong style=\"color:red\">HTML</strong> text.",
    TextType = TextType.Html
};

En el ejemplo anterior, los caracteres de comillas dobles del HTML deben ser de escape mediante el \ símbolo .

En XAML, las cadenas HTML se pueden volver ilegibles debido a que, además, se escapan de los < símbolos y > :

<Label Text="This is &lt;strong style=&quot;color:red&quot;&gt;HTML&lt;/strong&gt; text."
       TextType="Html"  />

Como alternativa, para mejorar la legibilidad, el código HTML se puede insertar en una CDATA sección:

<Label TextType="Html">
    <![CDATA[
    This is <strong style="color:red">HTML</strong> text.
    ]]>
</Label>

En este ejemplo, la Label.Text propiedad se establece en la cadena HTML insertada en la CDATA sección . Esto funciona porque la Text propiedad es para ContentProperty la Label clase .

En las capturas de pantalla siguientes se muestra un Label código HTML que muestra:

Importante

Mostrar HTML en un Label está limitado a las etiquetas HTML compatibles con la plataforma subyacente.

Texto con formato

Las etiquetas exponen una FormattedText propiedad que permite la presentación de texto con varias fuentes y colores en la misma vista.

La FormattedText propiedad es de tipo FormattedString, que consta de una o varias Span instancias, establecidas a través de la Spans propiedad . Las siguientes Span propiedades se pueden usar para establecer la apariencia visual:

• BackgroundColor : el color del fondo del intervalo.
• CharacterSpacing, del tipo double, es el espaciado entre los caracteres del texto de Span.
• Font : fuente del texto del intervalo.
• FontAttributes : los atributos de fuente para el texto del intervalo.
• FontFamily : la familia de fuentes a la que pertenece la fuente del texto del intervalo.
• FontSize : el tamaño de la fuente del texto del intervalo.
• ForegroundColor : el color del texto del intervalo. Esta propiedad está obsoleta y se ha reemplazado por la TextColor propiedad .
• LineHeight : multiplicador que se va a aplicar al alto de línea predeterminado del intervalo. Para obtener más información, vea Alto de línea.
• Style : el estilo que se va a aplicar al intervalo.
• Text : el texto del intervalo.
• TextColor : el color del texto del intervalo.
• TextDecorations : las decoraciones que se van a aplicar al texto del intervalo. Para obtener más información, vea Decoración de texto.

Las BackgroundColorpropiedades enlazables , Texty Text tienen un modo de enlace predeterminado de OneWay. Para obtener más información sobre este modo de enlace, vea El modo de enlace predeterminado en la guía modo de enlace .

Además, la GestureRecognizers propiedad se puede usar para definir una colección de reconocedores de gestos que responderá a gestos en .Span

Nota

No es posible mostrar HTML en .Span

En el ejemplo XAML siguiente se muestra una FormattedText propiedad que consta de tres Span instancias:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TextSample.LabelPage"
             Title="Label Demo - XAML">
    <StackLayout Padding="5,10">
        ...
        <Label LineBreakMode="WordWrap">
            <Label.FormattedText>
                <FormattedString>
                    <Span Text="Red Bold, " TextColor="Red" FontAttributes="Bold" />
                    <Span Text="default, " Style="{DynamicResource BodyStyle}">
                        <Span.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding TapCommand}" />
                        </Span.GestureRecognizers>
                    </Span>
                    <Span Text="italic small." FontAttributes="Italic" FontSize="Small" />
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </StackLayout>
</ContentPage>

El código de C# equivalente es el siguiente:

public class LabelPageCode : ContentPage
{
    public LabelPageCode ()
    {
        var layout = new StackLayout{ Padding = new Thickness (5, 10) };
        ...
        var formattedString = new FormattedString ();
        formattedString.Spans.Add (new Span{ Text = "Red bold, ", ForegroundColor = Color.Red, FontAttributes = FontAttributes.Bold });

        var span = new Span { Text = "default, " };
        span.GestureRecognizers.Add(new TapGestureRecognizer { Command = new Command(async () => await DisplayAlert("Tapped", "This is a tapped Span.", "OK")) });
        formattedString.Spans.Add(span);
        formattedString.Spans.Add (new Span { Text = "italic small.", FontAttributes = FontAttributes.Italic, FontSize =  Device.GetNamedSize(NamedSize.Small, typeof(Label)) });

        layout.Children.Add (new Label { FormattedText = formattedString });
        this.Content = layout;
    }
}

Importante

La Text propiedad de se Span puede establecer mediante el enlace de datos. Para obtener más información, vea Enlace de datos.

Tenga en cuenta que también Span puede responder a los gestos que se agregan a la colección del GestureRecognizers intervalo. Por ejemplo, se ha agregado un TapGestureRecognizer elemento al segundo Span de los ejemplos de código anteriores. Por lo tanto, cuando Span se pulsa, TapGestureRecognizer responderá ejecutando el ICommand definido por la Command propiedad . Para obtener más información sobre los reconocedores de gestos, vea Xamarin.Forms Gestos.

En las capturas de pantalla siguientes se muestra el resultado de establecer la FormattedString propiedad en tres Span instancias:

Alto de línea

El alto vertical de un Label objeto y se Span puede personalizar estableciendo la Label.LineHeight propiedad o Span.LineHeight en un double valor. En iOS y Android estos valores son multiplicadores del alto de línea original y, en el Plataforma universal de Windows (UWP), el Label.LineHeight valor de la propiedad es un multiplicador del tamaño de fuente de la etiqueta.

Nota

• En iOS, las Label.LineHeight propiedades y Span.LineHeight cambian el alto de línea de texto que se ajusta a una sola línea y el texto que se ajusta a varias líneas.
• En Android, las Label.LineHeight propiedades y Span.LineHeight solo cambian el alto de línea del texto que se ajusta a varias líneas.
• En UWP, la Label.LineHeight propiedad cambia el alto de línea de texto que se ajusta a varias líneas y la Span.LineHeight propiedad no tiene ningún efecto.

En el ejemplo XAML siguiente se muestra cómo establecer la LineHeight propiedad en un Label:

<Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis nulla eu felis fringilla vulputate. Nullam porta eleifend lacinia. Donec at iaculis tellus."
       LineBreakMode="WordWrap"
       LineHeight="1.8" />

El código de C# equivalente es el siguiente:

var label =
{
  Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis nulla eu felis fringilla vulputate. Nullam porta eleifend lacinia. Donec at iaculis tellus.", LineBreakMode = LineBreakMode.WordWrap,
  LineHeight = 1.8
};

En las capturas de pantalla siguientes se muestra el resultado de establecer la Label.LineHeight propiedad en 1.8:

En el ejemplo XAML siguiente se muestra cómo establecer la LineHeight propiedad en un Span:

<Label LineBreakMode="WordWrap">
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tincidunt sem. Phasellus mollis sit amet turpis in rutrum. Sed aliquam ac urna id scelerisque. "
                  LineHeight="1.8"/>
            <Span Text="Nullam feugiat sodales elit, et maximus nibh vulputate id."
                  LineHeight="1.8" />
        </FormattedString>
    </Label.FormattedText>
</Label>

El código de C# equivalente es el siguiente:

var formattedString = new FormattedString();
formattedString.Spans.Add(new Span
{
  Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tincidunt sem. Phasellus mollis sit amet turpis in rutrum. Sed aliquam ac urna id scelerisque. ",
  LineHeight = 1.8
});
formattedString.Spans.Add(new Span
{
  Text = "Nullam feugiat sodales elit, et maximus nibh vulputate id.",
  LineHeight = 1.8
});
var label = new Label
{
  FormattedText = formattedString,
  LineBreakMode = LineBreakMode.WordWrap
};

En las capturas de pantalla siguientes se muestra el resultado de establecer la Span.LineHeight propiedad en 1.8:

Relleno

Relleno representa el espacio entre un elemento y sus elementos secundarios, y se usa para separar el elemento de su propio contenido. El relleno se puede aplicar a Label instancias estableciendo la Label.Padding propiedad en un Thickness valor:

<Label Padding="10">
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Lorem ipsum" />
            <Span Text="dolor sit amet." />
        </FormattedString>
    </Label.FormattedText>
</Label>

El código de C# equivalente es el siguiente:

FormattedString formattedString = new FormattedString();
formattedString.Spans.Add(new Span
{
  Text = "Lorem ipsum"
});
formattedString.Spans.Add(new Span
{
  Text = "dolor sit amet."
});
Label label = new Label
{
    FormattedText = formattedString,
    Padding = new Thickness(20)
};

Importante

En iOS, cuando se crea un Label objeto que establece la Padding propiedad , se aplicará relleno y el valor de relleno se podrá actualizar más adelante. Sin embargo, cuando se crea un Label objeto que no establece la Padding propiedad, intentar establecerla más adelante no tendrá ningún efecto.

En Android y el Plataforma universal de Windows, el valor de propiedad Padding se puede especificar cuando Label se crea o posterior.

Para obtener más información sobre el relleno, vea Márgenes y relleno.

Hipervínculos

El texto mostrado por Label las instancias y Span se puede convertir en hipervínculos con el siguiente enfoque:

1. Establezca las TextColor propiedades y TextDecoration de Label o Span.
2. Agregue un TapGestureRecognizer objeto a la GestureRecognizers colección de Label o Span, cuya Command propiedad se enlaza a , ICommandy cuya CommandParameter propiedad contiene la dirección URL que se va a abrir.
3. Defina el ICommand objeto que ejecutará .TapGestureRecognizer
4. Escriba el código que ejecutará .ICommand

En el ejemplo de código siguiente, tomado del ejemplo de demostraciones de hipervínculo , se muestra un Label cuyo contenido se establece desde varias Span instancias:

<Label>
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Alternatively, click " />
            <Span Text="here"
                  TextColor="Blue"
                  TextDecorations="Underline">
                <Span.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding TapCommand}"
                                          CommandParameter="https://docs.microsoft.com/xamarin/" />
                </Span.GestureRecognizers>
            </Span>
            <Span Text=" to view Xamarin documentation." />
        </FormattedString>
    </Label.FormattedText>
</Label>

En este ejemplo, las primeras y terceras Span instancias componen texto, mientras que la segunda Span representa un hipervínculo pulsable. Tiene su color de texto establecido en azul y tiene una decoración de texto de subrayado. Esto crea la apariencia de un hipervínculo, como se muestra en las capturas de pantalla siguientes:

Cuando se pulsa el hipervínculo, TapGestureRecognizer responderá ejecutando el ICommand definido por su Command propiedad . Además, la dirección URL especificada por la CommandParameter propiedad se pasará al ICommand como parámetro .

El código subyacente de la página XAML contiene la TapCommand implementación:

public partial class MainPage : ContentPage
{
    // Launcher.OpenAsync is provided by Xamarin.Essentials.
    public ICommand TapCommand => new Command<string>(async (url) => await Launcher.OpenAsync(url));

    public MainPage()
    {
        InitializeComponent();
        BindingContext = this;
    }
}

TapCommand Ejecuta el Launcher.OpenAsync método , pasando el valor de propiedad TapGestureRecognizer.CommandParameter como parámetro. El Launcher.OpenAsync método lo proporciona Xamarin.Essentialsy abre la dirección URL en un explorador web. Por lo tanto, el efecto general es que, cuando se pulsa el hipervínculo en la página, aparece un explorador web y se navega a la dirección URL asociada al hipervínculo.

Creación de una clase de hipervínculo reutilizable

El enfoque anterior para crear un hipervínculo requiere escribir código repetitivo cada vez que necesite un hipervínculo en la aplicación. Sin embargo, tanto las clases como Span las Label se pueden subclasar para crear HyperlinkLabel y HyperlinkSpan clases, con el reconocedor de gestos y el código de formato de texto agregado allí.

En el ejemplo de código siguiente, tomado del ejemplo de demostraciones de hipervínculo , se muestra una HyperlinkSpan clase :

public class HyperlinkSpan : Span
{
    public static readonly BindableProperty UrlProperty =
        BindableProperty.Create(nameof(Url), typeof(string), typeof(HyperlinkSpan), null);

    public string Url
    {
        get { return (string)GetValue(UrlProperty); }
        set { SetValue(UrlProperty, value); }
    }

    public HyperlinkSpan()
    {
        TextDecorations = TextDecorations.Underline;
        TextColor = Color.Blue;
        GestureRecognizers.Add(new TapGestureRecognizer
        {
            // Launcher.OpenAsync is provided by Xamarin.Essentials.
            Command = new Command(async () => await Launcher.OpenAsync(Url))
        });
    }
}

La HyperlinkSpan clase define una Url propiedad, y el constructor asociado BindablePropertyestablece la apariencia del hipervínculo y que TapGestureRecognizer responderá cuando se pulse el hipervínculo. Cuando se pulsa TapGestureRecognizer , HyperlinkSpan responderá ejecutando el Launcher.OpenAsync método para abrir la dirección URL, especificada por la Url propiedad , en un explorador web.

La HyperlinkSpan clase se puede consumir agregando una instancia de la clase al XAML:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:HyperlinkDemo"
             x:Class="HyperlinkDemo.MainPage">
    <StackLayout>
        ...
        <Label>
            <Label.FormattedText>
                <FormattedString>
                    <Span Text="Alternatively, click " />
                    <local:HyperlinkSpan Text="here"
                                         Url="https://docs.microsoft.com/appcenter/" />
                    <Span Text=" to view AppCenter documentation." />
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </StackLayout>
</ContentPage>

Etiquetas de estilo

En las secciones anteriores se tratan la configuración Label y Span las propiedades por instancia. Sin embargo, los conjuntos de propiedades se pueden agrupar en un estilo que se aplica de forma coherente a una o varias vistas. Esto puede aumentar la legibilidad del código y facilitar la implementación de los cambios de diseño. Para obtener más información, vea Estilos.

Vínculos relacionados

• Texto (ejemplo)
• Hipervínculos (ejemplo)
• Creación de aplicaciones móviles con Xamarin.Forms, capítulo 3 descarga gratuita
• API de las etiquetas
• Span API