Tutorial sobre las etiquetas Xamarin.Forms
Antes de intentar este tutorial, debe haber completado correctamente lo siguiente:
- Inicio rápido Compilación de la primera aplicación de Xamarin.Forms.
- Tutorial sobre el diseño de pila (StackLayout).
En este tutorial aprenderá a:
- Crear Xamarin.Forms
Labelen XAML. - Cambiar la apariencia del objeto
Label. - Presentar texto, en un solo objeto
Label, que tiene varios formatos.
Va a usar Visual Studio 2019, o Visual Studio para Mac, para crear una aplicación sencilla que demuestre cómo mostrar texto en Label. En las capturas de pantalla siguientes se muestra la aplicación final:
También usará la Recarga activa de XAML para Xamarin.Forms para ver cambios en la UI sin tener que volver a compilar la aplicación.
Creación de una etiqueta
Para completar este tutorial debe tener Visual Studio 2019 (versión más reciente), con la carga de trabajo Desarrollo para dispositivos móviles con .NET instalada. Además, necesita un equipo Mac emparejado para compilar la aplicación del tutorial en iOS. Para obtener información sobre la instalación de la plataforma de Xamarin, consulte Instalación de Xamarin. Para obtener información sobre cómo conectar Visual Studio 2019 a un host de compilación de Mac, consulte Emparejar con Mac para el desarrollo de Xamarin.iOS.
Inicie Visual Studio y cree una aplicación de Xamarin.Forms en blanco llamada LabelTutorial.
Importante
Los fragmentos de código de C# y XAML en este tutorial necesitan que la solución se denomine LabelTutorial. El uso de otro nombre dará como resultado errores de compilación al copiar el código de este tutorial en la solución.
Para obtener más información sobre la biblioteca de .NET Standard creada, vea Anatomía de una aplicación de Xamarin.Forms en Análisis detallado de inicio rápido de Xamarin.Forms.
En el Explorador de soluciones, en el proyecto LabelTutorial, haga doble clic en MainPage.xaml para abrirlo. Después, en MainPage.xaml, quite todo el código de plantilla y sustitúyalo por el código siguiente:
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="LabelTutorial.MainPage"> <StackLayout Margin="20,35,20,20"> <Label Text="Welcome to Xamarin.Forms!" HorizontalOptions="Center" /> </StackLayout> </ContentPage>Este código define mediante declaración la interfaz de usuario de la página, que consiste en un objeto
Labelen unStackLayout. La propiedadLabel.Textespecifica que se muestre el texto, mientras que la propiedadHorizontalOptionsespecifica queLabelse centre horizontalmente.En la barra de herramientas de Visual Studio, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador remoto de iOS elegido:
Cambio del aspecto
En MainPage.xaml, modifique la declaración
Labelpara cambiar su apariencia visual:<Label Text="Welcome to Xamarin.Forms!" TextColor="Blue" FontAttributes="Italic" FontSize="22" TextDecorations="Underline" HorizontalOptions="Center" />Este código establece las propiedades que cambian la apariencia visual del objeto
Label. La propiedadTextColorestablece el color del texto del objetoLabel. La propiedadFontAttributesestablece la fuente de la etiqueta en cursiva y la propiedadFontSizeestablece el tamaño de fuente. Además, se aplica una decoración de texto subrayado en el objetoLabelconfigurando la propiedadTextDecorations, y se centra horizontalmente configurando la propiedadHorizontalOptionsenCenter.Si la aplicación se sigue ejecutando, guarde los cambios hechos al archivo, y la interfaz de usuario de la aplicación se actualizará automáticamente en su simulador o emulador. De lo contrario, en la barra de herramientas de Visual Studio, presione el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador remoto de iOS elegido. Observe que el aspecto del objeto
Labelha cambiado:
Para obtener más información sobre la configuración del aspecto de
Label, consulte la guía Label de Xamarin.Forms.
Presentación de texto con formato
En MainPage.xaml, modifique la declaración
Labelpara presentar texto que usa varios formatos, en un solo objetoLabel.<Label TextColor="Gray" FontSize="Medium"> <Label.FormattedText> <FormattedString> <Span Text="This sentence contains " /> <Span Text="words that are emphasized, " FontAttributes="Italic" /> <Span Text="and underlined." TextDecorations="Underline" /> </FormattedString> </Label.FormattedText> </Label>Este código muestra el texto, en un solo objeto
Labelque usa varios formatos. El texto del primer elementoSpanse muestra con el formato establecido enLabel, mientras que el texto en las instancias segunda y tercera deSpanse muestra con el formato establecido enLabely el formato adicional establecido en cadaSpan.Nota
La propiedad
FormattedTextes de tipoFormattedString, que consta de una o varias instanciasSpan.Si la aplicación se sigue ejecutando, guarde los cambios hechos al archivo, y la interfaz de usuario de la aplicación se actualizará automáticamente en su simulador o emulador. De lo contrario, en la barra de herramientas de Visual Studio, presione el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador remoto de iOS elegido. Observe que el aspecto del objeto
Labelha cambiado:
En Visual Studio, detenga la aplicación.
Para obtener más información sobre la configuración del aspecto de
Span, consulte Texto con formato en la guía Label de Xamarin.Forms.
¡Enhorabuena!
Ha completado el tutorial, donde ha aprendido a:
- Crear Xamarin.Forms
Labelen XAML. - Cambiar la apariencia del objeto
Label. - Presentar texto, en un solo objeto
Label, que tiene varios formatos.
Pasos siguientes
Para obtener más información sobre los conceptos básicos de creación de aplicaciones móviles con Xamarin.Forms, continúe al tutorial sobre botones.
Vínculos relacionados
¿Tiene algún problema con esta sección? Si es así, envíenos sus comentarios para que podamos mejorarla.