Editor

.NET Multi-platform App UI (.NET MAUI) Editor permite escribir y editar varias líneas de texto.

Editor define las siguientes propiedades:

• AutoSize, de tipo EditorAutoSizeOption, define si el editor cambiará el tamaño para contener la entrada del usuario. De forma predeterminada, el editor no tiene tamaño automático.
• HorizontalTextAlignment, del tipo TextAlignment, define la alineación horizontal del texto.
• VerticalTextAlignment, del tipo TextAlignment, define la alineación vertical del texto.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y que se les puede aplicar un estilo.

Además, Editor define un evento Completed, que se genera cuando el usuario finaliza el texto en Editor con la clave de retorno.

Editor se deriva de la clase InputView, de la que hereda las propiedades siguientes:

• CharacterSpacing, del tipo double, es el espaciado entre los caracteres del texto introducidos.
• CursorPosition, de tipo int, define la posición del cursor dentro del editor.
• FontAttributes, de tipo FontAttributes, determina el estilo de texto.
• FontAutoScalingEnabled, de tipo bool, define si el texto reflejará las preferencias de escalado establecidas en el sistema operativo. El valor predeterminado de esta propiedad es true.
• FontFamily, del tipo string, define la familia de fuentes.
• FontSize, de tipo double, define el tamaño de fuente.
• IsReadOnly, de tipo bool, define si se debe impedir que el usuario modifique el texto. El valor predeterminado de esta propiedad es false.
• IsSpellCheckEnabled, de tipo bool, controla si la revisión ortográfica está habilitada.
• IsTextPredictionEnabled, de tipo bool, controla si la predicción de texto y la corrección automática de texto están habilitadas.
• Keyboard, de tipo Keyboard, especifica el teclado de entrada temporal que se muestra al escribir texto.
• MaxLength, de tipo int, define la longitud máxima de entrada.
• Placeholder, de tipo string, define el texto que se muestra cuando el control está vacío.
• PlaceholderColor, del tipo Color, define el color del texto del cuadro de búsqueda del marcador de posición.
• SelectionLength, de tipo int, representa la longitud del texto seleccionado dentro del control.
• Text, de tipo string, define el texto escrito en el control.
• TextColor, de tipo Color, define el color del texto especificado.
• TextTransform, de tipo TextTransform, especifica el uso de mayúsculas y minúsculas del texto especificado.

Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y que se les puede aplicar un estilo.

Además, InputView define un evento TextChanged, que se genera cuando cambia el texto de Editor. El objeto TextChangedEventArgs que acompaña al evento TextChanged tiene propiedades NewTextValue y OldTextValue, que especifican el texto nuevo y antiguo, respectivamente.

Para obtener información sobre cómo especificar fuentes en un Editor, consulta Fuentes.

Creación de un editor

En el siguiente ejemplo se muestra cómo crear un Editor:

<Editor x:Name="editor"
        Placeholder="Enter your response here"
        HeightRequest="250"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />

El código de C# equivalente es el siguiente:

Editor editor = new Editor { Placeholder = "Enter text", HeightRequest = 250 };
editor.TextChanged += OnEditorTextChanged;
editor.Completed += OnEditorCompleted;

En la siguiente captura de pantalla se muestra el resultado de Editor en Android:

Nota:

En iOS, el teclado de entrada temporal puede cubrir un campo de entrada de texto cuando el campo está cerca de la parte inferior de la pantalla, lo que dificulta la entrada de texto. Sin embargo, en una aplicación .NET MAUI iOS, las páginas se desplazan automáticamente cuando el teclado de entrada temporal cubriría un campo de entrada de texto, de modo que el campo esté por encima del teclado de entrada temporal. Puede llamarse el método KeyboardAutoManagerScroll.Disconnect, en el espacio de nombres Microsoft.Maui.Platform, para deshabilitar este comportamiento predeterminado. Puede llamarse al método KeyboardAutoManagerScroll.Connect para volver a habilitar el comportamiento después de deshabilitarlo.

Se puede acceder al texto escrito leyendo la propiedad Texty los eventos TextChanged y Completed indican que el texto ha cambiado o se ha completado.

El evento TextChanged se genera cuando cambia el texto en el Editor, y el TextChangedEventArgs proporciona el texto antes y después del cambio a través de las propiedades OldTextValue y NewTextValue:

void OnEditorTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
    string myText = editor.Text;
}

El evento Completed solo se genera en Windows cuando el usuario ha finalizado la entrada presionando la tecla pestaña en el teclado o centrando otro control. El controlador del evento es un controlador de eventos genérico:

void OnEditorCompleted(object sender, EventArgs e)
{
   string text = ((Editor)sender).Text;
}

Espaciado entre caracteres

El espaciado de caracteres se puede aplicar a mediante un Editor estableciendo la propiedad CharacterSpacing en un valor double:

<Editor ...
        CharacterSpacing="10" />

El resultado es que los caracteres del texto mostrado por el Editor están separados por unidades independientes del dispositivo espaciadas CharacterSpacing.

Nota:

El valor de propiedad CharacterSpacing se aplica al texto mostrado por las propiedades Text y Placeholder.

Limitación de las longitudes de entrada

La propiedad MaxLength puede utilizarse para limitar la longitud de entrada que se acepta para el Editor. Esta propiedad debe establecerse en un entero positivo:

<Editor ... MaxLength="10" />

Un valor de propiedad MaxLength de 0 indica que no se permitirá ninguna entrada, y un valor de int.MaxValue, que es el valor predeterminado de Editor, indica que no hay ningún límite efectivo en el número de caracteres que se pueden escribir.

Tamaño automático de un editor

Se puede hacer que Editor haga el ajuste de tamaño automático de su contenido estableciendo la propiedad Editor.AutoSize en TextChanges, que es un valor de la enumeración EditorAutoSizeOption. Esta enumeración tiene dos valores:

• Disabled indica que el ajuste de tamaño automático está deshabilitado y es el valor predeterminado.
• TextChanges indica que el ajuste de tamaño automático está habilitado.

Esto se puede lograr de la siguiente manera:

<Editor Text="Enter text here"
        AutoSize="TextChanges" />

Cuando se habilita el ajuste de tamaño automático, el alto de Editor aumentará cuando el usuario lo llene con texto y el alto disminuirá a medida que el usuario elimine texto. Esto se puede usar para asegurarse de que los objetos Editor de un elemento DataTemplate de un elemento CollectionView tienen el tamaño correcto.

Importante

Un Editor no se ajustará automáticamente si se ha establecido la propiedad HeightRequest.

Transformar texto

Un objeto Editor puede transformar el uso de mayúsculas y minúsculas de su texto, almacenado en la propiedad Text, estableciendo la propiedad TextTransform en un valor de la enumeración TextTransform. Esta enumeración tiene cuatro valores:

• None indica que el texto no se transformará.
• Default: indica que se usará el comportamiento predeterminado para la plataforma. Se trata del valor predeterminado de la propiedad TextTransform.
• Lowercase indica que el texto se transformará en minúsculas.
• Uppercase indica que el texto se transformará en mayúsculas.

En el ejemplo siguiente se muestra cómo transformar texto en mayúsculas:

<Editor Text="This text will be displayed in uppercase."
        TextTransform="Uppercase" />

Personalizar el teclado

El teclado que aparece cuando los usuarios interactúan con un Editor se puede establecer mediante programación a través de la propiedad Keyboard en una de las siguientes propiedades de la clase Keyboard:

• Chat: se usa para el texto y los lugares donde los emoji son útiles.
• Default: el teclado predeterminado.
• Email: se usa al especificar direcciones de correo electrónico.
• Numeric: se usa al escribir números.
• Plain: se usa al escribir texto, sin ningún KeyboardFlags especificado.
• Telephone: se usa al escribir números de teléfono.
• Text: se usa al escribir texto.
• Url : se usa para especificar las rutas de acceso de archivo y direcciones web.

En el siguiente ejemplo se muestra cómo establecer la propiedad Keyboard:

<Editor Keyboard="Chat" />

La clase Keyboard tiene también un patrón de diseño Factory Method Create que puede usarse para personalizar un teclado mediante la especificación del comportamiento de las mayúsculas y minúsculas, el corrector ortográfico y las sugerencias. Los valores de enumeración KeyboardFlags se especifican como argumentos para el método, con la devolución de un Keyboard personalizado. La enumeración KeyboardFlags contiene los valores siguientes:

• None: no se agregan características al teclado.
• CapitalizeSentence: indica que la primera letra de la primera palabra de cada frase se escribirá automáticamente en mayúsculas.
• Spellcheck: indica que se pasará el corrector ortográfico al texto especificado.
• Suggestions: indica que se ofrecerán finalizaciones de palabra para el texto especificado.
• CapitalizeWord: indica que las primeras letras de todas las palabras se escribirán automáticamente en mayúsculas.
• CapitalizeCharacter: indica que todos los caracteres se escribirán automáticamente en mayúsculas.
• CapitalizeNone: indica que no se producirá ningún uso automático de mayúsculas.
• All: indica que se pasará el corrector automático, se ofrecerán finalizaciones de palabras y las frases empezarán en mayúsculas en el texto especificado.

El ejemplo de código XAML siguiente muestra cómo personalizar el Keyboard predeterminado para ofrecer finalizaciones de palabras y poner en mayúsculas todos los caracteres especificados:

<Editor>
    <Editor.Keyboard>
        <Keyboard x:FactoryMethod="Create">
            <x:Arguments>
                <KeyboardFlags>Suggestions,CapitalizeCharacter</KeyboardFlags>
            </x:Arguments>
        </Keyboard>
    </Editor.Keyboard>
</Editor>

El código de C# equivalente es el siguiente:

Editor editor = new Editor();
editor.Keyboard = Keyboard.Create(KeyboardFlags.Suggestions | KeyboardFlags.CapitalizeCharacter);

Ocultar y mostrar el teclado de entrada en pantalla

La clase SoftInputExtensions, en el espacio de nombres Microsoft.Maui, proporciona una serie de métodos de extensión que admiten la interacción con la entrada de teclado en pantalla en los controles que admiten la entrada de texto. La clase define los métodos siguientes:

• IsSoftInputShowing, que comprueba si el dispositivo muestra actualmente en la entrada de teclado en pantalla.
• HideSoftInputAsync, que intentará ocultar la entrada de teclado en pantalla si se muestra actualmente.
• ShowSoftInputAsync, que intentará mostrar la entrada de teclado en pantalla si está oculto actualmente.

En el ejemplo siguiente se muestra cómo ocultar la entrada de teclado en pantalla en un objeto Editor denominado editor, si se muestra actualmente:

if (editor.IsSoftInputShowing())
    await editor.HideSoftInputAsync(System.Threading.CancellationToken.None);

Habilitar y deshabilitar la revisión ortográfica

La propiedad IsSpellCheckEnabled controla si la revisión ortográfica está habilitada. De forma predeterminada, la propiedad se establece en true. A medida que el usuario escribe texto, se indican errores ortográficos.

Pero para algunos escenarios de entrada de texto, como escribir un nombre de usuario, la revisión ortográfica proporciona una experiencia negativa y, por lo tanto, debe deshabilitarse estableciendo la propiedad IsSpellCheckEnabled en false:

<Editor ... IsSpellCheckEnabled="false" />

Nota:

Cuando la propiedad IsSpellCheckEnabled se establece en false y no se usa un teclado personalizado, se deshabilitará el corrector ortográfico nativo. Sin embargo, si se ha establecido un objeto Keyboard que deshabilita la revisión ortográfica, como Keyboard.Chat, se omite la propiedad IsSpellCheckEnabled. Por lo tanto, la propiedad no se puede usar para habilitar la revisión ortográfica de un Keyboard que la deshabilita explícitamente.

Habilitación y deshabilitación de la predicción de texto

La propiedad IsTextPredictionEnabled controla si la predicción de texto y la corrección automática de texto están habilitadas. De forma predeterminada, la propiedad se establece en true. A medida que el usuario escribe texto, se presentan predicciones de palabras.

Sin embargo, para algunos escenarios de entrada de texto, como escribir un nombre de usuario, una predicción de texto y una corrección automática de texto proporcionan una experiencia negativa y deben deshabilitarse estableciendo la propiedad IsTextPredictionEnabled en false:

<Editor ... IsTextPredictionEnabled="false" />

Nota:

Cuando la propiedad IsTextPredictionEnabled se establece en false y no se usa un teclado personalizado, se deshabilita la predicción de texto y la corrección automática de texto. Sin embargo, si se ha establecido un Keyboard que deshabilita la predicción de texto, se omite la propiedad IsTextPredictionEnabled. Por lo tanto, no se puede usar la propiedad para habilitar la predicción de texto para un Keyboard que la deshabilite explícitamente.

Impedir la entrada de texto

Se puede impedir que los usuarios modifiquen el texto de Editor estableciendo la propiedad IsReadOnly, que tiene un valor predeterminado de false, en true:

<Editor Text="This is a read-only Editor"
        IsReadOnly="true" />

Nota:

La propiedad IsReadonly no modifica la apariencia visual de un objeto Editor, a diferencia de la propiedad IsEnabled que también cambia la apariencia visual de Editor a gris.