Idioma: HTML | XAML

Inicio rápido: agregar controles de entrada de texto y de edición (XAML)

Applies to Windows and Windows Phone

El marco XAML incluye diversos controles para escribir y editar texto, así como un conjunto de propiedades para aplicar formato al texto. Los controles de entrada de texto son TextBox, PasswordBox y RichEditBox. En este inicio rápido se muestra cómo usar estos controles de texto para mostrar, escribir y editar texto.

Guía básica: Relación de este tema con los demás. Consulta:

Requisitos previos

Damos por hecho que sabes crear una aplicación básica de Windows en tiempo de ejecución con C++, C# o Visual Basic. Para obtener instrucciones sobre cómo agregar un control, consulta Inicio rápido: Agregar controles y administrar eventos.

Elegir un control de texto

El marco XAML incluye tres controles principales de entrada de texto: TextBox, PasswordBox y RichEditBox. El control de texto que uses dependerá del escenario. Estos son algunos ejemplos de escenarios y el control que se recomienda.

SituaciónControl recomendado

Escribir o editar texto sin formato, como en un formulario.

TextBox

Escribir una contraseña.

PasswordBox

Editar un documento, artículo o blog que necesita formato, párrafos, hipervínculos o imágenes incorporadas.

RichEditBox

 

TextBox

Puedes usar el control TextBox para escribir y editar texto sin formato. Puedes usar la propiedad Text para obtener el texto y establecerlo en un TextBox. Este es el XAML para un TextBox sencillo con su propiedad Text establecida.


<TextBox  Height="35" Width="200" Text="Hello World!" Margin="20"/>

Este es el TextBox que se obtiene de este XAML.

Un cuadro de texto sencillo.

Puedes hacer que TextBox sea de solo lectura si estableces la propiedad IsReadOnly en true. Para hacer que el texto se ajuste en varias líneas en TextBox, establece la propiedad TextWrapping en Wrap y la propiedad AcceptsReturn en true.

Puedes obtener o establecer el texto seleccionado en un TextBox mediante la propiedad SelectedText. Usa el evento SelectionChanged para hacer algo cuando el usuario seleccione el texto o anule la selección.

Este es un ejemplo del uso de estas propiedades y métodos. Cuando selecciones texto en el primer TextBox, el texto seleccionado se mostrará en el segundo TextBox, que es de solo lectura. Los valores de las propiedades SelectionLength y SelectionStart se muestran en dos TextBlock. Esto se consigue mediante el evento SelectionChanged.


<TextBox x:Name="textBox1" Height="75" Width="300" Margin="10"
         Text="The text that is selected in this TextBox will show up in the read only TextBox below." 
         TextWrapping="Wrap" AcceptsReturn="True"
         SelectionChanged="TextBox1_SelectionChanged" />
<TextBox x:Name="textBox2" Height="75" Width="300" Margin="5" 
         TextWrapping="Wrap" AcceptsReturn="True" IsReadOnly="True"/>
<TextBlock x:Name="label1" HorizontalAlignment="Center"/>
<TextBlock x:Name="label2" HorizontalAlignment="Center"/>



// C#
private void TextBox1_SelectionChanged(object sender, RoutedEventArgs e)
{
    textBox2.Text = textBox1.SelectedText;
    label1.Text = "Selection length is " + textBox1.SelectionLength.ToString();
    label2.Text = "Selection starts at " + textBox1.SelectionStart.ToString();
}

Este es el resultado del código.

Texto seleccionado en un cuadro de texto.

PasswordBox

Puedes escribir una sola línea de contenido sin ajustar en un control PasswordBox. El usuario no puede ver el texto escrito, solo los caracteres de contraseña que representan el texto que se visualiza. Para especificar los caracteres de contraseña, usa la propiedad PasswordChar y especifica el número máximo de caracteres que el usuario puede escribir mediante la propiedad MaxLength.

Con la propiedad Password, puedes obtener el texto que el usuario escribió, normalmente en el controlador para el evento PasswordChanged.

Este es el XAML para un control de cuadro de contraseña que muestra el aspecto predeterminado de PasswordBox. Cuando el usuario escribe una contraseña, se comprueba si es el valor literal, "Password" (Contraseña). Si lo es, mostramos un mensaje al usuario.


<PasswordBox x:Name="pwBox" Height="35" Width="200"
             MaxLength="8" PasswordChanged="pwBox_PasswordChanged"/>
           
<TextBlock x:Name="statusText" Margin="10" HorizontalAlignment="Center" />


// C#
private void pwBox_PasswordChanged(object sender, RoutedEventArgs e)
{
    if (pwBox.Password == "Password")
    {
        statusText.Text = "'Password' is not allowed as a password.";
    }
}

Esto es lo que se obtiene cuando se ejecuta este código y el usuario escribe "Password" (Contraseña).

Un cuadro de contraseña.

En las aplicaciones de la Tienda Windows, PasswordBox tiene un botón integrado que el usuario puede tocar o en el que puede hacer clic para mostrar el texto de la contraseña. Esto es lo que se obtiene con la acción del usuario. Cuando el usuario lo suelta, la contraseña vuelve a ocultarse automáticamente.

Un cuadro de contraseña que muestra la contraseña.

En las aplicaciones de la Tienda Windows, PasswordBox tiene una casilla integrada que el usuario puede activar para mostrar el texto de la contraseña.

Un cuadro de contraseña de Windows Phone.

RichEditBox

Puedes usar un control RichEditBox para escribir y editar documentos de texto enriquecido que contengan texto con formato, hipervínculos e imágenes. Puedes hacer que RichEditBox sea de solo lectura si estableces la propiedad IsReadOnly en true.

De manera predeterminada, RichEditBox admite la revisión ortográfica. Para deshabilitar el corrector ortográfico, establece la propiedad IsSpellCheckEnabled en false. Si quieres obtener más información, consulta Directrices y lista de comprobación para revisión ortográfica.

Usa la propiedad Document de RichEditBox para obtener su contenido. El contenido de RichEditBox es un objeto Windows.UI.Text.ITextDocument, a diferencia del control RichTextBlock, que usa objetos Windows.UI.Xaml.Documents.Block como contenido. La interfaz ITextDocument proporciona una forma de cargar y guardar el documento en una secuencia, recuperar intervalos de texto, obtener la selección activa, deshacer y rehacer cambios, establecer atributos predeterminados de formato, etcétera.

Este ejemplo muestra cómo cargar y guardar un archivo de formato de texto enriquecido (rtf) en un RichEditBox.


<Grid Margin="120">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal">
        <Button Content="Open file" Click="OpenButton_Click"/>
        <Button Content="Save file" Click="SaveButton_Click"/>
    </StackPanel>
            
    <RichEditBox x:Name="editor" Grid.Row="1"/>
</Grid>


private async void OpenButton_Click(object sender, RoutedEventArgs e)
{
    // Open a text file.
    Windows.Storage.Pickers.FileOpenPicker open =
        new Windows.Storage.Pickers.FileOpenPicker();
    open.SuggestedStartLocation =
        Windows.Storage.Pickers.PickerLocationId.DocumentsLibrary;
    open.FileTypeFilter.Add(".rtf");

    Windows.Storage.StorageFile file = await open.PickSingleFileAsync();

    if (file != null)
    {
        Windows.Storage.Streams.IRandomAccessStream randAccStream =
            await file.OpenAsync(Windows.Storage.FileAccessMode.Read);

        // Load the file into the Document property of the RichEditBox.
        editor.Document.LoadFromStream(Windows.UI.Text.TextSetOptions.FormatRtf, randAccStream);
    }
}

private async void SaveButton_Click(object sender, RoutedEventArgs e)
{
    if (((ApplicationView.Value != ApplicationViewState.Snapped) ||
          ApplicationView.TryUnsnap()))
    {
        FileSavePicker savePicker = new FileSavePicker();
        savePicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
        
        // Dropdown of file types the user can save the file as
        savePicker.FileTypeChoices.Add("Rich Text", new List<string>() { ".rtf" });
        
        // Default file name if the user does not type one in or select a file to replace
        savePicker.SuggestedFileName = "New Document";

        StorageFile file = await savePicker.PickSaveFileAsync();
        if (file != null)
        {
            // Prevent updates to the remote version of the file until we 
            // finish making changes and call CompleteUpdatesAsync.
            CachedFileManager.DeferUpdates(file);
            // write to file
            Windows.Storage.Streams.IRandomAccessStream randAccStream =
                await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite);

            editor.Document.SaveToStream(Windows.UI.Text.TextGetOptions.FormatRtf, randAccStream);

            // Let Windows know that we're finished changing the file so the 
            // other app can update the remote version of the file.
            FileUpdateStatus status = await CachedFileManager.CompleteUpdatesAsync(file);
            if (status != FileUpdateStatus.Complete)
            {
                Windows.UI.Popups.MessageDialog errorBox =
                    new Windows.UI.Popups.MessageDialog("File " + file.Name + " couldn't be saved.");
                await errorBox.ShowAsync();
            }
        }
    }
}

Usar el teclado táctil

El teclado táctil se puede usar para escribir texto cuando la aplicación se ejecuta en un dispositivo con pantalla táctil. Se invoca al teclado táctil cuando el usuario pulsa en un campo de entrada editable, como TextBox o PasswordBox, y se descarta cuando el campo de entrada pierde el foco. El teclado táctil usa la información de accesibilidad para determinar si se invoca o se descarta. Los controles de texto que se proporcionan en el marco XAML tienen integradas las propiedades de automatización. Si creas tus propios controles de texto personalizados, debes implementar TextPattern para que use el teclado táctil.

Resumen y pasos siguientes

Has aprendido a crear controles TextBox, PasswordBox y RichEditBox para mostrar y editar texto en tu aplicación.

Para ver más ejemplos de código que muestren estos controles, consulta el ejemplo de edición de texto en XAML.

Temas relacionados

Directrices y lista de comprobación para entrada de texto
Directrices y lista de comprobación para revisión ortográfica
Guía básica para crear aplicaciones de Windows en tiempo de ejecución con C# o Visual Basic
Guía básica para crear aplicaciones de Windows en tiempo de ejecución con C++

 

 

Mostrar:
© 2014 Microsoft