Przegląd okien dialogowych (WPF .NET)

Artykuł
10/18/2023

Program Windows Presentation Foundation (WPF) umożliwia projektowanie własnych okien dialogowych. Okna dialogowe to okna, ale z określoną intencją i środowiskiem użytkownika. W tym artykule omówiono działanie okna dialogowego oraz typy okien dialogowych, które można tworzyć i używać. Okna dialogowe służą do:

Wyświetl określone informacje dla użytkowników.
Zbieranie informacji od użytkowników.
Wyświetlaj i zbieraj informacje.
Wyświetl monit systemu operacyjnego, taki jak okno drukowania.
Wybierz plik lub folder.

Tego typu okna są nazywane oknami dialogowymi. Okno dialogowe można wyświetlić na dwa sposoby: modalne i moderacyjne.

Wyświetlanie modalnego okna dialogowego dla użytkownika jest techniką, za pomocą której aplikacja przerywa działanie, dopóki użytkownik nie zamknie okna dialogowego. Zazwyczaj pojawia się on w postaci monitu lub alertu. Inne okna w aplikacji nie mogą być wchodzić w interakcje do momentu zamknięcia okna dialogowego. Po zamknięciu modalnego okna dialogowego aplikacja będzie kontynuowana. Najbardziej typowe okna dialogowe służą do wyświetlania otwartego pliku lub monitu o zapisanie pliku, wyświetlenie okna dialogowego drukarki lub wyświetlenie komunikatu użytkownika o pewnym stanie.

Okno dialogowe bez moderowania nie uniemożliwia użytkownikowi aktywowania innych okien podczas jego otwierania. Jeśli na przykład użytkownik chce znaleźć wystąpienia określonego słowa w dokumencie, okno główne często otwiera okno dialogowe, aby zapytać użytkownika, jakiego słowa szuka. Ponieważ aplikacja nie chce uniemożliwiać użytkownikowi edytowania dokumentu, okno dialogowe nie musi być modalne. Modeless okno dialogowe co najmniej zapewnia przycisk Zamknij , aby zamknąć okno dialogowe. Inne przyciski mogą być udostępniane do uruchamiania określonych funkcji, takich jak przycisk Znajdź dalej , aby znaleźć następny wyraz w wyszukiwaniu wyrazów.

Za pomocą platformy WPF można utworzyć kilka typów okien dialogowych, takich jak okna komunikatów, typowe okna dialogowe i niestandardowe okna dialogowe. W tym artykule omówiono poszczególne elementy, a przykład okna dialogowego zawiera pasujące przykłady.

Pola wiadomości

Okno dialogowe to okno dialogowe, którego można użyć do wyświetlania informacji tekstowych i umożliwienia użytkownikom podejmowania decyzji za pomocą przycisków. Na poniższej ilustracji przedstawiono pole komunikatu, które zadaje pytanie i udostępnia użytkownikowi trzy przyciski umożliwiające udzielenie odpowiedzi na pytanie.

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

Aby utworzyć pole komunikatu MessageBox , należy użyć klasy . MessageBox Umożliwia skonfigurowanie tekstu pola wiadomości, tytułu, ikony i przycisków.

Aby uzyskać więcej informacji, zobacz Jak otworzyć okno komunikatu.

Typowe okna dialogowe

System Windows implementuje różne rodzaje okien dialogowych wielokrotnego użytku, które są wspólne dla wszystkich aplikacji, w tym okna dialogowe do wybierania plików i drukowania.

Ponieważ te okna dialogowe są udostępniane przez system operacyjny, są one współużytkowane przez wszystkie aplikacje uruchamiane w systemie operacyjnym. Te okna dialogowe zapewniają spójne środowisko użytkownika i są nazywane typowymi oknami dialogowymi. Ponieważ użytkownik używa wspólnego okna dialogowego w jednej aplikacji, nie musi dowiedzieć się, jak używać tego okna dialogowego w innych aplikacjach.

WPF hermetyzuje otwarty plik, zapisz plik, otwórz folder i wyświetla typowe okna dialogowe i uwidacznia je jako klasy zarządzane do użycia.

Open file dialog box called from WPF.

Aby dowiedzieć się więcej o typowych oknach dialogowych, zobacz następujące artykuły:

Niestandardowe okna dialogowe

Chociaż typowe okna dialogowe są przydatne i powinny być używane w miarę możliwości, nie obsługują one wymagań dotyczących okien dialogowych specyficznych dla domeny. W takich przypadkach należy utworzyć własne okna dialogowe. Jak zobaczymy, okno dialogowe jest oknem ze specjalnymi zachowaniami. Window implementuje te zachowania i używasz okna do tworzenia niestandardowych modalnych i moderacyjnych okien dialogowych.

Podczas tworzenia własnego okna dialogowego należy wziąć pod uwagę wiele zagadnień projektowych. Mimo że zarówno okno aplikacji, jak i okno dialogowe zawierają podobieństwa, takie jak współużytkowanie tej samej klasy bazowej, okno dialogowe jest używane do określonego celu. Zazwyczaj okno dialogowe jest wymagane, gdy trzeba monitować użytkownika o jakieś informacje lub odpowiedź. Zazwyczaj aplikacja zostanie wstrzymana podczas wyświetlania okna dialogowego (modalnego), co ogranicza dostęp do pozostałej części aplikacji. Po zamknięciu okna dialogowego aplikacja będzie kontynuowana. Ograniczenie interakcji do samego okna dialogowego nie jest jednak wymagane.

Po zamknięciu okna WPF nie można go ponownie otworzyć. Niestandardowe okna dialogowe to okna WPF, a ta sama reguła ma zastosowanie. Aby dowiedzieć się, jak zamknąć okno, zobacz Jak zamknąć okno lub okno dialogowe.

Implementowanie okna dialogowego

Podczas projektowania okna dialogowego postępuj zgodnie z tymi sugestiami, aby utworzyć dobre środowisko użytkownika:

❌ NIE zaśmiecaj okna dialogowego. Środowisko dialogowe służy użytkownikowi do wprowadzania niektórych danych lub dokonywania wyboru.

✔️ Aby zamknąć okno, podaj przycisk OK .

✔️ Ustaw właściwość przycisku OK, aby true umożliwić użytkownikowi naciśnięcie klawisza IsDefault ENTER w celu zaakceptowania i zamknięcia okna.

✔️ ROZWAŻ dodanie przycisku Anuluj , aby użytkownik mógł zamknąć okno i wskazać, że nie chce kontynuować.

✔️ Ustaw właściwość przycisku Anuluj, aby true umożliwić użytkownikowi naciśnięcie klawisza IsCancel ESC w celu zamknięcia okna.

✔️ Ustaw tytuł okna, aby dokładnie opisać, co reprezentuje okno dialogowe, lub co użytkownik powinien zrobić w oknie dialogowym.

✔️ Ustaw minimalną szerokość i wysokość okna, uniemożliwiając użytkownikowi zmianę rozmiaru okna za małą.

✔️ ROZWAŻ wyłączenie możliwości zmiany rozmiaru okna, jeśli ShowInTaskbar jest ustawione na false. Zmianę rozmiaru można wyłączyć, ustawiając wartość na ResizeMode NoResize

Poniższy kod demonstruje tę konfigurację.

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

Powyższy kod XAML tworzy okno podobne do poniższego obrazu:

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

Elementy interfejsu użytkownika otwierające okno dialogowe

Środowisko użytkownika okna dialogowego jest również rozszerzane na pasek menu lub przycisk okna, który go otwiera. Gdy element menu lub przycisk uruchamia funkcję, która wymaga interakcji użytkownika za pośrednictwem okna dialogowego, zanim funkcja będzie mogła kontynuować, kontrolka powinna używać wielokropka na końcu tekstu nagłówka:

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

Gdy element menu lub przycisk uruchamia funkcję wyświetlającą okno dialogowe, które nie wymaga interakcji użytkownika, na przykład okno dialogowe Informacje , wielokropek nie jest wymagany.

Elementy menu to typowy sposób udostępniania użytkownikom akcji aplikacji pogrupowanych w powiązane motywy. Prawdopodobnie menu Plik zostało prawdopodobnie wyświetlone w wielu różnych aplikacjach. W typowej aplikacji element menu Plik udostępnia sposoby zapisywania pliku, ładowania pliku i drukowania pliku. Jeśli akcja będzie wyświetlać modalne okno, nagłówek zazwyczaj zawiera wielokropek, jak pokazano na poniższej ilustracji:

Dwa elementy menu mają wielokropek: .... Pomaga to użytkownikowi określić, że po wybraniu tych elementów menu zostanie wyświetlone modalne okno, wstrzymując aplikację do momentu zamknięcia go przez użytkownika.

Ta technika projektowania jest łatwym sposobem komunikowania się użytkownikom z oczekiwaniami.

Przyciski

Możesz postępować zgodnie z tą samą zasadą opisaną w sekcji Elementy menu. Użyj wielokropka w tekście przycisku, aby wskazać, że po naciśnięciu przycisku przez użytkownika zostanie wyświetlone modalne okno dialogowe. Na poniższej ilustracji znajdują się dwa przyciski i można łatwo zrozumieć, który przycisk wyświetla okno dialogowe:

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

Zwracanie wyniku

Otwarcie innego okna, zwłaszcza modalnego okna dialogowego, to doskonały sposób zwracania stanu i informacji do wywoływania kodu.

Gdy okno dialogowe jest wyświetlane przez wywołanie ShowDialog()metody , kod, który otworzył okno dialogowe, czeka na ShowDialog zwrócenie metody. Gdy metoda zwróci kod, który go nazwał, musi zdecydować, czy kontynuować przetwarzanie, czy zatrzymać przetwarzanie. Użytkownik zazwyczaj wskazuje to, naciskając przycisk OK lub Anuluj w oknie dialogowym.

Po naciśnięciu przycisku OK należy go zaprojektować tak, ShowDialog aby zwracał truewartość , a przycisk Anuluj zwraca wartość false. Jest to osiągane przez ustawienie DialogResult właściwości po naciśnięciu przycisku.

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

Właściwość DialogResult można ustawić tylko wtedy, gdy okno dialogowe było wyświetlane za pomocą ShowDialog()polecenia . Po ustawieniu DialogResult właściwości okno dialogowe zostanie zamknięte.

Jeśli właściwość przycisku jest ustawiona na , a okno zostanie otwarte za pomocą ShowDialog()klawisza ESC, zamknie okno i ustawi wartość falseDialogResult .trueIsCancel

Aby uzyskać więcej informacji na temat zamykania okien dialogowych, zobacz Jak zamknąć okno lub okno dialogowe.

Przetwarzanie odpowiedzi

Funkcja ShowDialog() zwraca wartość logiczną wskazującą, czy użytkownik zaakceptował, czy anulował okno dialogowe. Jeśli powiadamiasz użytkownika o czymś, ale nie wymagasz podjęcia decyzji lub podania danych, możesz zignorować odpowiedź. Odpowiedź można również sprawdzić, sprawdzając DialogResult właściwość . Poniższy kod pokazuje, jak przetworzyć odpowiedź:

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

Okno dialogowe bez moderowania

Aby wyświetlić okno dialogowe bez moderowania, wywołaj metodę Show(). Okno dialogowe powinno zawierać co najmniej przycisk Zamknij . Inne przyciski i elementy interakcyjne można udostępnić w celu uruchomienia określonej funkcji, na przykład przycisku Znajdź dalej , aby znaleźć następny wyraz w wyszukiwaniu wyrazów.

Ponieważ okno dialogowe bez moderowania nie blokuje ciągłego wywoływania kodu, musisz podać inny sposób zwracania wyniku. Możesz wykonać jedną z następujących czynności:

Uwidacznia właściwość obiektu danych w oknie.
Obsługa zdarzenia Window.Closed w kodzie wywołującym.
Utwórz zdarzenia w oknie, które są wywoływane, gdy użytkownik wybierze obiekt lub naciśnie określony przycisk.

W poniższym przykładzie Window.Closed użyto zdarzenia, aby wyświetlić użytkownikowi okno komunikatu po zamknięciu okna dialogowego. Wyświetlony komunikat odwołuje się do właściwości zamkniętego okna dialogowego. Aby uzyskać więcej informacji na temat zamykania okien dialogowych, zobacz Jak zamknąć okno lub okno dialogowe.

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

Przegląd okien dialogowych (WPF .NET)

Pola wiadomości

Typowe okna dialogowe

Niestandardowe okna dialogowe

Implementowanie okna dialogowego

Elementy interfejsu użytkownika otwierające okno dialogowe

Elementy menu

Przyciski

Zwracanie wyniku

Przetwarzanie odpowiedzi

Okno dialogowe bez moderowania

Zobacz też

Opinia

Dodatkowe zasoby

Przegląd okien dialogowych (WPF .NET)

Pola wiadomości

Typowe okna dialogowe

Niestandardowe okna dialogowe

Implementowanie okna dialogowego

Elementy interfejsu użytkownika otwierające okno dialogowe

Elementy menu

Przyciski

Zwracanie wyniku

Modalne okna dialogowe

Przetwarzanie odpowiedzi

Okno dialogowe bez moderowania

Zobacz też

Opinia

Dodatkowe zasoby