Dialog Controls

Dialogs are crucial UI elements in Windows applications, used for displaying important messages, requesting user input, or confirming actions. WinUI provides a comprehensive set of dialog controls to enhance user interaction.

Types of Dialogs

WinUI offers several types of dialogs, each suited for different scenarios:

ContentDialog: A versatile dialog that can host custom content, making it ideal for complex input or information display.
MessageDialog: A simpler dialog for displaying messages with predefined buttons (e.g., OK, Cancel, Yes, No).
Flyout: While not strictly a dialog, Flyouts can serve a similar purpose for transient UI elements.

Using ContentDialog

The ContentDialog is the most flexible dialog in WinUI. You can define its title, content, and command buttons. Here's a basic example of how to show a ContentDialog:

Example: Simple Input Dialog

This dialog prompts the user for their name.


async void ShowInputDialog()
{
    var dialog = new ContentDialog
    {
        Title = "Enter Your Name",
        Content = new TextBox { PlaceholderText = "Your name here" },
        PrimaryButtonText = "Submit",
        CloseButtonText = "Cancel"
    };

    var result = await dialog.ShowAsync();

    if (result == ContentDialogResult.Primary)
    {
        var nameTextBox = dialog.Content as TextBox;
        var enteredName = nameTextBox?.Text;
        // Process the entered name
        System.Diagnostics.Debug.WriteLine($"Entered name: {enteredName}");
    }
}

Using MessageDialog

The MessageDialog is simpler and designed for standard messaging. It allows you to specify a message and a set of command buttons.

Example: Confirmation Dialog

This dialog asks the user to confirm an action.


async void ShowConfirmationDialog()
{
    var dialog = new MessageDialog("Are you sure you want to delete this item?", "Confirm Deletion");
    dialog.Commands.Add(new UICommand("Yes", cmd => { /* Handle Yes action */ }));
    dialog.Commands.Add(new UICommand("No", cmd => { /* Handle No action */ }));
    dialog.DefaultCommandIndex = 1; // "No" is the default

    await dialog.ShowAsync();
}

Dialog Best Practices

Keep it Concise: Dialogs should be used for brief interactions. If you need more complex UI, consider a separate page or view.
Clear Actions: Button labels should clearly indicate the action the user is taking (e.g., "Save", "Cancel", "Delete").
Default Button: Set a default button for quick confirmation (e.g., "Cancel" for destructive actions).
Accessibility: Ensure dialogs are keyboard navigable and screen reader friendly.