Xamarin.Forms Entrada

  • Artículo
  • Tiempo de lectura: 11 minutos

Download Sample Descargar el ejemplo

Xamarin.FormsEntry se usa para la entrada de texto de una sola línea. , Entrycomo la Editor vista, admite varios tipos de teclado. Además, Entry se puede usar como campo de contraseña.

Establecer y leer texto

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

<Entry x:Name="entry" Text="I am an Entry" />

En C#:

var entry = new Entry { Text = "I am an Entry" };

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

var text = entry.Text;

Establecer texto de marcador de posición

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

<Entry Placeholder="Username" PlaceholderColor="Olive" />

var entry = new Entry { Placeholder = "Username", PlaceholderColor = Color.Olive };

Nota

El ancho de un Entry se puede definir estableciendo su WidthRequest propiedad . No dependa del ancho de un Entry objeto que se defina en función del valor de su Text propiedad.

Impedir la entrada de texto

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

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

var entry = new Entry { Text = "This is a read-only Entry", IsReadOnly = true });

Nota

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

Transformar texto

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

  • None indica que el texto no se transformará.
  • Default indica que se usará el comportamiento predeterminado de la plataforma. Este es el 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:

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

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

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

Limitar la longitud de entrada

La MaxLength propiedad se puede usar para limitar la longitud de entrada permitida para .Entry Esta propiedad debe establecerse en un entero positivo:

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

var entry = new Entry { ... MaxLength = 10 };

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

espaciado entre caracteres

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

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

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

Entry entry = new Entry { CharacterSpacing = 10 };

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

Nota

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

Campos de contraseña

Entry proporciona la IsPassword propiedad . Cuando IsPassword es true, el contenido del campo se mostrará como círculos negros:

En XAML:

<Entry IsPassword="true" />

En C#:

var MyEntry = new Entry { IsPassword = true };

Entry IsPassword Example

Los marcadores de posición se pueden usar con instancias de que están configuradas como campos de Entry contraseña:

En XAML:

<Entry IsPassword="true" Placeholder="Password" />

En C#:

var MyEntry = new Entry { IsPassword = true, Placeholder = "Password" };

Entry IsPassword and Placeholder Example

Establecer la posición del cursor y la longitud de la selección de texto

La CursorPosition propiedad se puede usar para devolver o establecer la posición en la que se insertará el siguiente carácter en la cadena almacenada en la Text propiedad :

<Entry Text="Cursor position set" CursorPosition="5" />

var entry = new Entry { Text = "Cursor position set", CursorPosition = 5 };

El valor predeterminado de la CursorPosition propiedad es 0, lo que indica que el texto se insertará al principio de .Entry

Además, la SelectionLength propiedad se puede usar para devolver o establecer la longitud de la selección de texto dentro Entryde :

<Entry Text="Cursor position and selection length set" CursorPosition="2" SelectionLength="10" />

var entry = new Entry { Text = "Cursor position and selection length set", CursorPosition = 2, SelectionLength = 10 };

El valor predeterminado de la SelectionLength propiedad es 0, lo que indica que no hay texto seleccionado.

Mostrar un botón borrar

La ClearButtonVisibility propiedad se puede usar para controlar si muestra Entry un botón borrar, lo que permite al usuario borrar el texto. Esta propiedad se debe establecer en un miembro de enumeración ClearButtonVisibility:

  • Never indica que nunca se mostrará un botón borrar. Este es el valor predeterminado de la propiedad Entry.ClearButtonVisibility.
  • WhileEditing indica que se mostrará un botón claro en Entry, mientras que tiene el foco y el texto.

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

<Entry Text="Xamarin.Forms"
       ClearButtonVisibility="WhileEditing" />

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

var entry = new Entry { Text = "Xamarin.Forms", ClearButtonVisibility = ClearButtonVisibility.WhileEditing };

Las capturas de pantalla siguientes muestran un Entry con el botón borrar habilitado:

Screenshot of an Entry with a clear button, on iOS and Android

Personalización del teclado

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

  • 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 escribir direcciones web de rutas & de acceso de archivo.

Esto se puede lograr en XAML de la siguiente manera:

<Entry Keyboard="Chat" />

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

var entry = new Entry { Keyboard = Keyboard.Chat };

Puede encontrar ejemplos de cada teclado en nuestro repositorio De 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:

<Entry Placeholder="Enter text here">
    <Entry.Keyboard>
        <Keyboard x:FactoryMethod="Create">
            <x:Arguments>
                <KeyboardFlags>Suggestions,CapitalizeCharacter</KeyboardFlags>
            </x:Arguments>
        </Keyboard>
    </Entry.Keyboard>
</Entry>

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

var entry = new Entry { Placeholder = "Enter text here" };
entry.Keyboard = Keyboard.Create(KeyboardFlags.Suggestions | KeyboardFlags.CapitalizeCharacter);

Personalización de la clave de retorno

La apariencia de la tecla de retorno en el teclado suave, que se muestra cuando un Entry elemento tiene el foco, se puede personalizar estableciendo la ReturnType propiedad en un valor de la ReturnType enumeración:

  • Default : indica que no se requiere ninguna clave de retorno específica y que se usará el valor predeterminado de la plataforma.
  • Done : indica una clave de retorno "Listo".
  • Go : indica una clave de retorno "Go".
  • Next : indica una clave de retorno "Siguiente".
  • Search : indica una clave de retorno "Buscar".
  • Send : indica una clave de retorno "Enviar".

En el ejemplo XAML siguiente se muestra cómo establecer la clave de retorno:

<Entry ReturnType="Send" />

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

var entry = new Entry { ReturnType = ReturnType.Send };

Nota

La apariencia exacta de la clave de retorno depende de la plataforma. En iOS, la clave de retorno es un botón basado en texto. Sin embargo, en las plataformas Android y Universal Windows, la clave de retorno es un botón basado en iconos.

Cuando se presiona la tecla de retorno, se desencadena el Completed evento y se ejecuta cualquier ICommand especificado por la ReturnCommand propiedad . Además, cualquier object especificado por la ReturnCommandParameter propiedad se pasará a ICommand como un parámetro . Para obtener más información sobre los comandos, consulte The Command Interface (La interfaz de comandos).

Habilitar y deshabilitar la revisión ortográfica

La IsSpellCheckEnabled propiedad controla si la revisión ortográfica está habilitada. De forma predeterminada, la propiedad se establece trueen . 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 y debe deshabilitarse estableciendo la IsSpellCheckEnabled propiedad falseen :

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

var entry = new Entry { ... IsSpellCheckEnabled = false };

Nota

Cuando la IsSpellCheckEnabled propiedad se establece falseen y no se usa un teclado personalizado, se deshabilitará el corrector ortográfico nativo. Sin embargo, si se ha establecido un Keyboard objeto que deshabilita la revisión ortográfica, como Keyboard.Chat, se omite la IsSpellCheckEnabled propiedad . Por lo tanto, la propiedad no se puede usar para habilitar la revisión ortográfica de un Keyboard objeto que lo 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 trueen . 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 proporciona una experiencia negativa y debe deshabilitarse estableciendo la IsTextPredictionEnabled propiedad falseen :

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

var entry = new Entry { ... IsTextPredictionEnabled = false };

Nota

Cuando la IsTextPredictionEnabled propiedad se establece falseen 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 objeto que deshabilita la predicción de texto, se omite la IsTextPredictionEnabled 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

La entrada se puede establecer para usar un fondo personalizado y colores de texto a través de las siguientes propiedades enlazables:

  • TextColor : establece el color del texto.
  • BackgroundColor : establece el color que se muestra detrás del texto.

Es necesario tener especial cuidado para garantizar que los colores se puedan usar en cada plataforma. Dado que cada plataforma tiene valores predeterminados diferentes para los colores de texto y fondo, a menudo tendrá que establecer ambos si establece uno.

Use el código siguiente para establecer el color de texto de una entrada:

En XAML:

<Entry TextColor="Green" />

En C#:

var entry = new Entry();
entry.TextColor = Color.Green;

Entry TextColor Example

Tenga en cuenta que el marcador de posición no se ve afectado por el especificado TextColor.

Para establecer el color de fondo en XAML:

<Entry BackgroundColor="#2c3e50" />

En C#:

var entry = new Entry();
entry.BackgroundColor = Color.FromHex("#2c3e50");

Entry BackgroundColor Example

Tenga cuidado de asegurarse de que los colores de fondo y texto que elija sean utilizables en cada plataforma y no oscurezca ningún texto de marcador de posición.

Eventos e interactividad

La entrada expone dos eventos:

  • TextChanged : se genera cuando cambia el texto en la entrada. Proporciona el texto antes y después del cambio.
  • Completed : 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 Focused eventos y Unfocused .

Completado

El Completed evento se usa para reaccionar a la finalización de una interacción con una entrada. Completed se genera cuando el usuario finaliza la entrada con un campo presionando 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, tomando el remitente y EventArgs:

void Entry_Completed (object sender, EventArgs e)
{
    var text = ((Entry)sender).Text; //cast sender to access the properties of the Entry
}

El evento completado se puede suscribir a en XAML:

<Entry Completed="Entry_Completed" />

y C#:

var entry = new Entry ();
entry.Completed += Entry_Completed;

Después de que se active el Completed evento, se ejecuta cualquier ICommand especificado por la ReturnCommand propiedad , con el object especificado por la ReturnCommandParameter propiedad que se pasa a ICommand.

TextChanged

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

TextChanged se genera cada vez que cambia el TextEntry de . El controlador del evento toma una instancia de TextChangedEventArgs. TextChangedEventArgs proporciona acceso a los valores antiguos y nuevos de a través de EntryText las OldTextValue propiedades y NewTextValue :

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

El TextChanged evento se puede suscribir a en XAML:

<Entry TextChanged="Entry_TextChanged" />

y C#:

var entry = new Entry ();
entry.TextChanged += Entry_TextChanged;