Compartilhar via


Visão geral das caixas de diálogo

O Windows Presentation Foundation (WPF) fornece maneiras de criar suas próprias caixas de diálogo. As caixas de diálogo são janelas, mas com uma intenção específica e experiência do usuário. Este artigo discute como funciona uma caixa de diálogo e quais tipos de caixas de diálogo você pode criar e usar. As caixas de diálogo são usadas para:

  • Exibir informações específicas aos usuários.
  • Coletar informações de usuários.
  • Exibir e coletar informações.
  • Exiba um prompt do sistema operacional, como a janela de impressão.
  • Selecione um arquivo ou pasta.

Esses tipos de janelas são conhecidos como caixas de diálogo. Uma caixa de diálogo pode ser exibida de duas maneiras: modal e modeless.

Exibir uma caixa de diálogo modal para o usuário é uma técnica com a qual o aplicativo interrompe o que estava fazendo até que o usuário feche a caixa de diálogo. Isso geralmente vem na forma de um prompt ou alerta. Outras janelas no aplicativo não podem ser interagidas até que a caixa de diálogo seja fechada. Depois que a caixa de diálogo modal for fechada, o aplicativo continuará. As caixas de diálogo mais comuns são usadas para mostrar um arquivo aberto ou salvar o prompt de arquivo, exibir a caixa de diálogo da impressora ou enviar mensagens ao usuário com algum status.

Uma caixa de diálogo modeless não impede que um usuário ative outras janelas enquanto ela está aberta. Por exemplo, se um usuário quiser encontrar ocorrências de uma palavra específica em um documento, uma janela principal geralmente abrirá uma caixa de diálogo para perguntar a um usuário qual palavra ele está procurando. Como o aplicativo não deseja impedir que o usuário edite o documento, a caixa de diálogo não precisa ser modal. Uma caixa de diálogo modeless pelo menos fornece um botão Fechar para fechar a caixa de diálogo. Outros botões podem ser fornecidos para executar funções específicas, como um botão Localizar Próximo para localizar a próxima palavra em uma pesquisa de palavras.

Com o WPF, você pode criar vários tipos de caixas de diálogo, como caixas de mensagem, caixas de diálogo comuns e caixas de diálogo personalizadas. Este artigo discute cada um e o Exemplo da Caixa de Diálogo fornece exemplos correspondentes.

Caixas de mensagem

Uma caixa de mensagem é uma caixa de diálogo que pode ser usada para exibir informações textuais e permitir que os usuários tome decisões com botões. A figura a seguir mostra uma caixa de mensagem que faz uma pergunta e fornece ao usuário três botões para responder à pergunta.

Caixa de diálogo processador do Word perguntando se você deseja salvar as alterações no documento antes que o aplicativo seja fechado.

Para criar uma caixa de mensagem, use a classe MessageBox. MessageBox permite configurar o texto, o título, o ícone e os botões da caixa de mensagem.

Para obter mais informações, consulte Como abrir uma caixa de mensagem.

Caixas de diálogo comuns

O Windows implementa diferentes tipos de caixas de diálogo reutilizáveis que são comuns a todos os aplicativos, incluindo caixas de diálogo para selecionar arquivos e impressão.

Como essas caixas de diálogo são fornecidas pelo sistema operacional, elas são compartilhadas entre todos os aplicativos executados no sistema operacional. Essas caixas de diálogo fornecem uma experiência consistente do usuário e são conhecidas como caixas de diálogo comuns. Como um usuário usa uma caixa de diálogo comum em um aplicativo, ele não precisa aprender a usar essa caixa de diálogo em outros aplicativos.

O WPF encapsula o arquivo aberto, salva o arquivo, abre a pasta e imprime caixas de diálogo comuns e as expõe como classes gerenciadas para uso.

Uma caixa de diálogo

Para saber mais sobre caixas de diálogo comuns, consulte os seguintes artigos:

Caixas de diálogo personalizadas

Embora as caixas de diálogo comuns sejam úteis e sejam usadas quando possível, elas não dão suporte aos requisitos das caixas de diálogo específicas do domínio. Nesses casos, você precisa criar suas próprias caixas de diálogo. Como veremos, uma caixa de diálogo é uma janela com comportamentos especiais. Window implementa esses comportamentos e você usa a janela para criar caixas de diálogo modais e modeless personalizadas.

Há muitas considerações de design a serem consideradas ao criar sua própria caixa de diálogo. Embora uma janela de aplicativo e uma caixa de diálogo contenham semelhanças, como compartilhar a mesma classe base, uma caixa de diálogo é usada para uma finalidade específica. Normalmente, uma caixa de diálogo é necessária quando você precisa solicitar a um usuário algum tipo de informação ou resposta. Normalmente, o aplicativo pausará enquanto a caixa de diálogo (modal) é exibida, restringindo o acesso ao restante do aplicativo. Depois que a caixa de diálogo for fechada, o aplicativo continuará. Limitar interações apenas à caixa de diálogo, no entanto, não é um requisito.

Quando uma janela do WPF é fechada, ela não pode ser reaberta. As caixas de diálogo personalizadas são janelas WPF e a mesma regra se aplica. Para saber como fechar uma janela, confira Como fechar uma janela ou caixa de diálogo.

Implementando uma caixa de diálogo

Ao criar uma caixa de diálogo, siga estas sugestões para criar uma boa experiência de usuário:

❌ Não desorganize a janela da caixa de diálogo. A experiência da caixa de diálogo é para o usuário inserir alguns dados ou fazer uma escolha.

✔️ Forneça um botão OK para fechar a janela.

✔️ Defina a propriedade do botão IsDefault para true permitir que o usuário pressione a tecla ENTER para aceitar e fechar a janela.

✔️ CONSIDERE a adição de um botão Cancelar para que o usuário possa fechar a janela e indicar que não deseja continuar.

✔️ Defina a propriedade do botão IsCancel para true permitir que o usuário pressione a tecla ESC para fechar a janela.

✔️ Defina o título da janela para descrever com precisão o que a caixa de diálogo representa ou o que o usuário deve fazer com a caixa de diálogo.

✔️ Defina valores mínimos de largura e altura para a janela, impedindo que o usuário redimensione a janela muito pequena.

✔️ CONSIDERE desabilitar a capacidade de redimensionar a janela se ShowInTaskbar estiver definida como false. Você pode desabilitar o redimensionamento definindo ResizeMode como NoResize

O código a seguir demonstra essa configuração.

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

O XAML acima cria uma janela semelhante à seguinte imagem:

Uma janela da caixa de diálogo do WPF que mostra caixas de texto esquerda, superior, direita e inferior.

Elementos de interface do usuário abrindo uma caixa de diálogo

A experiência do usuário para uma caixa de diálogo também se estende até a barra de menus ou o botão da janela que a abre. Quando um item de menu ou botão executa uma função que requer interação do usuário por meio de uma caixa de diálogo antes que a função possa continuar, o controle deve apresentar uma reticência no final de seu texto de cabeçalho:

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

Quando um item de menu ou botão executa uma função que exibe uma caixa de diálogo que não requer interação do usuário, como uma caixa de diálogo Sobre, uma reticência não é necessária.

Os itens de menu são uma maneira comum de fornecer aos usuários ações de aplicativo que são agrupadas em temas relacionados. Você provavelmente já viu o menu Arquivo em muitos aplicativos diferentes. Em um aplicativo típico, o item de menu Arquivo fornece maneiras de salvar um arquivo, carregar um arquivo e imprimir um arquivo. Se a ação for exibir uma janela modal, o cabeçalho normalmente incluirá reticências, conforme mostrado na imagem a seguir:

Uma janela de WPF que mostra itens de menu com reticências para indicar qual item exibe uma caixa de diálogo.

Dois dos itens de menu têm reticências: .... Isso ajuda o usuário a identificar que, quando ele seleciona esses itens de menu, uma janela modal é mostrada, pausando o aplicativo até que o usuário o feche.

Essa técnica de design é uma maneira fácil de comunicar aos usuários o que eles devem esperar.

Botões

Você pode seguir o mesmo princípio descrito na seção Itens de menu . Use reticências no texto do botão para indicar que, quando o usuário pressionar o botão, uma nova caixa de diálogo modal será mostrada. Na imagem a seguir, há dois botões e é fácil entender qual botão exibe uma caixa de diálogo:

Uma janela do WPF que mostra botões com reticências para indicar qual item mostra uma caixa de diálogo.

Retornar um resultado

Abrir outra janela, especialmente uma caixa de diálogo modal, é uma ótima maneira de retornar status e informações ao código de chamada.

Quando uma caixa de diálogo é mostrada chamando ShowDialog(), o código que abriu a caixa de diálogo aguarda até que o ShowDialog método retorne. Quando o método retorna, o código que o chamou precisa decidir se deseja continuar processando ou interrompendo o processamento. O usuário geralmente indica isso pressionando um botão OK ou Cancelar na caixa de diálogo.

Quando o botão OK é pressionado, ShowDialog deve ser projetado para retornar truee o botão Cancelar para retornar false. Isso é obtido definindo a DialogResult propriedade quando o botão é pressionado.

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

A DialogResult propriedade só poderá ser definida se a caixa de diálogo tiver sido exibida com ShowDialog(). Quando a DialogResult propriedade é definida, a caixa de diálogo é fechada.

Se a propriedade de IsCancel de um botão estiver definida como true, e a janela for aberta com ShowDialog(), a tecla ESC fechará a janela e definirá DialogResult como false.

Para obter mais informações sobre como fechar caixas de diálogo, consulte Como fechar uma janela ou caixa de diálogo.

Processando a resposta

O ShowDialog() retorna um valor booliano para indicar se o usuário aceitou ou cancelou a caixa de diálogo. Se você estiver alertando o usuário sobre algo, mas não exigir que ele tome uma decisão ou forneça dados, poderá ignorar a resposta. A resposta também pode ser inspecionada verificando a propriedade DialogResult. O código a seguir mostra como processar a resposta:

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

Caixa de diálogo sem modal

Para mostrar uma modelagem de caixa de diálogo, chame Show(). A caixa de diálogo deve, pelo menos, fornecer um botão Fechar . Outros botões e elementos interativos podem ser fornecidos para executar uma função específica, como um botão Localizar Próximo para localizar a próxima palavra em uma pesquisa de palavras.

Como uma caixa de diálogo de modelagem não impede que o código de chamada continue, você deve fornecer uma maneira diferente de retornar um resultado. Você tem as seguintes opções:

  • Exponha uma propriedade de objeto de dados na janela.
  • Manipule o Window.Closed evento no código de chamada.
  • Crie eventos na janela que são gerados quando o usuário seleciona um objeto ou pressiona um botão específico.

O exemplo a seguir usa o Window.Closed evento para exibir uma caixa de mensagem para o usuário quando a caixa de diálogo é fechada. A mensagem exibida faz referência a uma propriedade da caixa de diálogo fechada. Para obter mais informações sobre como fechar caixas de diálogo, consulte Como fechar uma janela ou caixa 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()

Consulte também