Tutorial sobre las entradas 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
Entryen XAML. - Responder al texto en el cambio del objeto
Entry. - Personalizar el comportamiento del objeto
Entry.
Va a usar Visual Studio 2019, o Visual Studio para Mac, para crear una aplicación sencilla que demuestre cómo personalizar el comportamiento de un Entry. 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 entrada
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 EntryTutorial.
Importante
Los fragmentos de código de C# y XAML en este tutorial necesitan que la solución se denomine EntryTutorial. 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 EntryTutorial, 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="EntryTutorial.MainPage"> <StackLayout Margin="20,35,20,20"> <Entry Placeholder="Enter text" /> </StackLayout> </ContentPage>Este código define mediante declaración la interfaz de usuario de la página, que consiste en un objeto
Entryen unStackLayout. La propiedadEntry.Placeholderespecifica el texto de marcador de posición que se muestra cuando el objetoEntryaparece por primera vez.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:
En Visual Studio, detenga la aplicación.
Respuesta a los cambios de texto
En MainPage.xaml, modifique la declaración
Entrypara que establezca un controlador para los eventosTextChangedyCompleted:<Entry Placeholder="Enter text" TextChanged="OnEntryTextChanged" Completed="OnEntryCompleted" />Este código establece el evento
TextChangeden un controlador de eventos denominadoOnEntryTextChanged, y el eventoCompleted, en un controlador de eventos llamadoOnEntryCompleted. Ambos controladores de eventos se crearán en el paso siguiente.En el Explorador de soluciones, en el proyecto EntryTutorial, expanda MainPage.xaml y haga doble clic en MainPage.xaml.cs para abrirlo. Después, en MainPage.xaml.cs, agregue los controladores de eventos
OnEntryTextChangedyOnEntryCompleteda la clase:void OnEntryTextChanged(object sender, TextChangedEventArgs e) { string oldText = e.OldTextValue; string newText = e.NewTextValue; } void OnEntryCompleted(object sender, EventArgs e) { string text = ((Entry)sender).Text; }Cuando cambia el texto en
Entry, se ejecuta el métodoOnEntryTextChanged. El argumentosenderes el objetoEntryresponsable de la activación del eventoTextChangedy puede usarse para acceder al objetoEntry. El argumentoTextChangedEventArgsproporciona los valores de texto anteriores y nuevos (antes y después del cambio de texto).Al finalizar el texto en
Entrycon la tecla de retorno, se ejecuta el métodoOnEntryCompleted. El argumentosenderes el objetoEntryresponsable de la activación del eventoTextChangedy puede usarse para acceder al objetoEntry.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:
Establezca puntos de interrupción en los dos controladores de eventos, escriba texto en
Entryy observe cómo se desencadenan los eventosTextChangedyCompleted.Para obtener más información sobre los eventos de
Entry, consulte Eventos e interactividad en la guía Entry de Xamarin.Forms.
Personalización del comportamiento
En MainPage.xaml, modifique la declaración
Entrypara personalizar su comportamiento:<Entry Placeholder="Enter password" MaxLength="15" IsSpellCheckEnabled="false" IsTextPredictionEnabled="false" IsPassword="true" />Este código establece las propiedades que personalizan el comportamiento de
Entry. La propiedadMaxLengthlimita la longitud de entrada aceptable paraEntryy la propiedadIsSpellCheckEnabledestá establecida enfalsepara deshabilitar el corrector ortográfico. De forma similar, la propiedadIsTextPredictionEnabledestá establecida enfalsepara deshabilitar la predicción de texto y la predicción de texto automática. Además, la propiedadIsPasswordgarantiza que los caracteres escritos se enmascaran con un carácter de contraseña (un círculo negro).Nota
Para algunos escenarios de entrada de texto, como escribir una contraseña, el corrector ortográfico y la predicción de texto proporcionan una experiencia negativa y, por tanto, deben deshabilitarse.
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. Escriba texto en
Entryy observe que cada carácter se sustituye por un carácter de máscara de contraseña y que el número máximo de caracteres que se puede especificar son 15:
En Visual Studio, detenga la aplicación.
Para obtener más información sobre la personalización del comportamiento de
Entry, consulte la guía Entry de Xamarin.Forms.
¡Enhorabuena!
Ha completado el tutorial, donde ha aprendido a:
- Crear Xamarin.Forms
Entryen XAML. - Responder al texto en el cambio del objeto
Entry. - Personalizar el comportamiento del objeto
Entry.
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 los editores.
Vínculos relacionados
¿Tiene algún problema con esta sección? Si es así, envíenos sus comentarios para que podamos mejorarla.