Etiqueta de Xamarin.FormsXamarin.Forms Label

Descargar ejemplo descargar el ejemploDownload Sample Download the sample

Mostrar texto en Xamarin.FormsDisplay text in Xamarin.Forms

El Label vista se utiliza para mostrar texto, único y varias líneas.The Label view is used for displaying text, both single and multi-line. Las etiquetas pueden tener decoraciones de texto, texto de color y usar las fuentes personalizadas (familias de tamaños y opciones).Labels can have text decorations, colored text, and use custom fonts (families, sizes, and options).

Decoraciones de textoText decorations

Se pueden aplicar las decoraciones de texto subrayado y tachado a Label instancias estableciendo el Label.TextDecorations propiedad a uno o varios TextDecorations miembros de enumeración:Underline and strikethrough text decorations can be applied to Label instances by setting the Label.TextDecorations property to one or more TextDecorations enumeration members:

  • None
  • Underline
  • Strikethrough

En el siguiente ejemplo XAML se muestra cómo establecer el Label.TextDecorations propiedad:The following XAML example demonstrates setting the Label.TextDecorations property:

<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:The equivalent C# code is:

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

Capturas de pantalla siguientes se muestra el TextDecorations aplicados a miembros de la enumeración Label instancias:The following screenshots show the TextDecorations enumeration members applied to Label instances:

Etiquetas con decoraciones de texto

Nota

También se pueden aplicar las decoraciones de texto a Span instancias.Text decorations can also be applied to Span instances. Para obtener más información sobre la Span de clases, vea texto con formato.For more information about the Span class, see Formatted Text.

ColoresColors

Las etiquetas se pueden establecer para usar un color de texto personalizado a través de la enlazable TextColor propiedad.Labels can be set to use a custom text color via the bindable TextColor property.

Atención especial es necesaria para asegurarse de que los colores se podrán usar en cada plataforma.Special care is necessary to ensure that colors will be usable on each platform. Dado que cada plataforma tiene distintos valores predeterminados para los colores de texto y fondo, deberá tener cuidado al elegir un valor predeterminado que funciona en cada uno.Because each platform has different defaults for text and background colors, you'll need to be careful to pick a default that works on each.

En el siguiente ejemplo XAML establece el color del texto de un Label:The following XAML example sets the text color of a 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:The equivalent C# code is:

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

Las capturas de pantalla siguientes muestran el resultado de establecer el TextColor propiedad:The following screenshots show the result of setting the TextColor property:

Ejemplo de etiqueta TextColor

Para obtener más información acerca de los colores, consulte colores.For more information about colors, see Colors.

FuentesFonts

Para obtener más información acerca de cómo especificar las fuentes en un Label, consulte fuentes.For more information about specifying fonts on a Label, see Fonts.

Truncamiento y ajusteTruncation and wrapping

Se pueden establecer etiquetas para controlar el texto que no cabe en una sola línea en una de varias maneras, expuestos por la LineBreakMode propiedad.Labels can be set to handle text that can't fit on one line in one of several ways, exposed by the LineBreakMode property. LineBreakMode es una enumeración con los valores siguientes:LineBreakMode is an enumeration with the following values:

  • HeadTruncation – trunca el encabezado del texto, que muestra el extremo.HeadTruncation – truncates the head of the text, showing the end.
  • CharacterWrap – ajusta el texto en una nueva línea en un límite de caracteres.CharacterWrap – wraps text onto a new line at a character boundary.
  • MiddleTruncation – muestra el principio y al final del texto, con el reemplazo intermedio mediante puntos suspensivos.MiddleTruncation – displays the beginning and end of the text, with the middle replace by an ellipsis.
  • NoWrap – no ajusta el texto, mostrar solo mayor cantidad de texto que puede cabe en una sola línea.NoWrap – does not wrap text, displaying only as much text as can fit on one line.
  • TailTruncation – muestra el principio del texto, truncar final.TailTruncation – shows the beginning of the text, truncating the end.
  • WordWrap – ajusta el texto en el límite de palabras.WordWrap – wraps text at the word boundary.

Mostrar un número específico de líneasDisplaying a specific number of lines

El número de líneas muestra un Label se puede especificar estableciendo el Label.MaxLines propiedad a un int valor:The number of lines displayed by a Label can be specified by setting the Label.MaxLines property to a int value:

  • Cuando MaxLines es 0, el Label respeta el valor de la LineBreakMode propiedad que se va a mostrar ya sea una sola línea, posiblemente truncada, o todas las líneas con todo el texto.When MaxLines is 0, the Label respects the value of the LineBreakMode property to either show just one line, possibly truncated, or all lines with all text.
  • Cuando MaxLines es 1, el resultado es idéntico al valor de la LineBreakMode propiedad NoWrap , HeadTruncation , MiddleTruncation , o TailTruncation .When MaxLines is 1, the result is identical to setting the LineBreakMode property to NoWrap, HeadTruncation, MiddleTruncation, or TailTruncation. Sin embargo, el Label respetará el valor de la LineBreakMode propiedad con respecto a la selección de ubicación de puntos suspensivos, si procede.However, the Label will respect the value of the LineBreakMode property with regard to placement of an ellipsis, if applicable.
  • Cuando MaxLines es mayor que 1, el Label mostrará hasta el número especificado de líneas, respetando el valor de la LineBreakMode propiedad con respecto a la selección de ubicación de puntos suspensivos, si procede.When MaxLines is greater than 1, the Label will display up to the specified number of lines, while respecting the value of the LineBreakMode property with regard to placement of an ellipsis, if applicable. Sin embargo, establecer el MaxLines propiedad a un valor mayor que 1 no tiene ningún efecto si la LineBreakMode propiedad está establecida en NoWrap .However, setting the MaxLines property to a value greater than 1 has no effect if the LineBreakMode property is set to NoWrap.

En el siguiente ejemplo XAML se muestra cómo establecer el MaxLines propiedad en un Label :The following XAML example demonstrates setting the MaxLines property on a 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:The equivalent C# code is:

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

Las capturas de pantalla siguientes muestran el resultado de establecer el MaxLines propiedad en 2, cuando el texto es lo suficientemente largo para ocupar más de 2 líneas:The following screenshots show the result of setting the MaxLines property to 2, when the text is long enough to occupy more than 2 lines:

Ejemplo de etiqueta MaxLines

Texto con formatoFormatted text

Las etiquetas exponen una FormattedText propiedad que permite la presentación de texto con varias fuentes y colores en la misma vista.Labels expose a FormattedText property that allows the presentation of text with multiple fonts and colors in the same view.

El FormattedText propiedad es de tipo FormattedString , que consta de uno o varios Span instancias, se establece a través de la Spans propiedad .The FormattedText property is of type FormattedString, which comprises one or more Span instances, set via the Spans property. La siguiente Span propiedades pueden usarse para establecer la apariencia visual:The following Span properties can be used to set visual appearance:

  • BackgroundColor : el color del fondo del intervalo.BackgroundColor – the color of the span background.
  • Font : la fuente para el texto del intervalo.Font – the font for the text in the span.
  • FontAttributes : los atributos de fuente para el texto del intervalo.FontAttributes – the font attributes for the text in the span.
  • FontFamily – la familia de fuentes a la que pertenece la fuente para el texto del intervalo.FontFamily – the font family to which the font for the text in the span belongs.
  • FontSize – el tamaño de la fuente para el texto del intervalo.FontSize – the size of the font for the text in the span.
  • ForegroundColor : el color del texto en el intervalo.ForegroundColor – the color for the text in the span. Esta propiedad está obsoleta y se ha reemplazado por el TextColor propiedad.This property is obsolete and has been replaced by the TextColor property.
  • LineHeight -el multiplicador que se aplican en el alto de línea predeterminado del intervalo.LineHeight - the multiplier to apply to the default line height of the span. Para obtener más información, consulte alto de línea.For more information, see Line Height.
  • Style: el estilo que se va a aplicar al intervalo.Style – the style to apply to the span.
  • Text : el texto del intervalo.Text – the text of the span.
  • TextColor : el color del texto en el intervalo.TextColor – the color for the text in the span.
  • TextDecorations -las decoraciones para aplicar al texto en el intervalo.TextDecorations - the decorations to apply to the text in the span. Para obtener más información, consulte decoraciones de texto.For more information, see Text Decorations.

Nota

Las BackgroundColorpropiedades Text, OneWayy Text enlazables tienen un modo de enlace predeterminado de.The BackgroundColor, Text, and Text bindable properties have a default binding mode of OneWay. Para obtener más información acerca de este modo de enlace, vea el modo de enlace predeterminado en la guía del modo de enlace .For more information about this binding mode, see The Default Binding Mode in the Binding Mode guide.

Además, el GestureRecognizers propiedad puede usarse para definir una colección de los reconocedores de gestos que responderá a los movimientos en el Span .In addition, the GestureRecognizers property can be used to define a collection of gesture recognizers that will respond to gestures on the Span.

En el ejemplo de XAML siguiente se muestra un FormattedText propiedad que consta de tres Span instancias:The following XAML example demonstrates a FormattedText property that consists of three Span instances:

<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:The equivalent C# code is:

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

El Text propiedad de un Span puede establecerse mediante enlace de datos.The Text property of a Span can be set through data binding. Para obtener más información, consulte enlace de datos.For more information, see Data Binding.

Tenga en cuenta que un Span también puede responder a los gestos que se agregan en el intervalo GestureRecognizers colección.Note that a Span can also respond to any gestures that are added to the span's GestureRecognizers collection. Por ejemplo, un TapGestureRecognizer se ha agregado a la segunda Span en los ejemplos de código anteriores.For example, a TapGestureRecognizer has been added to the second Span in the above code examples. Por lo tanto, cuando esto Span se pulsa la TapGestureRecognizer responderá mediante la ejecución de la ICommand definido por el Command propiedad.Therefore, when this Span is tapped the TapGestureRecognizer will respond by executing the ICommand defined by the Command property. Para obtener más información acerca de los reconocedores de gestos, vea Xamarin.Forms gestos.For more information about gesture recognizers, see Xamarin.Forms Gestures.

Las capturas de pantalla siguientes muestran el resultado de la configuración de la FormattedString propiedad a tres Span instancias:The following screenshots show the result of setting the FormattedString property to three Span instances:

Ejemplo de etiqueta de FormattedText

Alto de líneaLine height

La altura vertical de un Label y un Span puede personalizarse configurando el Label.LineHeight propiedad o Span.LineHeight a un double valor.The vertical height of a Label and a Span can be customized by setting the Label.LineHeight property or Span.LineHeight to a double value. En iOS y Android, estos valores son multiplicadores del alto de línea original y en la plataforma Universal de Windows (UWP) la Label.LineHeight valor de propiedad es un multiplicador del tamaño de fuente de etiqueta.On iOS and Android these values are multipliers of the original line height, and on the Universal Windows Platform (UWP) the Label.LineHeight property value is a multiplier of the label font size.

Nota

En el siguiente ejemplo XAML se muestra cómo establecer el LineHeight propiedad en un Label :The following XAML example demonstrates setting the LineHeight property on a 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:The equivalent C# code is:

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

Las capturas de pantalla siguientes muestran el resultado de la configuración de la Label.LineHeight propiedad a 1.8:The following screenshots show the result of setting the Label.LineHeight property to 1.8:

Ejemplo de LineHeight de etiqueta

En el siguiente ejemplo XAML se muestra cómo establecer el LineHeight propiedad en un Span :The following XAML example demonstrates setting the LineHeight property on a 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:The equivalent C# code is:

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

Las capturas de pantalla siguientes muestran el resultado de la configuración de la Span.LineHeight propiedad a 1.8:The following screenshots show the result of setting the Span.LineHeight property to 1.8:

Ejemplo de LineHeight de intervalo

El texto que Label se muestra Span en las instancias de y se puede convertir en hipervínculos con el siguiente enfoque:The text displayed by Label and Span instances can be turned into hyperlinks with the following approach:

  1. Establezca las TextColor propiedades TextDecoration y de Label o. SpanSet the TextColor and TextDecoration properties of the Label or Span.
  2. Agregue un TapGestureRecognizer a la GestureRecognizers colección de Label o Span, cuya Command propiedad se enlaza a un ICommand, y cuya CommandParameter propiedad contiene la dirección URL que se va a abrir.Add a TapGestureRecognizer to the GestureRecognizers collection of the Label or Span, whose Command property binds to a ICommand, and whose CommandParameter property contains the URL to open.
  3. Defina el ICommand que va TapGestureRecognizera ejecutar.Define the ICommand that will be executed by the TapGestureRecognizer.
  4. Escriba el código que va a ICommandejecutar.Write the code that will be executed by the ICommand.

En el ejemplo de código siguiente, tomado del ejemplo de demostraciones de hipervínculo Label , se muestra un cuyo contenido Span se establece a partir de varias instancias:The following code example, taken from the Hyperlink Demos sample, shows a Label whose content is set from multiple Span instances:

<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 Span tercera instancia comprenden el texto, mientras Span que la segunda representa un hipervínculo tappable.In this example, the first and third Span instances comprise text, while the second Span represents a tappable hyperlink. Su color de texto se establece en azul y tiene una decoración de texto de subrayado.It has its text color set to blue, and has an underline text decoration. Esto crea la apariencia de un hipervínculo, tal como se muestra en las siguientes capturas de pantallas:This creates the appearance of a hyperlink, as shown in the following screenshots:

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

Cuando se puntea el hipervínculo, TapGestureRecognizer responderá ejecutando el ICommand definido por su Command propiedad.When the hyperlink is tapped, the TapGestureRecognizer will respond by executing the ICommand defined by its Command property. Además, la dirección URL especificada por la CommandParameter propiedad se pasará ICommand a como un parámetro.In addition, the URL specified by the CommandParameter property will be passed to the ICommand as a parameter.

El código subyacente de la página XAML contiene la TapCommand implementación:The code-behind for the XAML page contains the TapCommand implementation:

public partial class MainPage : ContentPage
{
    public ICommand TapCommand => new Command<string>(OpenBrowser);

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

    void OpenBrowser(string url)
    {
        Device.OpenUri(new Uri(url));
    }
}

Ejecuta el OpenBrowser método, pasando el valor de TapGestureRecognizer.CommandParameter la propiedad como un parámetro. TapCommandThe TapCommand executes the OpenBrowser method, passing the TapGestureRecognizer.CommandParameter property value as a parameter. A su vez, este método llama Device.OpenUri al método para abrir la dirección URL en un explorador Web.In turn, this method calls the Device.OpenUri method to open the URL in a web browser. Por lo tanto, el efecto general es que cuando se puntea el hipervínculo en la página, aparece un explorador Web y se navega a la dirección URL asociada al hipervínculo.Therefore, the overall effect is that when the hyperlink is tapped on the page, a web browser appears and the URL associated with the hyperlink is navigated to.

El enfoque anterior para crear un hipervínculo requiere la escritura de código repetitivo cada vez que se requiere un hipervínculo en la aplicación.The previous approach to creating a hyperlink requires writing repetitive code every time you require a hyperlink in your application. Sin Label embargo, Span se pueden crear HyperlinkLabel HyperlinkSpan subclases para las clases y, con el reconocedor de gestos y el código de formato de texto agregado allí.However, both the Label and Span classes can be subclassed to create HyperlinkLabel and HyperlinkSpan classes, with the gesture recognizer and text formatting code added there.

En el ejemplo de código siguiente, tomado del ejemplo de demostraciones de hipervínculo HyperlinkSpan , se muestra una clase:The following code example, taken from the Hyperlink Demos sample, shows a HyperlinkSpan class:

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
        {
            Command = new Command(() => Device.OpenUri(new Uri(Url)))
        });
    }
}

La HyperlinkSpan clase define una Url propiedad, y se BindablePropertyasocia, y el constructor establece la apariencia del hipervínculo y el TapGestureRecognizer objeto que responderá cuando se puntee en el hipervínculo.The HyperlinkSpan class defines a Url property, and associated BindableProperty, and the constructor sets the hyperlink appearance and the TapGestureRecognizer that will respond when the hyperlink is tapped. Cuando se puntea en, el TapGestureRecognizer responderá ejecutando el Device.OpenUri método para abrir la dirección URL, especificada por la Url propiedad, en un explorador Web. HyperlinkSpanWhen a HyperlinkSpan is tapped, the TapGestureRecognizer will respond by executing the Device.OpenUri method to open the URL, specified by the Url property, in a web browser.

La HyperlinkSpan clase se puede consumir agregando una instancia de la clase a XAML:The HyperlinkSpan class can be consumed by adding an instance of the class to the 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 estiloStyling labels

Las secciones anteriores tratan la configuración Label y Span las propiedades de por instancia.The previous sections covered setting Label and Span properties on a per-instance basis. Sin embargo, los conjuntos de propiedades se pueden agrupar en un estilo que se aplica de manera coherente a una o varias vistas.However, sets of properties can be grouped into one style that is consistently applied to one or many views. Esto puede mejorar la legibilidad del código y realizar cambios de diseño sea más fácil de implementar.This can increase readability of code and make design changes easier to implement. Para obtener más información, consulte estilos.For more information, see Styles.