Overzicht van dialoogvensters (WPF .NET)

Artikel
12/19/2024

Windows Presentation Foundation (WPF) biedt manieren om uw eigen dialoogvensters te ontwerpen. Dialoogvensters zijn vensters, maar met een specifieke intentie en gebruikerservaring. In dit artikel wordt beschreven hoe een dialoogvenster werkt en welke typen dialoogvensters u kunt maken en gebruiken. Dialoogvensters worden gebruikt om:

Specifieke informatie weergeven aan gebruikers.
Verzamel informatie van gebruikers.
Zowel informatie weergeven als verzamelen.
Geef een prompt van het besturingssysteem weer, zoals een afdrukvenster.
Selecteer een bestand of map.

Deze typen vensters worden dialoogvenstersgenoemd. Een dialoogvenster kan op twee manieren worden weergegeven: modaal en niet-modaal.

Het weergeven van een modaal dialoogvenster aan de gebruiker is een techniek waarmee de toepassing onderbreekt wat het deed totdat de gebruiker het dialoogvenster sluit. Dit komt over het algemeen in de vorm van een prompt of waarschuwing. Andere vensters in de toepassing kunnen pas worden gebruikt als het dialoogvenster is gesloten. Zodra het dialoogvenster modale is gesloten, wordt de toepassing voortgezet. De meest voorkomende dialoogvensters worden gebruikt om een geopend bestand weer te geven of een bestandsprompt op te slaan, het printerdialoogvenster weer te geven of de gebruiker een bepaalde status te sturen.

Een modeless dialoogvenster verhindert niet dat een gebruiker andere vensters activeert terwijl het is geopend. Als een gebruiker bijvoorbeeld exemplaren van een bepaald woord in een document wil vinden, wordt in een hoofdvenster vaak een dialoogvenster geopend om een gebruiker te vragen naar welk woord hij of zij zoekt. Omdat de toepassing niet wil voorkomen dat de gebruiker het document bewerkt, hoeft het dialoogvenster niet modaal te zijn. Een niet-modale dialoogvenster heeft ten minste een knop Sluiten om het dialoogvenster te sluiten. Er kunnen andere knoppen worden meegeleverd voor specifieke functies, zoals een Zoek Volgende knop om het volgende woord te vinden in een zoekopdracht.

Met WPF kunt u verschillende typen dialoogvensters maken, zoals berichtvakken, algemene dialoogvensters en aangepaste dialoogvensters. In dit artikel worden alle onderwerpen besproken en in het dialoogvenstervoorbeeld vindt u overeenkomende voorbeelden.

Meldingsvensters

Een berichtvak is een dialoogvenster dat kan worden gebruikt om tekstuele informatie weer te geven en gebruikers in staat te stellen beslissingen te nemen met knoppen. In de volgende afbeelding ziet u een berichtvak waarin een vraag wordt gesteld en waarmee de gebruiker drie knoppen heeft om de vraag te beantwoorden.

dialoogvenster Word-processor waarin u wordt gevraagd of u de wijzigingen in het document wilt opslaan voordat de toepassing wordt gesloten.

Als u een berichtvak wilt maken, gebruikt u de klasse MessageBox. MessageBox kunt u de tekst, titel, pictogram en knoppen van het berichtvak configureren.

Zie Een berichtvak openenvoor meer informatie.

Algemene dialoogvensters

Windows implementeert verschillende soorten herbruikbare dialoogvensters die gebruikelijk zijn voor alle toepassingen, inclusief dialoogvensters voor het selecteren van bestanden en afdrukken.

Omdat deze dialoogvensters door het besturingssysteem worden geleverd, worden deze gedeeld door alle toepassingen die op het besturingssysteem worden uitgevoerd. Deze dialoogvensters bieden een consistente gebruikerservaring en worden ook wel algemene dialoogvenstersgenoemd. Omdat een gebruiker een gemeenschappelijk dialoogvenster in één toepassing gebruikt, hoeven ze niet te leren hoe ze dat dialoogvenster in andere toepassingen kunnen gebruiken.

WPF biedt dialoogvensters voor het openen van bestanden, opslaan van bestanden, openen van mappen en afdrukken, en maakt ze beschikbaar als beheerde klassen die u kunt gebruiken.

Een dialoogvenster 'Bestand openen' aangeroepen vanuit WPF.

Zie de volgende artikelen voor meer informatie over algemene dialoogvensters:

Aangepaste dialoogvensters

Hoewel algemene dialoogvensters nuttig zijn en indien mogelijk moeten worden gebruikt, bieden ze geen ondersteuning voor de vereisten van domeinspecifieke dialoogvensters. In dergelijke gevallen moet u uw eigen dialoogvensters maken. Zoals we zien, is een dialoogvenster een venster met speciaal gedrag. Window implementeert deze gedragspatronen en u gebruikt het venster om aangepaste modale en niet-modale dialoogvensters te maken.

Er zijn veel ontwerpoverwegingen waarmee u rekening moet houden wanneer u uw eigen dialoogvenster maakt. Hoewel zowel een toepassingsvenster als een dialoogvenster overeenkomsten bevatten, zoals het delen van dezelfde basisklasse, wordt een dialoogvenster gebruikt voor een specifiek doel. Meestal is een dialoogvenster vereist wanneer u een gebruiker moet vragen om een bepaalde informatie of reactie. Normaal gesproken wordt de toepassing onderbroken terwijl het dialoogvenster (modaal) wordt weergegeven, waardoor de toegang tot de rest van de toepassing wordt beperkt. Zodra het dialoogvenster is gesloten, gaat de toepassing verder. Het is echter geen vereiste om interacties met het dialoogvenster te beperken.

Wanneer een WPF-venster is gesloten, kan het niet opnieuw worden geopend. Aangepaste dialoogvensters zijn WPF-vensters en dezelfde regel is van toepassing. Zie Een venster of dialoogvenster sluitenvoor meer informatie over het sluiten van een venster.

Een dialoogvenster implementeren

Als u een dialoogvenster ontwerpt, volgt u deze suggesties om een goede gebruikerservaring te creëren:

❌ Maak het dialoogvenster niet vol. De dialoogvensterervaring is bedoeld voor de gebruiker om bepaalde gegevens in te voeren of om een keuze te maken.

✔️ Geef een OK knop aan om het venster te sluiten.

✔️ Stel de eigenschap IsDefault van de knop OK in op true zodat de gebruiker op de Enter-toets kan drukken om het venster te accepteren en te sluiten.

✔️ OVERWEEG een annuleerknop toe te voegen, zodat de gebruiker het venster kan sluiten en laat weten dat ze niet willen doorgaan.

✔️ Stel de eigenschap IsCancel van de knop annuleren in op true zodat de gebruiker op de ESC-toets kan drukken om het venster te sluiten.

✔️ Stel de titel van het venster in om nauwkeurig te beschrijven wat het dialoogvenster vertegenwoordigt of wat de gebruiker moet doen met het dialoogvenster.

✔️ Stel de minimale breedte- en hoogtewaarden voor het venster in, waardoor de gebruiker het formaat van het venster niet te klein kan maken.

✔️ OVERWEEG de mogelijkheid om het formaat van het venster uit te schakelen als ShowInTaskbar is ingesteld op false. U kunt het formaat uitschakelen door ResizeMode in te stellen op NoResize

De volgende code demonstreert deze configuratie.

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

Met de bovenstaande XAML wordt een venster gemaakt dat lijkt op de volgende afbeelding:

een dialoogvenstervenster voor WPF met links, boven, rechts, onderste tekstvakken.

UI-elementen die een dialoogvenster openen

De gebruikerservaring voor een dialoogvenster wordt ook uitgebreid naar de menubalk of de knop van het venster waarmee het wordt geopend. Wanneer een menu-item of knop een functie uitvoert waarvoor gebruikersinteractie via een dialoogvenster is vereist voordat de functie kan worden voortgezet, moet het besturingselement een beletselteken aan het einde van de koptekst gebruiken:

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

Wanneer een menu-item of knop een functie uitvoert waarin een dialoogvenster wordt weergegeven dat geen gebruikersinteractie vereist, zoals een dialoogvenster Info over, is er geen beletselteken vereist.

Menu-items zijn een veelgebruikte manier om gebruikers toepassingsacties te bieden die zijn gegroepeerd in gerelateerde thema's. U hebt waarschijnlijk het menu Bestand in veel verschillende toepassingen gezien. In een typische toepassing biedt de menuopdracht Bestand manieren om een bestand op te slaan, een bestand te laden en een bestand af te drukken. Als de actie een modaal venster weergeeft, bevat de koptekst meestal een beletselteken zoals wordt weergegeven in de volgende afbeelding:

Twee van de menu-items hebben een beletselteken: .... Dit helpt de gebruiker te begrijpen dat wanneer ze deze menu-items selecteren, er een modalvenster wordt weergegeven en de toepassing wordt gepauzeerd totdat de gebruiker het sluit.

Deze ontwerptechniek is een eenvoudige manier om te communiceren met uw gebruikers wat ze moeten verwachten.

Knopen

U kunt hetzelfde principe volgen dat wordt beschreven in de sectie Menu-items. Gebruik een beletselteken op de knoptekst om aan te geven dat wanneer de gebruiker op de knop drukt, een modaal dialoogvenster wordt weergegeven. In de volgende afbeelding zijn er twee knoppen en is het gemakkelijk te begrijpen welke knop een dialoogvenster weergeeft:

een WPF-venster met knoppen met een beletselteken om aan te geven welk item een dialoogvenster weergeeft.

Een resultaat retourneren

Het openen van een ander venster, met name een modaal dialoogvenster, is een uitstekende manier om de status en informatie terug te geven naar de aanroepende code.

Wanneer een dialoogvenster wordt weergegeven door ShowDialog()aan te roepen, wacht de code die het dialoogvenster heeft geopend totdat de ShowDialog methode wordt geretourneerd. Wanneer de methode voltooid is, moet de code die het aanriep bepalen of de verwerking moet worden voortgezet of gestopt. De gebruiker geeft dit over het algemeen aan door op een OK-knop of Annuleren-knop in het dialoogvenster te drukken.

Wanneer de knop OK wordt ingedrukt, moet ShowDialog zijn ontworpen om trueterug te keren en de knop annuleren om falseterug te keren. Dit wordt bereikt door de eigenschap DialogResult in te stellen wanneer de knop wordt ingedrukt.

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

De eigenschap DialogResult kan alleen worden ingesteld als het dialoogvenster met ShowDialog()wordt weergegeven. Wanneer de eigenschap DialogResult is ingesteld, wordt het dialoogvenster gesloten.

Als de eigenschap IsCancel van een knop is ingesteld op trueen het venster wordt geopend met ShowDialog(), sluit de ESC het venster en stelt DialogResult in op false.

Zie Een venster of dialoogvenster sluitenvoor meer informatie over het sluiten van dialoogvensters.

Het antwoord verwerken

De ShowDialog() retourneert een Booleaanse waarde om aan te geven of de gebruiker het dialoogvenster heeft geaccepteerd of geannuleerd. Als u de gebruiker waarschuwt voor iets, maar geen beslissing hoeft te nemen of gegevens op te geven, kunt u het antwoord negeren. Het antwoord kan ook worden gecontroleerd door de eigenschap DialogResult te controleren. De volgende code laat zien hoe u het antwoord verwerkt:

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

Dialoogvenster Modusloos

Als u een niet-modaal dialoogvenster wilt weergeven, gebruik dan Show(). In het dialoogvenster moet ten minste een knop Sluiten worden weergegeven. Andere knoppen en interactieve elementen kunnen worden geplaatst om een specifieke functie uit te voeren, zoals een knop Volgende vinden om het volgende woord te vinden in een zoekopdracht.

Omdat een modeless dialoogvenster de aanroepende code niet blokkeert om door te gaan, moet u een andere manier opgeven om een resultaat te retourneren. U kunt een van de volgende handelingen uitvoeren:

Een gegevensobjecteigenschap beschikbaar maken in het venster.
De Window.Closed gebeurtenis in de aanroepende code verwerken.
Maak gebeurtenissen in het venster die worden gegenereerd wanneer de gebruiker een object selecteert of op een specifieke knop drukt.

In het volgende voorbeeld wordt de Window.Closed gebeurtenis gebruikt om een berichtvak weer te geven aan de gebruiker wanneer het dialoogvenster wordt gesloten. Het weergegeven bericht verwijst naar een eigenschap van het gesloten dialoogvenster. Zie Een venster of dialoogvenster sluitenvoor meer informatie over het sluiten van dialoogvensters.

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

Delen via

Overzicht van dialoogvensters (WPF .NET)

Meldingsvensters

Algemene dialoogvensters

Aangepaste dialoogvensters

Een dialoogvenster implementeren

UI-elementen die een dialoogvenster openen

Menu-items

Knopen

Een resultaat retourneren

Het antwoord verwerken

Dialoogvenster Modusloos

Zie ook

Aanvullende resources

Delen via

Overzicht van dialoogvensters (WPF .NET)

Meldingsvensters

Algemene dialoogvensters

Aangepaste dialoogvensters

Een dialoogvenster implementeren

UI-elementen die een dialoogvenster openen

Menu-items

Knopen

Een resultaat retourneren

Modale dialoogvensters

Het antwoord verwerken

Dialoogvenster Modusloos

Zie ook

Aanvullende resources