Información general sobre los cuadros de diálogo (WPF .NET)

Artículo
10/13/2023

Windows Presentation Foundation (WPF) proporciona formas de diseñar sus propios cuadros de diálogo. Los cuadros de diálogo son ventanas pero con una intención específica y una experiencia de usuario. En este artículo se describe cómo funciona un cuadro de diálogo y qué tipos de cuadros de diálogo puede crear y usar. Los cuadros de diálogo se usan para:

Mostrar información específica a los usuarios.
Recopilar información de los usuarios.
Mostrar y recopilar información.
Mostrar un símbolo del sistema operativo, como la ventana de impresión.
Seleccionar un archivo o una carpeta.

Estos tipos de ventanas se conocen como cuadros de diálogo. Un cuadro de diálogo se puede mostrar de dos maneras: modal y sin modo.

Mostrar un cuadro de diálogo modal al usuario es una técnica con la que la aplicación interrumpe lo que estaba haciendo hasta que el usuario cierra el cuadro de diálogo. Por lo general, esto se produce en forma de aviso o alerta. No se puede interactuar con otras ventanas de la aplicación hasta que se cierre el cuadro de diálogo. Una vez cerrado el cuadro de diálogo modal, la aplicación continúa. Los cuadros de diálogo más comunes se usan para mostrar un mensaje de archivo abierto o guardar archivo, mostrar el cuadro de diálogo de impresora o enviar mensajes al usuario con algún estado.

Un cuadro de diálogo sin modo no impide que un usuario active otras ventanas mientras está abierto. Por ejemplo, si un usuario desea buscar apariciones de una palabra determinada en un documento, una ventana principal a menudo abrirá un cuadro de diálogo para preguntar a un usuario qué palabra busca. Dado que la aplicación no quiere impedir que el usuario edite el documento, no es necesario que el cuadro de diálogo sea modal. Un cuadro de diálogo sin modo proporciona al menos un botón Cerrar para cerrar el cuadro de diálogo. Se pueden proporcionar otros botones para ejecutar funciones específicas, como un botón Buscar siguiente para buscar la siguiente palabra en una búsqueda de palabras.

Con WPF puede crear varios tipos de cuadros de diálogo, como cuadros de mensaje, cuadros de diálogo comunes y cuadros de diálogo personalizados. En este artículo se describe cada uno de ellos y el Ejemplo de cuadro de diálogo proporciona ejemplos pertinentes.

Cuadros de mensaje

Un cuadro de mensaje es un cuadro de diálogo que puede usarse para mostrar información de texto y para permitir que los usuarios tomen decisiones con los botones. En la ilustración siguiente se muestra un cuadro de mensaje que hace una pregunta y proporciona al usuario tres botones para responder a la pregunta.

Cuadro de diálogo de procesador de textos que pregunta si quiere guardar los cambios en el documento antes de que se cierre la aplicación.

Para crear un cuadro de mensaje, use la clase MessageBox. MessageBox permite configurar el texto, el título, el icono y los botones del cuadro de mensaje.

Para obtener más información, consulte Cómo abrir un cuadro de mensaje.

Cuadros de diálogo comunes

Windows implementa diferentes tipos de cuadros de diálogo reutilizables que son comunes a todas las aplicaciones, incluidos los cuadros de diálogo para seleccionar archivos e imprimir.

Dado que el sistema operativo proporciona estos cuadros de diálogo, se comparten entre todas las aplicaciones que se ejecutan en el sistema operativo. Estos cuadros de diálogo proporcionan una experiencia de usuario coherente y se conocen como cuadros de diálogo comunes. Como un usuario usa un cuadro de diálogo común en una aplicación, no necesita aprender a usar ese cuadro de diálogo en otras aplicaciones.

WPF encapsula los cuadros de diálogo comunes Abrir archivo, Guardar archivo, Abrir carpeta e Imprimir y los expone como clases administradas para su uso.

Cuadro de diálogo Abrir archivo al que se llama desde WPF.

Para más información sobre los cuadros de diálogo comunes, consulte los artículos siguientes:

Cuadros de diálogo personalizados

Aunque los cuadros de diálogo comunes son útiles y deben usarse cuando sea posible, no admiten los requisitos de los cuadros de diálogo específicos del dominio. En estos casos, necesita crear sus propios cuadros de diálogo. Como veremos, un cuadro de diálogo es una ventana con comportamientos especiales. Window implementa esos comportamientos y se usa la ventana para crear cuadros de diálogo personalizados, tanto modales, como sin modo.

Hay muchas consideraciones de diseño que se deben tener en cuenta al crear su propio cuadro de diálogo. Aunque tanto una ventana de aplicación como un cuadro de diálogo contienen similitudes, como compartir la misma clase base, un cuadro de diálogo se usa para un propósito específico. Normalmente se requiere un cuadro de diálogo cuando es necesario solicitar al usuario algún tipo de información o respuesta. Normalmente la aplicación se pausará mientras se muestra el cuadro de diálogo (modal), lo que restringe el acceso al resto de la aplicación. Una vez cerrado el cuadro de diálogo, la aplicación continúa. Sin embargo, la limitación de interacciones al cuadro de diálogo por sí solo no es un requisito.

Cuando se cierra una ventana de WPF, no se puede volver a abrir. Los cuadros de diálogo personalizados son ventanas de WPF y se aplica la misma regla. Para obtener información sobre cómo cerrar una ventana, consulte Cómo cerrar una ventana o un cuadro de diálogo.

Implementar un cuadro de diálogo

Al diseñar un cuadro de diálogo, siga estas sugerencias para crear una buena experiencia de usuario:

❌ NO abarrote la ventana de diálogo. La experiencia del cuadro de diálogo es para que el usuario escriba algunos datos o elija una opción.

✔️ Proporcione un botón Aceptar para cerrar la ventana.

✔️ Establezca la propiedad IsDefault del botón Aceptar en true para permitir que el usuario presione la tecla ENTRAR para aceptar y cerrar la ventana.

✔️ Considere agregar un botón Cancelar para que el usuario pueda cerrar la ventana e indicar que no quiere continuar.

✔️ Establezca la propiedad IsCancel del botón Cancelar en true para permitir que el usuario presione la tecla ESC para cerrar la ventana.

✔️ Establezca el título de la ventana para describir con precisión lo que representa el diálogo o lo que el usuario debe hacer con el diálogo.

✔️ Establezca valores mínimos de ancho y alto para la ventana, lo que impide que el usuario vuelva a ajustar el tamaño de la ventana demasiado pequeño.

✔️ Considere deshabilitar la capacidad de cambiar el tamaño de la ventana si ShowInTaskbar está establecido en false. Puede deshabilitar el ajuste de tamaño estableciendo ResizeMode en NoResize

El siguiente código muestra esta configuración.

<Window x:Class="Dialogs.Margins"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Change Margins"
        Closing="Window_Closing"
        MinHeight="200"
        MinWidth="300"
        SizeToContent="WidthAndHeight"
        ResizeMode="NoResize"
        ShowInTaskbar="False"
        WindowStartupLocation="CenterOwner" 
        FocusManager.FocusedElement="{Binding ElementName=leftMarginTextBox}">
    <Grid Margin="10">
        <Grid.Resources>
            <!-- Default settings for controls -->
            <Style TargetType="{x:Type Label}">
                <Setter Property="Margin" Value="0,3,5,5" />
                <Setter Property="Padding" Value="0,0,0,5" />
            </Style>
            <Style TargetType="{x:Type TextBox}">
                <Setter Property="Margin" Value="0,0,0,5" />
            </Style>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Width" Value="70" />
                <Setter Property="Height" Value="25" />
                <Setter Property="Margin" Value="5,0,0,0" />
            </Style>
        </Grid.Resources>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <!-- Left,Top,Right,Bottom margins-->
        <Label Grid.Column="0" Grid.Row="0">Left Margin:</Label>
        <TextBox Name="leftMarginTextBox" Grid.Column="1" Grid.Row="0" />

        <Label Grid.Column="0" Grid.Row="1">Top Margin:</Label>
        <TextBox Name="topMarginTextBox" Grid.Column="1" Grid.Row="1"/>

        <Label Grid.Column="0" Grid.Row="2">Right Margin:</Label>
        <TextBox Name="rightMarginTextBox" Grid.Column="1" Grid.Row="2" />

        <Label Grid.Column="0" Grid.Row="3">Bottom Margin:</Label>
        <TextBox Name="bottomMarginTextBox" Grid.Column="1" Grid.Row="3" />

        <!-- Accept or Cancel -->
        <StackPanel Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="4" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Name="okButton" Click="okButton_Click" IsDefault="True">OK</Button>
            <Button Name="cancelButton" IsCancel="True">Cancel</Button>
        </StackPanel>
    </Grid >
</Window>

El código XAML anterior crea una ventana similar a la siguiente imagen:

Ventana de cuadro de diálogo para WPF que muestra cuadros de texto de margen izquierdo, superior, derecho e inferior.

Elementos de la interfaz de usuario que abren un cuadro de diálogo

La experiencia del usuario para un cuadro de diálogo también se extiende a la barra de menús o al botón de la ventana que la abre. Cuando un elemento de menú o un botón ejecuta una función que requiere la interacción del usuario a través de un cuadro de diálogo antes de que la función pueda continuar, el control debe usar puntos suspensivos al final de su texto de encabezado:

<MenuItem Header="_Margins..." Click="formatMarginsMenuItem_Click" />
<!-- or -->
<Button Content="_Margins..." Click="formatMarginsButton_Click" />

Cuando un elemento de menú o un botón ejecuta una función que muestra un cuadro de diálogo que no requiere la interacción del usuario, como un cuadro de diálogo Acerca de, no se requieren puntos suspensivos.

Los elementos de menú son una manera común de proporcionar a los usuarios acciones de aplicación que se agrupan en temas relacionados. Probablemente haya visto el menú Archivo en muchas aplicaciones diferentes. En una aplicación típica, el elemento de menú Archivo proporciona maneras de guardar un archivo, cargarlo e imprimirlo. Si la acción va a mostrar una ventana modal, el encabezado normalmente incluye puntos suspensivos, como se muestra en la siguiente imagen:

Dos de los elementos de menú tienen puntos suspensivos: .... Esto ayuda al usuario a identificar que, al seleccionar esos elementos de menú, se mostrará una ventana modal que pausará la aplicación hasta que el usuario la cierre.

Esta técnica de diseño es una manera fácil de comunicar a los usuarios lo que deberían esperar.

Botones

Puede seguir el mismo principio descrito en la sección Elementos de menú. Use puntos suspensivos en el texto del botón para indicar que, cuando el usuario presione el botón, aparecerá un cuadro de diálogo modal. En la imagen siguiente hay dos botones y es fácil entender qué botón muestra un cuadro de diálogo:

Ventana de WPF que muestra botones con puntos suspensivos para indicar qué elemento muestra un cuadro de diálogo.

Devolución de un resultado

Abrir otra ventana, especialmente un cuadro de diálogo modal, es una excelente manera de devolver el estado y la información al código de llamada.

Cuando se muestra un cuadro de diálogo mediante una llamada a ShowDialog(), el código que abre el cuadro de diálogo espera hasta que el método ShowDialog vuelve. Cuando el método devuelve un resultado, el código que lo ha llamado debe decidir si desea continuar procesando o detener el procesamiento. Por lo general, el usuario lo indica presionando un botón Aceptar o Cancelar en el cuadro de diálogo.

Cuando se presiona el botón Aceptar, ShowDialog debería estar diseñado para devolver true y el botón Cancelar, para devolver false. Esto se consigue estableciendo la propiedad DialogResult cuando se presiona el botón.

private void okButton_Click(object sender, RoutedEventArgs e) =>
    DialogResult = true;

private void cancelButton_Click(object sender, RoutedEventArgs e) =>
    DialogResult = false;

Private Sub okButton_Click(sender As Object, e As RoutedEventArgs)
    DialogResult = True
End Sub

Private Sub cancelButton_Click(sender As Object, e As RoutedEventArgs)
    DialogResult = False
End Sub

La propiedad DialogResult solo se puede establecer si el cuadro de diálogo se ha mostrado con ShowDialog(). Cuando se establece la propiedad DialogResult, se cierra el cuadro de diálogo.

Si la propiedad IsCancel de un botón está establecida en true y la ventana se abre con ShowDialog(), la tecla ESC cerrará la ventana y establecerá DialogResult en false.

Para obtener más información sobre los cuadros de diálogo de cierre, consulte Cómo cerrar una ventana o un cuadro de diálogo.

Procesamiento de la respuesta

El ShowDialog() devuelve un valor booleano para indicar si el usuario ha aceptado o cancelado el cuadro de diálogo. Si está alertando al usuario de algo, pero no requiere que tome una decisión o proporcione datos, puede omitir la respuesta. La respuesta también se puede inspeccionar comprobando la propiedad DialogResult. El código siguiente muestra cómo procesar la respuesta:

var dialog = new Margins();

// Display the dialog box and read the response
bool? result = dialog.ShowDialog();

if (result == true)
{
    // User accepted the dialog box
    MessageBox.Show("Your request will be processed.");
}
else
{
    // User cancelled the dialog box
    MessageBox.Show("Sorry it didn't work out, we'll try again later.");
}

Dim marginsWindow As New Margins

Dim result As Boolean? = marginsWindow.ShowDialog()

If result = True Then
    ' User accepted the dialog box
    MessageBox.Show("Your request will be processed.")
Else
    ' User cancelled the dialog box
    MessageBox.Show("Sorry it didn't work out, we'll try again later.")
End If

marginsWindow.Show()

Cuadro de diálogo sin modo

Para mostrar un cuadro de diálogo sin modo, llame a Show(). El cuadro de diálogo debería proporcionar al menos un botón Cerrar. Se pueden proporcionar otros botones y elementos interactivos para ejecutar una función específica, como un botón Buscar siguiente para buscar la siguiente palabra en una búsqueda de palabras.

Dado que un cuadro de diálogo sin modo no bloquea la continuación del código de llamada, debe proporcionar una manera diferente de devolver un resultado. Puede realizar una de las operaciones siguientes:

Exponer una propiedad de objeto de datos en la ventana.
Controlar el evento Window.Closed en el código de llamada.
Crear eventos en la ventana que se genera cuando el usuario selecciona un objeto o presiona un botón específico.

En el ejemplo siguiente se usa el evento Window.Closed para mostrar un cuadro de mensaje al usuario cuando se cierra el cuadro de diálogo. El mensaje mostrado hace referencia a una propiedad del cuadro de diálogo cerrado. Para obtener más información sobre cómo cerrar cuadros de diálogo, consulte Cómo cerrar una ventana o un cuadro de diálogo.

var marginsWindow = new Margins();

marginsWindow.Closed += (sender, eventArgs) =>
{
    MessageBox.Show($"You closed the margins window! It had the title of {marginsWindow.Title}");
};

marginsWindow.Show();

Dim marginsWindow As New Margins

AddHandler marginsWindow.Closed, Sub(sender As Object, e As EventArgs)
                                     MessageBox.Show($"You closed the margins window! It had the title of {marginsWindow.Title}")
                                 End Sub

marginsWindow.Show()

Información general sobre los cuadros de diálogo (WPF .NET)

Cuadros de mensaje

Cuadros de diálogo comunes

Cuadros de diálogo personalizados

Implementar un cuadro de diálogo

Elementos de la interfaz de usuario que abren un cuadro de diálogo

Elementos de menú

Botones

Devolución de un resultado

Procesamiento de la respuesta

Cuadro de diálogo sin modo

Vea también

Comentarios

Recursos adicionales

Información general sobre los cuadros de diálogo (WPF .NET)

Cuadros de mensaje

Cuadros de diálogo comunes

Cuadros de diálogo personalizados

Implementar un cuadro de diálogo

Elementos de la interfaz de usuario que abren un cuadro de diálogo

Elementos de menú

Botones

Devolución de un resultado

Diálogos modales

Procesamiento de la respuesta

Cuadro de diálogo sin modo

Vea también

Comentarios

Recursos adicionales