Xamarin.Forms Editor

Descargar el ejemplo

El control Editor se usa para aceptar entradas de varias líneas.

Establecer y leer texto

El Editor, al igual que otras vistas de presentación de texto, expone la propiedad Text. Esta propiedad se puede usar para establecer y leer el texto presentado por el Editor. En el ejemplo siguiente se muestra cómo establecer la propiedad Text en XAML:

<Editor x:Name="editor" Text="I am an Editor" />

En C#:

var editor = new Editor { Text = "I am an Editor" };

Para leer texto, acceda a la propiedad Text en C#:

var text = editor.Text;

Establecer el texto del marcador de posición

El Editor se puede establecer para mostrar el texto del marcador de posición cuando no almacena la entrada del usuario. Esto se logra estableciendo la propiedad Placeholder en un string, y a menudo se usa para indicar el tipo de contenido adecuado para el Editor. Además, el color del texto del marcador de posición se puede controlar estableciendo la propiedad PlaceholderColor en un Color:

<Editor Placeholder="Enter text here" PlaceholderColor="Olive" />

var editor = new Editor { Placeholder = "Enter text here", PlaceholderColor = Color.Olive };

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" />

var editor = new 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.

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" />

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

Editor editor = new Editor
{
    Text = "This text will be displayed in uppercase.",
    TextTransform = TextTransform.Uppercase
};

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" />

var editor = new 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 un Editor, indica que no hay ningún límite efectivo en el número de caracteres que se pueden escribir.

espaciado entre caracteres

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

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

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

Editor editor = new 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.

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 en el código de la siguiente manera:

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

var editor = new Editor { Text = "Enter text here", AutoSize = EditorAutoSizeOption.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.

Nota:

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

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.

Esto se puede lograr en XAML de la siguiente manera:

<Editor Keyboard="Chat" />

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

var editor = new Editor { Keyboard = Keyboard.Chat };

Puede encontrar ejemplos de cada teclado en nuestro repositorio Recetas.

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:

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

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" />

var editor = new 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" />

var editor = new 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.

Colores

Editor se puede establecer para usar un color de fondo personalizado a través de la propiedad BackgroundColor. Es necesario tener especial cuidado para asegurarse de que los colores se puedan usar en cada plataforma. Dado que cada plataforma tiene valores predeterminados diferentes para el color de texto, es posible que tenga que establecer un color de fondo personalizado para cada plataforma. Consulte Trabajar con ajustes de plataforma para obtener más información sobre cómo optimizar la interfaz de usuario para cada plataforma.

En C#:

public partial class EditorPage : ContentPage
{
    public EditorPage ()
    {
        InitializeComponent ();
        var layout = new StackLayout { Padding = new Thickness(5,10) };
        this.Content = layout;
        //dark blue on UWP & Android, light blue on iOS
        var editor = new Editor { BackgroundColor = Device.RuntimePlatform == Device.iOS ? Color.FromHex("#A4EAFF") : Color.FromHex("#2c3e50") };
        layout.Children.Add(editor);
    }
}

En XAML:

<?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="TextSample.EditorPage"
    Title="Editor Demo">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
            <Editor>
                <Editor.BackgroundColor>
                    <OnPlatform x:TypeArguments="x:Color">
                        <On Platform="iOS" Value="#a4eaff" />
                        <On Platform="Android, UWP" Value="#2c3e50" />
                    </OnPlatform>
                </Editor.BackgroundColor>
            </Editor>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Asegúrese de que los colores de fondo y de texto que elija se puedan usar en todas las plataformas y no oculten el texto del marcador de posición.

Eventos e interactividad

Editor expone dos eventos:

• TextChanged: se genera cuando cambia el texto en el editor. Proporciona el texto antes y después del cambio.
• Completado: se genera cuando el usuario ha finalizado la entrada presionando la tecla de retorno en el teclado.

Nota:

La clase VisualElement, de la que Entry hereda, también tiene eventos Focused y Unfocused.

Completado

El evento Completed se usa para reaccionar a la finalización de una interacción con un Editor. Completed se genera cuando el usuario termina la entrada con un campo escribiendo la tecla de retorno en el teclado (o presionando la tecla Tab en UWP). El controlador del evento es un controlador de eventos genérico, que toma el remitente y EventArgs:

void EditorCompleted (object sender, EventArgs e)
{
    var text = ((Editor)sender).Text; // sender is cast to an Editor to enable reading the `Text` property of the view.
}

El evento completado se puede suscribir a en código y XAML:

En C#:

public partial class EditorPage : ContentPage
{
    public EditorPage ()
    {
        InitializeComponent ();
        var layout = new StackLayout { Padding = new Thickness(5,10) };
        this.Content = layout;
        var editor = new Editor ();
        editor.Completed += EditorCompleted;
        layout.Children.Add(editor);
    }
}

En XAML:

<?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="TextSample.EditorPage"
Title="Editor Demo">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
            <Editor Completed="EditorCompleted" />
        </StackLayout>
    </ContentPage.Content>
</Contentpage>

TextChanged

El evento TextChanged se usa para reaccionar a un cambio en el contenido de un campo.

TextChanged se genera cada vez que cambia el Text de Editor. El controlador del evento toma una instancia de TextChangedEventArgs. TextChangedEventArgs proporciona acceso a los valores antiguos y nuevos de EditorText mediante las propiedades OldTextValue y NewTextValue :

void EditorTextChanged (object sender, TextChangedEventArgs e)
{
    var oldText = e.OldTextValue;
    var newText = e.NewTextValue;
}

El evento completado se puede suscribir a en código y XAML:

Mediante código:

public partial class EditorPage : ContentPage
{
    public EditorPage ()
    {
        InitializeComponent ();
        var layout = new StackLayout { Padding = new Thickness(5,10) };
        this.Content = layout;
        var editor = new Editor ();
        editor.TextChanged += EditorTextChanged;
        layout.Children.Add(editor);
    }
}

En XAML:

<?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="TextSample.EditorPage"
Title="Editor Demo">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
            <Editor TextChanged="EditorTextChanged" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Vínculos relacionados

• Texto (ejemplo)
• API de los editores