Tutorial sobre el editor Xamarin.Forms

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.

1. Inicie Visual Studio y cree una aplicación de Xamarin.Forms en blanco llamada EditorTutorial.

   Importante

   Los fragmentos de código de C# y XAML en este tutorial necesitan que la solución se denomine EditorTutorial. 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.

2. En el Explorador de soluciones, en el proyecto EditorTutorial, 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="EditorTutorial.MainPage">
       <StackLayout Margin="20,35,20,20">
           <Editor Placeholder="Enter multi-line text here"
                   HeightRequest="200" />
       </StackLayout>
   </ContentPage>
   

   Este código define mediante declaración la interfaz de usuario de la página, que consiste en un objeto Editor en un StackLayout. La propiedad Editor.Placeholder especifica el texto de marcador de posición que se muestra cuando el objeto Editor aparece por primera vez. Además, la propiedad HeightRequest especifica el alto del elemento Editor en unidades independientes de dispositivo.

3. 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:

   

   Nota

   Mientras que Android indica el alto del objeto Editor, iOS no lo hace.

   En Visual Studio, detenga la aplicación.

Para completar este tutorial debe tener instalado Visual Studio para Mac (versión más reciente) con compatibilidad con la plataforma de iOS y Android. Además, también necesitará Xcode (versión más reciente). Para obtener más información sobre la instalación de la plataforma de Xamarin, consulte Instalación de Xamarin.

1. Inicie Visual Studio para Mac y cree una aplicación de Xamarin.Forms en blanco llamada EditorTutorial.

   Importante

   Los fragmentos de código de C# y XAML en este tutorial necesitan que la solución se denomine EditorTutorial. 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.

2. En el Panel de solución, en el proyecto EditorTutorial, 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="EditorTutorial.MainPage">
       <StackLayout Margin="20,35,20,20">
           <Editor Placeholder="Enter multi-line text here"
                   HeightRequest="200" />
       </StackLayout>
   </ContentPage>
   

   Este código define mediante declaración la interfaz de usuario de la página, que consiste en un objeto Editor en un StackLayout. La propiedad Editor.Placeholder especifica el texto de marcador de posición que se muestra cuando el objeto Editor aparece por primera vez. Además, la propiedad HeightRequest especifica el alto del elemento Editor en unidades independientes de dispositivo.

3. En la barra de herramientas de Visual Studio para Mac, 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 de iOS elegido:

   

   Nota

   Mientras que Android indica el alto del objeto Editor, iOS no lo hace.

   En Visual Studio para Mac, detenga la aplicación.

1. En MainPage.xaml, modifique la declaración Editor para que establezca un controlador para los eventos TextChanged y Completed:

   <Editor Placeholder="Enter multi-line text here"
           HeightRequest="200"
           TextChanged="OnEditorTextChanged"
           Completed="OnEditorCompleted" />
   

   Este código establece el evento TextChanged en un controlador de eventos denominado OnEditorTextChanged, y el evento Completed, en un controlador de eventos llamado OnEditorCompleted. Ambos controladores de eventos se crearán en el paso siguiente.

2. En el Explorador de soluciones, en el proyecto EditorTutorial, expanda MainPage.xaml y haga doble clic en MainPage.xaml.cs para abrirlo. Después, en MainPage.xaml.cs, agregue los controladores de eventos OnEditorTextChanged y OnEditorCompleted a la clase:

   void OnEditorTextChanged(object sender, TextChangedEventArgs e)
   {
       string oldText = e.OldTextValue;
       string newText = e.NewTextValue;
   }
   
   void OnEditorCompleted(object sender, EventArgs e)
   {
       string text = ((Editor)sender).Text;
   }
   

   Cuando cambia el texto en Editor, se ejecuta el método OnEditorTextChanged. El argumento sender es el objeto Editor responsable de la activación del evento TextChanged y puede usarse para acceder al objeto Editor. El argumento TextChangedEventArgs proporciona los valores de texto anteriores y nuevos (antes y después del cambio de texto).

   Cuando se completa la edición, se ejecuta el método OnEditorCompleted. Para hacerlo, es necesario quitar el enfoque de Editor o presionar el botón "Aceptar" en iOS. El argumento sender es el objeto Editor responsable de la activación del evento TextChanged y puede usarse para acceder al objeto Editor.

   Importante

   El texto especificado en Editor se almacena en la propiedad Text.

3. 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 Editor y observe cómo se activa el evento TextChanged. Quite el enfoque de Editor para observar cómo se activa el evento Completed.

   Para obtener más información sobre los eventos de Editor, consulte Eventos e interactividad en la guía Editor de Xamarin.Forms.

1. En MainPage.xaml, modifique la declaración Editor para que establezca un controlador para los eventos TextChanged y Completed:

   <Editor Placeholder="Enter multi-line text here"
           HeightRequest="200"
           TextChanged="OnEditorTextChanged"
           Completed="OnEditorCompleted" />
   

   Este código establece el evento TextChanged en un controlador de eventos denominado OnEditorTextChanged, y el evento Completed, en un controlador de eventos llamado OnEditorCompleted. Ambos controladores de eventos se crearán en el paso siguiente.

2. En el Panel de solución, en el proyecto EditorTutorial, expanda MainPage.xaml y haga doble clic en MainPage.xaml.cs para abrirlo. Después, en MainPage.xaml.cs, agregue los controladores de eventos OnEditorTextChanged y OnEditorCompleted a la clase:

   void OnEditorTextChanged(object sender, TextChangedEventArgs e)
   {
       string oldText = e.OldTextValue;
       string newText = e.NewTextValue;
   }
   
   void OnEditorCompleted(object sender, EventArgs e)
   {
       string text = ((Editor)sender).Text;
   }
   

   Cuando cambia el texto en Editor, se ejecuta el método OnEditorTextChanged. El argumento sender es el objeto Editor responsable de la activación del evento TextChanged y puede usarse para acceder al objeto Editor. El argumento TextChangedEventArgs proporciona los valores de texto anteriores y nuevos (antes y después del cambio de texto).

   Cuando se completa la edición, se ejecuta el método OnEditorCompleted. Para hacerlo, es necesario quitar el enfoque de Editor o presionar el botón "Aceptar" en iOS. El argumento sender es el objeto Editor responsable de la activación del evento TextChanged y puede usarse para acceder al objeto Editor.

   Importante

   El texto especificado en Editor se almacena en la propiedad Text.

3. En la barra de herramientas de Visual Studio para Mac, 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 de iOS elegido:

   

   Establezca puntos de interrupción en los dos controladores de eventos, escriba texto en Editor y observe cómo se activa el evento TextChanged. Quite el enfoque de Editor para observar cómo se activa el evento Completed.

   Para obtener más información sobre los eventos de Editor, consulte Eventos e interactividad en la guía Editor de Xamarin.Forms.

1. En MainPage.xaml, modifique la declaración Editor para personalizar su comportamiento:

   <Editor Placeholder="Enter multi-line text here"
           AutoSize="TextChanges"
           MaxLength="200"
           IsSpellCheckEnabled="false"
           IsTextPredictionEnabled="false" />
   

   Este código establece las propiedades que personalizan el comportamiento de Editor. La propiedad AutoSize está establecida en TextChanges, lo cual indica que la altura de Editor aumentará cuando se rellene con texto y disminuirá a medida que se elimine texto. La propiedad MaxLength limita la longitud de entrada que se acepta para Editor. Además, la propiedad IsSpellCheckEnabled está establecida en false para deshabilitar el corrector ortográfico, mientras que la propiedad IsTextPredictionEnabled está establecida en false para deshabilitar la predicción de texto y la predicción de texto automática.

2. 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 Editor y observe que la altura de Editor aumenta a medida que se rellena con texto y disminuye a medida que se elimina texto, y que el número máximo de caracteres que se puede especificar son 200:

   

   En Visual Studio, detenga la aplicación.

   Para obtener más información sobre la personalización del comportamiento de Editor, consulte la guía Editor de Xamarin.Forms.

1. En MainPage.xaml, modifique la declaración Editor para personalizar su comportamiento:

   <Editor Placeholder="Enter multi-line text here"
           AutoSize="TextChanges"
           MaxLength="200"
           IsSpellCheckEnabled="false"
           IsTextPredictionEnabled="false" />
   

   Este código establece las propiedades que personalizan el comportamiento de Editor. La propiedad AutoSize está establecida en TextChanges, lo cual indica que la altura de Editor aumentará cuando se rellene con texto y disminuirá a medida que se elimine texto. La propiedad MaxLength limita la longitud de entrada que se acepta para Editor. Además, la propiedad IsSpellCheckEnabled está establecida en false para deshabilitar el corrector ortográfico, mientras que la propiedad IsTextPredictionEnabled está establecida en false para deshabilitar la predicción de texto y la predicción de texto automática.

2. 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 para Mac, 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 de iOS elegido. Escriba texto en Editor y observe que la altura de Editor aumenta a medida que se rellena con texto y disminuye a medida que se elimina texto, y que el número máximo de caracteres que se puede especificar son 200:

   

   En Visual Studio para Mac, detenga la aplicación.

   Para obtener más información sobre la personalización del comportamiento de Editor, consulte la guía Editor de Xamarin.Forms.