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 el siguiente: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.

Espaciado de caracteresCharacter spacing

El espaciado de caracteres se puede aplicar a las instancias de Label estableciendo la propiedad Label.CharacterSpacing en un valor double:Character spacing can be applied to Label instances by setting the Label.CharacterSpacing property to a double value:

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

El código de C# equivalente es el siguiente:The equivalent C# code is:

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

El resultado es que los caracteres del texto que muestra el Label se espacian CharacterSpacing unidades independientes del dispositivo.The result is that characters in the text displayed by the Label are spaced CharacterSpacing device-independent units apart.

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 el siguiente: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íneasDisplay 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-1, que es su valor predeterminado, el Label respeta el valor de la propiedad LineBreakMode para mostrar solo una línea, posiblemente truncada, o todas las líneas con todo el texto.When MaxLines is -1, which is its default value, 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 0, el Label no se muestra.When MaxLines is 0, the Label isn't displayed.
  • 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 el siguiente: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

Mostrar HTMLDisplay HTML

La clase Label tiene una propiedad TextType, que determina si la instancia de Label debe mostrar texto sin formato o texto HTML.The Label class has a TextType property, which determines whether the Label instance should display plain text, or HTML text. Esta propiedad debe establecerse en uno de los miembros de la enumeración TextType:This property should be set to one of the members of the TextType enumeration:

  • Text indica que el Label mostrará el texto sin formato y es el valor predeterminado de la propiedad Label.TextType.Text indicates that the Label will display plain text, and is the default value of the Label.TextType property.
  • Html indica que el Label mostrará el texto HTML.Html indicates that the Label will display HTML text.

Por lo tanto, las instancias de Label pueden mostrar HTML estableciendo la propiedad Label.TextType en Htmly la propiedad Label.Text en una cadena HTML:Therefore, Label instances can display HTML by setting the Label.TextType property to Html, and the Label.Text property to a HTML string:

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 usarse con el símbolo de \.In the example above, the double quote characters in the HTML have to be escaped using the \ symbol.

En XAML, las cadenas HTML se pueden volver ilegibles debido a la escape adicional de los símbolos < y >:In XAML, HTML strings can become unreadable due to additionally escaping the < and > symbols:

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

Como alternativa, para mayor legibilidad, el código HTML se puede insertar en una CDATA sección:Alternatively, for greater readability the HTML can be inlined in a CDATA section:

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

En este ejemplo, la propiedad Label.Text se establece en la cadena HTML que se inserta en la sección CDATA.In this example, the Label.Text property is set to the HTML string that's inlined in the CDATA section. Esto funciona porque la propiedad Text es el ContentProperty de la clase Label.This works because the Text property is the ContentProperty for the Label class.

Las capturas de pantallas siguientes muestran un Label mostrar HTML:The following screenshots show a Label displaying HTML:

Capturas de pantallas de una etiqueta que muestra HTML, en iOS y Android

Importante

La visualización de HTML en un Label se limita a las etiquetas HTML admitidas por la plataforma subyacente.Displaying HTML in a Label is limited to the HTML tags that are supported by the underlying platform.

Texto con formatoFormatted text

Las etiquetas exponen una propiedad FormattedText 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.
  • CharacterSpacing, del tipo double, es el espaciado entre los caracteres del texto de Span.CharacterSpacing, of type double, is the spacing between characters of the Span text.
  • 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.

Las propiedades enlazables BackgroundColor, Texty Text tienen un modo de enlace predeterminado de OneWay.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.

Nota

No es posible mostrar HTML en un Span.It's not possible to display HTML in a 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 el siguiente: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, vea 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 el siguiente: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 el siguiente: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

RellenoPadding

El relleno representa el espacio que hay entre un elemento y sus elementos secundarios, y se utiliza para separar el elemento de su propio contenido.Padding represents the space between an element and its child elements, and is used to separate the element from its own content. El relleno se puede aplicar a las instancias de Label estableciendo la propiedad Label.Padding en un valor Thickness :Padding can be applied to Label instances by setting the Label.Padding property to a Thickness value:

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

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 que establece la propiedad Padding, se aplicará el relleno y el valor de relleno se podrá actualizar más adelante.On iOS, when a Label is created that sets the Padding property, padding will be applied and the padding value can be updated later. Sin embargo, cuando se crea una Label que no establece la propiedad Padding, intentar establecerla más tarde no tendrá ningún efecto.However, when a Label is created that doesn't set the Padding property, attempting to set it later will have no effect.

En Android y en el Plataforma universal de Windows, se puede especificar el valor de la propiedad Padding cuando se crea la Label o una versión posterior.On Android and the Universal Windows Platform, the Padding property value can be specified when the Label is created, or later.

Para obtener más información sobre el relleno, vea márgenes y relleno.For more information about padding, see Margins and Padding.

El texto que se muestra en las instancias de Label y Span 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 propiedades TextColor y TextDecoration de la Label o Span.Set the TextColor and TextDecoration properties of the Label or Span.
  2. Agregue un TapGestureRecognizer a la colección GestureRecognizers de la Label o Span, cuya propiedad Command enlaza a un ICommandy cuya propiedad CommandParameter 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 se ejecutará en el TapGestureRecognizer.Define the ICommand that will be executed by the TapGestureRecognizer.
  4. Escriba el código que se ejecutará en el ICommand.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 , se muestra un Label cuyo contenido se establece a partir de varias instancias de Span :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, el primer y el tercer Span instancias de incluyen texto, mientras que el segundo Span 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ínculosHyperlinks

Cuando se puntea el hipervínculo, el TapGestureRecognizer responderá ejecutando el ICommand definido por su propiedad Command .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 propiedad CommandParameter se pasará al ICommand 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 implementación de TapCommand:The code-behind for the XAML page contains the TapCommand implementation:

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

El TapCommand ejecuta el método Launcher.OpenAsync, pasando el valor de la propiedad TapGestureRecognizer.CommandParameter como parámetro.The TapCommand executes the Launcher.OpenAsync method, passing the TapGestureRecognizer.CommandParameter property value as a parameter. Xamarin. Essentials proporciona el método Launcher.OpenAsync y abre la dirección URL en un explorador Web.The Launcher.OpenAsync method is provided by Xamarin.Essentials, and opens 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 embargo, se pueden crear subclases de las clases Label y Span para crear HyperlinkLabel y HyperlinkSpan clases, 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 , se muestra una HyperlinkSpan 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
        {
            // Launcher.OpenAsync is provided by Xamarin.Essentials.
            Command = new Command(async () => await Launcher.OpenAsync(Url))
        });
    }
}

La clase HyperlinkSpan define una propiedad Url y BindablePropertyasociados, y el constructor establece la apariencia del hipervínculo y el TapGestureRecognizer 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 un HyperlinkSpan, el TapGestureRecognizer responderá ejecutando el método Launcher.OpenAsync para abrir la dirección URL, especificada por la propiedad Url, en un explorador Web.When a HyperlinkSpan is tapped, the TapGestureRecognizer will respond by executing the Launcher.OpenAsync method to open the URL, specified by the Url property, in a web browser.

La clase HyperlinkSpan 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.