Vue d’ensemble des boîtes de dialogue (WPF .NET)

Windows Presentation Foundation (WPF) vous permet de concevoir vos propres boîtes de dialogue. Les boîtes de dialogue sont Windows, mais avec un but et une expérience utilisateur spécifiques. Cet article décrit le fonctionnement d’une boîte de dialogue et les types de boîtes de dialogue que vous pouvez créer et utiliser. Les boîtes de dialogue permettent d’effectuer les opérations suivantes :

  • Présenter des informations spécifiques aux utilisateurs
  • Recueillir des informations auprès des utilisateurs
  • Afficher et recueillir des informations
  • Affiche une invite du système d’exploitation, telle que la fenêtre Imprimer.
  • Sélectionnez un fichier ou un dossier.

Ces types de fenêtres sont appelés boîtes de dialogue. Une boîte de dialogue peut être affichée de deux manières : modale et non modale.

L’affichage d’une boîte de dialogue modale pour l’utilisateur est une technique avec laquelle l’application interrompt ce qu’elle faisait jusqu’à ce que l’utilisateur ferme la boîte de dialogue. Cela se présente généralement sous la forme d’une invite ou d’une alerte. Vous ne pouvez pas interagir avec les autres fenêtres de l’application tant que la boîte de dialogue n’est pas fermée. Une fois la boîte de dialogue modale fermée, l’application continue. Les boîtes de dialogue les plus courantes sont utilisées pour afficher une invite ouvrir un fichier ou enregistrer le fichier, afficher la boîte de dialogue de l’imprimante ou la messagerie de l’utilisateur avec un État.

Une boîte de dialogue non modale n’empêche pas un utilisateur d’activer d’autres fenêtres pendant qu’il est ouvert. Par exemple, si un utilisateur souhaite rechercher des occurrences d’un mot particulier dans un document, une fenêtre principale ouvre souvent une boîte de dialogue pour demander à l’utilisateur le mot qu’il recherche. Étant donné que l’application ne souhaite pas empêcher l’utilisateur de modifier le document, la boîte de dialogue n’a pas besoin d’être modale. Une boîte de dialogue non modale au moins fournit un bouton Fermer pour fermer la boîte de dialogue. D’autres boutons peuvent être fournis pour exécuter des fonctions spécifiques, comme un bouton suivant pour rechercher le mot suivant dans une recherche Word.

Avec WPF, vous pouvez créer plusieurs types de boîtes de dialogue, telles que des boîtes de message, des boîtes de dialogue communes et des boîtes de dialogue personnalisées. Cet article aborde chaque, et l' exemple de boîte de dialogue fournit des exemples correspondants.

Boîtes de message

Une boîte de message est une boîte de dialogue qui peut être utilisée pour afficher des informations textuelles et permettre aux utilisateurs de prendre des décisions avec des boutons. L’illustration suivante montre une boîte de message qui pose une question et fournit à l’utilisateur trois boutons pour répondre à la question.

Word processor dialog box asking if you want to save the changes to the document before the application closes.

Pour créer une boîte de message, vous utilisez la MessageBox classe. MessageBox vous permet de configurer le texte de la boîte de message, le titre, l’icône et les boutons.

Pour plus d’informations, consultez Comment ouvrir un message.

Boîtes de dialogue communes

Windows implémente différents types de boîtes de dialogue réutilisables qui sont communes à toutes les applications, y compris les boîtes de dialogue permettant de sélectionner des fichiers et d’imprimer.

Dans la mesure où ces boîtes de dialogue sont fournies par le système d’exploitation, elles sont partagées entre toutes les applications qui s’exécutent sur le système d’exploitation. Ces boîtes de dialogue offrent une expérience utilisateur cohérente et sont connues sous le nom de boîtes de dialogue communes. Quand un utilisateur utilise une boîte de dialogue commune dans une application, il n’a pas besoin d’apprendre à utiliser cette boîte de dialogue dans d’autres applications.

WPF encapsule les boîtes de dialogue courantes ouvrir un fichier, enregistrer le fichier et imprimer et les expose en tant que classes managées que vous pouvez utiliser dans des applications autonomes.

Open file dialog box called from WPF.

Pour en savoir plus sur les boîtes de dialogue courantes, consultez les articles suivants :

Boîtes de dialogue personnalisées

Si les boîtes de dialogue courantes sont utiles et doivent être utilisées dans la mesure du possible, elles ne prennent pas en charge les exigences des boîtes de dialogue spécifiques au domaine. Dans ces cas-là, vous devez créer vos propres boîtes de dialogue. Comme nous allons le voir, une boîte de dialogue est une fenêtre avec des comportements spéciaux. Window implémente ces comportements et vous utilisez la fenêtre pour créer des boîtes de dialogue modales et non modales personnalisées.

Il y a de nombreuses considérations de conception à prendre en compte lorsque vous créez votre propre boîte de dialogue. Bien qu’une fenêtre d’application et une boîte de dialogue contiennent des similarités, telles que le partage de la même classe de base, une boîte de dialogue est utilisée à des fins spécifiques. En règle générale, une boîte de dialogue est nécessaire lorsque vous devez inviter un utilisateur à entrer des informations ou une réponse. En règle générale, l’application s’interrompt pendant que la boîte de dialogue (modale) s’affiche et restreint l’accès au reste de l’application. Une fois la boîte de dialogue fermée, l’application se poursuit. Toutefois, le fait d’affiner les interactions dans la boîte de dialogue n’est pas obligatoire.

Quand une fenêtre WPF est fermée, elle ne peut pas être rouverte. Les boîtes de dialogue personnalisées sont des fenêtres WPF et la même règle s’applique. Pour savoir comment fermer une fenêtre, consultez comment fermer une fenêtre ou une boîte de dialogue.

Implémentation d’une boîte de dialogue

Lorsque vous concevez une boîte de dialogue, suivez ces suggestions pour créer une expérience utilisateur optimale :

❌ N’encombrez pas la fenêtre de dialogue. La boîte de dialogue permet à l’utilisateur d’entrer des données ou de faire un choix.

✔️ fournissez un bouton OK pour fermer la fenêtre.

✔️ Affectez à la propriété du bouton OK la valeur true pour permettre à l’utilisateur d’appuyer sur la touche true pour accepter et fermer la fenêtre.

✔️ envisagez d’ajouter un bouton Annuler pour que l’utilisateur puisse fermer la fenêtre et indiquer qu’il ne souhaite pas continuer.

✔️ Affectez à la propriété du bouton Annuler la valeur true pour permettre à l’utilisateur d’appuyer sur la touche true pour fermer la fenêtre.

✔️ définir le titre de la fenêtre pour décrire avec précision ce que la boîte de dialogue représente, ou ce que l’utilisateur doit faire avec la boîte de dialogue.

✔️ Définissez les valeurs de largeur et de hauteur minimales pour la fenêtre, ce qui empêche l’utilisateur de redimensionner la fenêtre trop petite.

✔️ envisagez de désactiver la possibilité de redimensionner la fenêtre si ShowInTaskbar a la valeur false . Vous pouvez désactiver le redimensionnement en affectant à la valeur ResizeModeNoResize

Le code suivant illustre cette configuration.

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

Le code XAML ci-dessus crée une fenêtre qui ressemble à l’image suivante :

A dialog box window for WPF that shows left, top, right, bottom text boxes.

Éléments d’interface utilisateur ouvrant une boîte de dialogue

L’expérience utilisateur pour une boîte de dialogue s’étend également dans la barre de menus ou le bouton de la fenêtre qui l’ouvre. Lorsqu’un élément de menu ou un bouton exécute une fonction qui nécessite une interaction de l’utilisateur via une boîte de dialogue avant que la fonction puisse continuer, le contrôle doit utiliser des points de suspension à la fin de son texte d’en-tête :

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

Lorsqu’un élément de menu ou un bouton exécute une fonction qui affiche une boîte de dialogue qui ne nécessite pas d’intervention de l’utilisateur, telle qu’une boîte de dialogue à propos , les points de suspension ne sont pas requis.

Les éléments de menu sont un moyen courant de fournir aux utilisateurs des actions d’application regroupées dans des thèmes associés. Vous avez probablement vu le menu fichier de nombreuses applications différentes. Dans une application classique, l’élément de menu fichier fournit des méthodes pour enregistrer un fichier, charger un fichier et imprimer un fichier. Si l’action va afficher une fenêtre modale, l’en-tête comprend généralement des points de suspension comme indiqué dans l’image suivante :

A WPF window that shows menu items with an ellipsis to indicate which item shows a dialog box.

Deux des éléments de menu ont des points de suspension : ... . Cela permet à l’utilisateur de déterminer que lorsqu’il sélectionne ces éléments de menu, une fenêtre modale s’affiche et interrompt l’application jusqu’à ce que l’utilisateur la ferme.

Cette technique de conception est un moyen simple de communiquer à vos utilisateurs ce qu’ils doivent attendre.

Boutons

Vous pouvez suivre le même principe que celui décrit dans la section éléments de menu . Utilisez des points de suspension sur le texte du bouton pour indiquer que lorsque l’utilisateur appuie sur le bouton, une boîte de dialogue modale s’affiche. Dans l’image suivante, il y a deux boutons et il est facile de comprendre le bouton qui affiche une boîte de dialogue :

A WPF window that shows buttons with an ellipsis to indicate which item shows a dialog box.

Retourner un résultat

L’ouverture d’une autre fenêtre, en particulier une boîte de dialogue modale, est un excellent moyen de retourner l’État et les informations d’appel de code.

Quand une boîte de dialogue est affichée en appelant ShowDialog() , le code qui a ouvert la boîte de dialogue attend jusqu’au retour de la ShowDialog méthode. Lorsque la méthode retourne, le code qui l’a appelé doit décider s’il faut continuer le traitement ou arrêter le traitement. L’utilisateur l’indique généralement en appuyant sur un bouton OK ou Annuler de la boîte de dialogue.

Lorsque vous appuyez sur le bouton OK , doit être conçu pour retourner true et le bouton true pour retourner false . Pour ce faire, vous devez définir la DialogResult propriété lorsque le bouton est enfoncé.

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 DialogResult propriété ne peut être définie que si la boîte de dialogue a été affichée avec ShowDialog() . Lorsque la DialogResult propriété est définie, la boîte de dialogue se ferme.

Si la propriété d’un bouton IsCancel a true la valeur et que la fenêtre est ouverte avec ShowDialog() , la touche IsCancel ferme la fenêtre et affecte DialogResult à la valeur false .

Pour plus d’informations sur la fermeture des boîtes de dialogue, consultez comment fermer une fenêtre ou une boîte de dialogue.

Traitement de la réponse

ShowDialog()Retourne une valeur booléenne pour indiquer si l’utilisateur a accepté ou annulé la boîte de dialogue. Si vous envoyez une alerte à l’utilisateur, mais que vous n’avez pas besoin de prendre une décision ou de fournir des données, vous pouvez ignorer la réponse. La réponse peut également être inspectée en vérifiant la DialogResult propriété. Le code suivant montre comment traiter la réponse :

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

Boîte de dialogue non modale

Pour afficher une boîte de dialogue non modale, appelez Show() . La boîte de dialogue doit au moins fournir un bouton Fermer . D’autres boutons et éléments interactifs peuvent être fournis pour exécuter une fonction spécifique, comme un bouton suivant pour rechercher le mot suivant dans une recherche Word.

Comme une boîte de dialogue non modale n’empêche pas le code appelant de se poursuivre, vous devez fournir un autre moyen de retourner un résultat. Vous pouvez effectuer l’une des actions suivantes :

  • Exposer une propriété de l’objet de données dans la fenêtre.
  • Gérez l' Window.Closed événement dans le code appelant.
  • Créez des événements sur la fenêtre déclenchés lorsque l’utilisateur sélectionne un objet ou appuie sur un bouton spécifique.

L’exemple suivant utilise l' Window.Closed événement pour afficher une boîte de message à l’utilisateur lorsque la boîte de dialogue se ferme. Le message affiché fait référence à une propriété de la boîte de dialogue fermée. Pour plus d’informations sur la fermeture des boîtes de dialogue, consultez comment fermer une fenêtre ou une boîte de dialogue.

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

Voir aussi