Xamarin.Forms Editor

  • Artículo
  • 10 minutos para leer

Ejemplo de descarga Descarga del ejemplo

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

Establecer y leer texto

, al igual que otras vistas Editor que presentan texto, expone la propiedad Text . Esta propiedad se puede usar para establecer y leer el texto presentado por Editor . En el ejemplo siguiente se muestra cómo establecer Text la propiedad 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 Text la propiedad en C#:

var text = editor.Text;

Establecer texto de marcador de posición

se Editor puede establecer para mostrar el texto del marcador de posición cuando no almacena la entrada del usuario. Esto se logra estableciendo la propiedad Xamarin_Forms _InputView_Placeholder" data-linktype="absolute-path">en Placeholderstring un Editor y, a menudo, se usa para indicar el tipo de contenido adecuado para . Además, el color del texto del marcador de posición se puede controlar estableciendo la propiedad Xamarin_Forms _InputView_PlaceholderColor" data-linktype="absolute-path">PlaceholderColor en 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 un estableciendo la propiedad , que tiene un Editor valor predeterminado de , en IsReadOnlyfalsetrue :

<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 no modifica la apariencia visual de , a diferencia de la propiedad que también cambia la apariencia IsReadonlyEditor visual de a IsEnabledEditor gris.

Transformar texto

puede transformar el uso de mayúsculas y minúsculas de su texto, almacenado en la propiedad , estableciendo Editor la propiedad en un valor de la TextTextTransformTextTransform enumeración . 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. Este es el valor predeterminado de la propiedad TextTransform.
  • Lowercase indica que el texto se transformará a minúsculas.
  • Uppercase indica que el texto se transformará en mayúsculas.

En el ejemplo siguiente se muestra la transformación de texto a 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
};

Limitar la longitud de entrada

La Xamarin_Forms _InputView_MaxLength" data-linktype="absolute-path">se puede MaxLength usar para limitar la longitud de entrada permitida para Editor . Esta propiedad debe establecerse en un entero positivo:

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

var editor = new Editor { ... MaxLength = 10 };

Un valor de propiedad Xamarin_Forms _InputView_MaxLength" data-linktype="absolute-path">de 0 indica que no se permitirá ninguna entrada y un valor de , que es el valor predeterminado para , indica que no hay ningún límite efectivo en el número de caracteres que se MaxLengthint.MaxValueEditor pueden escribir.

espaciado entre caracteres

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

<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 están separados EditorCharacterSpacing por unidades independientes del dispositivo.

Nota:

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

Ajuste automático del tamaño de un editor

Se puede realizar una para ajustar el tamaño automático a su contenido estableciendo la propiedad EditorEditor data-linktype="absolute-path">Xamarin_Forms de Xamarin_Forms Editor.AutoSize _EditorAutoSizeOption_TextChanges _Editor_AutoSize" data-linktype="absolute-path">TextChanges , EditorAutoSizeOption que es un valor de la enumeración . Esta enumeración tiene dos valores:

Esto se puede lograr en el código como se muestra a continuación:

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

var editor = new Editor { Text = "Enter text here", AutoSize = EditorAutoSizeOption.TextChanges };

Cuando el tamaño automático está habilitado, el alto de aumentará cuando el usuario lo rellene con texto y el alto disminuirá a medida que el usuario Editor elimine texto.

Nota:

No tendrá el tamaño automático si se ha Xamarin_Forms EditorEditor _VisualElement_HeightRequest" data-linktype="absolute-path">HeightRequest propiedad .

Personalización del teclado

El teclado que se presenta cuando los usuarios interactúan con un se puede establecer mediante programación a través de la propiedad EditorEditor data-linktype="absolute-path">de Xamarin_Forms _InputView_Keyboard" en Keyboard una de las siguientes propiedades de la Keyboard clase :

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 Recipes.

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:

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);

Habilitación y deshabilitación de la revisión ortográfica

La Xamarin_Forms _InputView_IsSpellCheckEnabled" data-linktype="absolute-path">propiedad controla si la revisión ortográfica IsSpellCheckEnabled está habilitada. De forma predeterminada, la propiedad se establece en true . A medida que el usuario escribe texto, se indican errores ortográficos.

Sin embargo, para algunos escenarios de entrada de texto, como escribir un nombre de usuario, la revisión ortográfica proporciona una experiencia negativa, por lo que debe deshabilitarse estableciendo la propiedad data-linktype="absolute-path">de Xamarin_Forms _InputView_IsSpellCheckEnabled" en IsSpellCheckEnabledfalse :

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

var editor = new Editor { ... IsSpellCheckEnabled = false };

Nota:

Cuando la propiedad Xamarin_Forms _InputView_IsSpellCheckEnabled" data-linktype="absolute-path">se establece en y no se usa un teclado personalizado, se deshabilitará el corrector ortólogo IsSpellCheckEnabledfalse nativo. Sin embargo, si se ha establecido un valor que deshabilita la revisión ortográfica, como Keyboard Xamarin_Forms Keyboard _Keyboard_Chat" data-linktype="absolute-path">, la propiedad se Keyboard.ChatIsSpellCheckEnabled omite. Por lo tanto, la propiedad no se puede usar para habilitar la revisión ortográfica de un que Keyboard la deshabilita explícitamente.

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

La IsTextPredictionEnabled propiedad 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 las predicciones de palabras.

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

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

var editor = new Editor { ... IsTextPredictionEnabled = false };

Nota:

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

Colores

Editor se puede establecer para usar un color de fondo personalizado a través de la BackgroundColor propiedad . 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, puede que tenga que establecer un color de fondo personalizado para cada plataforma. Consulte Working with Platform Tweaks (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>

Editor con ejemplo backgroundColor

Asegúrese de que los colores de fondo y texto que elija se puedan usar en cada plataforma y no oculte ningún texto de 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 VisualElement clase , de la que Entry hereda, también tiene eventos Focused y Unfocused .

Completado

El Completed evento se usa para reaccionar a la finalización de una interacción con Editor . Completed se genera cuando el usuario termina la entrada con un campo al escribir 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 TextChanged evento se usa para reaccionar a un cambio en el contenido de un campo.

TextChanged se genera cada vez que Text cambia el de Editor . El controlador del evento toma una instancia de TextChangedEventArgs . TextChangedEventArgsproporciona acceso a los valores antiguos y nuevos de a EditorText través de 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:

En el 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>