Xamarin.Forms Etiqueta

Descargar ejemplo. Descarga del ejemplo

Mostrar texto en Xamarin.Forms

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

Decoración de texto

Las decoración de texto subrayado y tachado se pueden aplicar a las Label instancias estableciendo la Label.TextDecorations propiedad en uno o varios miembros de TextDecorations 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 Label aplicados a las instancias de :

Etiquetas con decoración de texto.

Nota

Las decoración de texto también se pueden aplicar a Span las instancias de . Para obtener más información sobre Span la clase , vea Formatted Text.

Transformar texto

Un Label puede transformar el uso de mayúsculas y minúsculas de su texto, almacenado en la propiedad , Text estableciendo la propiedad en un valor de TextTransform 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 para 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 Label a las instancias estableciendo la propiedad en Label.CharacterSpacing 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 Label CharacterSpacing por unidades independientes del dispositivo.

Nuevas líneas

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

  1. Use el carácter de avance de línea Unicode, que & es "#10;".
  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 en 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 TextColor enlazable.

Es necesario tener especial cuidado para asegurarse de que los colores se puedan usar en cada plataforma. Dado que cada plataforma tiene valores predeterminados diferentes para el texto y los colores de fondo, debe tener cuidado de elegir un valor predeterminado que funcione en cada una de ellas.

En el ejemplo de XAML siguiente se establece el color del texto de 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 :

Ejemplo de TextColor de etiqueta.

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

Fuentes

Para obtener más información sobre cómo especificar fuentes en Label un , vea 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 valores siguientes:

  • HeadTruncation – trunca la parte principal del texto, mostrando 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 central por un botón de 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 es -1, que es su valor predeterminado, respeta el valor de la propiedad para mostrar solo una línea, posiblemente truncada, o todas las líneas con todo MaxLines Label el LineBreakMode texto.
  • Cuando MaxLines es 0, Label no se muestra .
  • Cuando MaxLines es 1, el resultado es idéntico al establecimiento de la LineBreakMode propiedad en , , o NoWrap HeadTruncation MiddleTruncation TailTruncation . Sin embargo, respetará el valor de la propiedad con respecto a la colocación de puntos Label LineBreakMode suspensivos, si procede.
  • Cuando es mayor que 1, se mostrará hasta el número especificado de líneas, respetando al mismo tiempo el valor de la propiedad con respecto a la colocación de puntos suspensivos, MaxLines Label si LineBreakMode procede. Sin embargo, establecer MaxLines la propiedad en un valor mayor que 1 no tiene ningún efecto si la propiedad está establecida en LineBreakMode NoWrap .

En el ejemplo xaml siguiente se muestra cómo establecer MaxLines la propiedad en 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 propiedad en 2, cuando el texto es lo suficientemente largo como para MaxLines ocupar más de 2 líneas:

Ejemplo de MaxLines de etiqueta.

mostrar HTML

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

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

Por lo Label tanto, las instancias de pueden mostrar HTML estableciendo la Label.TextType propiedad en y la propiedad en una cadena Html Label.Text 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 código HTML deben tener caracteres de escape mediante el \ símbolo .

En XAML, las cadenas HTML pueden ser ilegibles debido a que además se escapan 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 una mayor legibilidad, el código HTML se puede inliner en una CDATA sección:

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

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

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

Capturas de pantalla de una etiqueta que muestra HTML en iOS y Android.

Importante

La visualización de HTML en se limita a Label las etiquetas HTML compatibles con la plataforma subyacente.

Texto con formato

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

La FormattedText propiedad es de tipo , que consta de una o varias FormattedString Span instancias, establecidas a través de la Spans propiedad . Se pueden Span usar las siguientes propiedades 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 : la 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 para el texto del intervalo.
  • FontSize : el tamaño de la fuente del texto en el intervalo.
  • ForegroundColor : el color del texto en el 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 Altura de línea.
  • Style : el estilo que se va a aplicar al intervalo.
  • Text : el texto del intervalo.
  • TextColor : el color del texto en el intervalo.
  • TextDecorations : las decoracións que se aplicarán al texto del intervalo. Para obtener más información, vea Decoración de texto.

Las BackgroundColor propiedades Text enlazables , y tienen un modo de Text 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 propiedad se puede usar para definir una colección de reconocedores de gestos que GestureRecognizers responderán a los gestos en Span .

Nota

No es posible mostrar HTML en Span .

En el ejemplo xaml siguiente se muestra FormattedText una 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 puede establecer a través del enlace de Span datos. Para obtener más información, vea Enlace de datos.

Tenga en cuenta Span que un también puede responder a los gestos que se agregan a la colección del GestureRecognizers intervalo. Por ejemplo, se TapGestureRecognizer ha agregado un al segundo en los ejemplos de código Span anteriores. Por lo tanto, Span cuando se pulsa , TapGestureRecognizer responderá ejecutando el definido por la ICommand 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 Span tres instancias:

Ejemplo de Label FormattedText.

Alto de línea

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

Nota

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

En el ejemplo xaml siguiente se muestra cómo establecer LineHeight la propiedad en 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:

Ejemplo de LineHeight de etiqueta.

En el ejemplo xaml siguiente se muestra cómo establecer LineHeight la propiedad en 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:

Ejemplo de Span LineHeight.

Relleno

El 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 Label a las instancias estableciendo la propiedad en Label.Padding 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 que establece la propiedad , se aplicará el relleno y el valor de relleno Label se puede actualizar más Padding adelante. Sin embargo, cuando se crea un objeto que no establece la propiedad , el intento de establecerla más adelante Label Padding no tendrá ningún efecto.

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

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

El texto que muestran Label las instancias de y se puede volver Span hipervínculos con el siguiente enfoque:

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

En el ejemplo de código siguiente, tomado del ejemplo Demos de hipervínculo, se muestra un cuyo Label contenido se establece a partir de 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, la primera y la tercera instancia componen texto, mientras que la Span segunda representa un hipervínculo que se puede Span aplicar. Tiene su color de texto establecido en azul y una decoración de texto subrayado. Esto crea la apariencia de un hipervínculo, como se muestra en las capturas de pantalla siguientes:

! [Hipervínculos] (label-images/hyperlinks-small.png "Hyperlinks".

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

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;
    }
}

ejecuta TapCommand el método , pasando el valor de propiedad como un Launcher.OpenAsync TapGestureRecognizer.CommandParameter parámetro. El Launcher.OpenAsync método lo proporciona y abre la dirección URL en un explorador Xamarin.Essentials 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.

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, las clases y se pueden crear subclases para crear clases y , con el reconocedor de gestos y el código de formato Label Span de texto HyperlinkLabel HyperlinkSpan agregados allí.

En el ejemplo de código siguiente, tomado del ejemplo Demos 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 clase define una propiedad y la asociada, y el constructor establece la apariencia del hipervínculo y el objeto que responderá cuando se pulse HyperlinkSpan Url el BindableProperty TapGestureRecognizer hipervínculo. Cuando se pulsa , responderá ejecutando el método para abrir la dirección URL, especificada por la HyperlinkSpan propiedad , en un explorador TapGestureRecognizer Launcher.OpenAsync Url 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>

Aplicar estilos a las etiquetas

En las secciones anteriores se ha abordado Label la configuración y las propiedades por Span 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.