Přehled dialogových oken (WPF .NET)

Článek
11/05/2024

Windows Presentation Foundation (WPF) nabízí způsoby návrhu vlastních dialogových oken. Dialogová okna jsou okna, ale s konkrétním záměrem a uživatelským prostředím. Tento článek popisuje, jak funguje dialogové okno a jaké typy dialogových oken můžete vytvářet a používat. Dialogová okna slouží k:

Umožňuje zobrazit konkrétní informace pro uživatele.
Shromážděte informace od uživatelů.
Zobrazení a shromáždění informací
Zobrazí výzvu operačního systému, například okno tisku.
Vyberte soubor nebo složku.

Tyto typy oken se označují jako dialogová okna. Dialogové okno lze zobrazit dvěma způsoby: modální a bezmodální.

Zobrazení modálního dialogového okna uživateli je technika, se kterou aplikace přeruší, co dělala, dokud uživatel dialogové okno nezavře. Obvykle se jedná o výzvu nebo výstrahu. Jiná okna v aplikaci nelze interagovat, dokud se dialogové okno nezavře. Po zavření modálního dialogového okna bude aplikace pokračovat. Nejběžnější dialogová okna slouží k zobrazení otevřeného souboru nebo uložení výzvy k uložení souboru, zobrazení dialogového okna tiskárny nebo zasílání zpráv uživateli s určitým stavem.

Dialogové okno bez režimu nezabrání uživateli v aktivaci jiných oken, když je otevřené. Pokud například uživatel chce najít výskyty určitého slova v dokumentu, hlavní okno často otevře dialogové okno s dotazem uživatele, jaké slovo hledá. Vzhledem k tomu, že aplikace nechce zabránit uživateli v úpravě dokumentu, nemusí být dialogové okno modální. Dialogové okno bez režimu alespoň poskytuje tlačítko Zavřít pro zavření dialogového okna. Další tlačítka můžou být k dispozici pro spouštění konkrétních funkcí, jako je například tlačítko Najít další , aby bylo možné najít další slovo ve vyhledávání slov.

Pomocí WPF můžete vytvořit několik typů dialogových oken, jako jsou pole zpráv, běžná dialogová okna a vlastní dialogová okna. Tento článek popisuje jednotlivé příklady a ukázka dialogového okna obsahuje odpovídající příklady.

Pole zprávy

Okno se zprávou je dialogové okno , které lze použít k zobrazení textových informací a k tomu, aby uživatelé mohli rozhodovat pomocí tlačítek. Následující obrázek znázorňuje pole se zprávou, které položí otázku a poskytne uživateli tři tlačítka pro odpověď na otázku.

Dialogové okno textového procesoru s dotazem, jestli chcete uložit změny dokumentu před zavření aplikace.

Pokud chcete vytvořit okno se zprávou, použijte MessageBox třídu. MessageBox umožňuje konfigurovat text pole se zprávou, název, ikonu a tlačítka.

Další informace naleznete v tématu Jak otevřít okno se zprávou.

Běžná dialogová okna

Systém Windows implementuje různé druhy opakovaně použitelných dialogových oken, která jsou společná pro všechny aplikace, včetně dialogových oken pro výběr souborů a tisku.

Vzhledem k tomu, že tato dialogová okna poskytují operační systém, sdílí se mezi všemi aplikacemi, které běží v operačním systému. Tato dialogová okna poskytují konzistentní uživatelské prostředí a označují se jako běžná dialogová okna. Když uživatel používá společné dialogové okno v jedné aplikaci, nemusí se naučit používat toto dialogové okno v jiných aplikacích.

WPF zapouzdřuje otevřený soubor, uloží soubor, otevřete složku a vytiskne běžná dialogová okna a zpřístupní je jako spravované třídy, které můžete použít.

Dialogové okno Otevřít soubor volané z WPF.

Další informace o běžných dialogových oknech najdete v následujících článcích:

Vlastní dialogová okna

I když jsou běžná dialogová okna užitečná a měla by se používat, pokud je to možné, nepodporují požadavky dialogových oken specifických pro doménu. V těchto případech musíte vytvořit vlastní dialogová okna. Jak uvidíme, dialogové okno je okno se speciálním chováním. Window implementuje toto chování a pomocí okna vytvoříte vlastní modální a bezmodální dialogová okna.

Při vytváření vlastního dialogového okna je potřeba vzít v úvahu řadu aspektů návrhu. I když okno aplikace i dialogové okno obsahují podobnosti, například sdílení stejné základní třídy, dialogové okno se používá pro konkrétní účel. Obvykle se vyžaduje dialogové okno, když potřebujete uživatele vyzvat k zadání nějaké informace nebo odpovědi. Aplikace se obvykle pozastaví, když se zobrazí dialogové okno (modální) a omezí přístup ke zbytku aplikace. Po zavření dialogového okna bude aplikace pokračovat. Konfigurace interakcí do samotného dialogového okna ale není požadavkem.

Když je okno WPF zavřené, nejde ho znovu otevřít. Vlastní dialogová okna jsou okna WPF a platí stejné pravidlo. Informace o zavření okna najdete v tématu Jak zavřít okno nebo dialogové okno.

Implementace dialogového okna

Při návrhu dialogového okna vytvořte pomocí těchto návrhů dobré uživatelské prostředí:

❌ Nepotřebné okno dialogového okna. Prostředí dialogového okna je, aby uživatel zadal některá data nebo zvolil.

✔️ Zadejte tlačítko OK pro zavření okna.

✔️ Nastavte vlastnost tlačítka IsDefault OK tak, aby true uživatel mohl stisknutím klávesy ENTER přijmout a zavřít okno.

✔️ ZVAŽTE přidání tlačítka Zrušit , aby uživatel mohl okno zavřít a označit, že nechce pokračovat.

✔️ Nastavte vlastnost tlačítka IsCancel Zrušit tak, aby true uživatel mohl okno zavřít stisknutím klávesy ESC.

✔️ Nastavte název okna tak, aby přesně popsal, co dialogové okno představuje, nebo co má uživatel s dialogem dělat.

✔️ Nastavte minimální šířku a výšku pro okno, což uživateli brání v změně velikosti okna příliš malé.

✔️ ZVAŽTE zakázání možnosti změnit velikost okna, pokud ShowInTaskbar je nastavena na false. Změnu velikosti můžete zakázat nastavením na ResizeMode NoResize

Tuto konfiguraci ukazuje následující kód.

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

Výše uvedený kód XAML vytvoří okno, které vypadá podobně jako na následujícím obrázku:

Okno dialogového okna pro WPF, které zobrazuje levá, horní, pravá a dolní textová pole.

Prvky uživatelského rozhraní při otevření dialogového okna

Uživatelské prostředí dialogového okna se také rozšíří do řádku nabídek nebo tlačítka okna, které ho otevře. Když položka nabídky nebo tlačítko spustí funkci, která vyžaduje interakci uživatele prostřednictvím dialogového okna, aby funkce mohl pokračovat, měl by ovládací prvek použít tři tečky na konci textu záhlaví:

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

Když položka nabídky nebo tlačítko spustí funkci, která zobrazí dialogové okno, které nevyžaduje interakci uživatele, například dialogové okno O aplikaci, není nutné tři tečky.

Položky nabídky představují běžný způsob, jak uživatelům poskytnout akce aplikace seskupené do souvisejících motivů. Pravděpodobně jste viděli nabídku Soubor v mnoha různých aplikacích. V typické aplikaci položka nabídky Soubor poskytuje způsoby, jak uložit soubor, načíst soubor a vytisknout soubor. Pokud akce zobrazí modální okno, záhlaví obvykle obsahuje tři tečky, jak je znázorněno na následujícím obrázku:

Dvě položky nabídky mají tři tečky: .... To pomáhá uživateli identifikovat, že když vybere tyto položky nabídky, zobrazí se modální okno, které pozastaví aplikaci, dokud ji uživatel nezavře.

Tato technika návrhu je snadný způsob, jak komunikovat s uživateli, co by měli očekávat.

Tlačítka

Můžete postupovat podle stejného principu popsaného v části Položky nabídky. Pomocí tří teček v textu tlačítka označte, že když uživatel stiskne tlačítko, zobrazí se modální dialogové okno. Na následujícím obrázku jsou dvě tlačítka a snadno pochopit, které tlačítko zobrazuje dialogové okno:

Okno WPF zobrazující tlačítka se třemi tečkami označující, která položka zobrazuje dialogové okno.

Vrácení výsledku

Otevření jiného okna, zejména modálního dialogového okna, je skvělý způsob, jak vrátit stav a informace volání kódu.

Když se zobrazí dialogové okno voláním ShowDialog(), kód, který otevřel dialogové okno čeká, dokud ShowDialog metoda nevrátí. Když metoda vrátí, kód, který volal, se musí rozhodnout, zda pokračovat ve zpracování nebo zastavit zpracování. Uživatel to obecně označuje stisknutím tlačítka OK nebo Zrušit v dialogovém okně.

Když je tlačítko OK stisknuto, ShowDialog mělo by být navrženo pro vrácení truea tlačítko Storno vrátit false. Toho dosáhnete nastavením DialogResult vlastnosti při stisknutí tlačítka.

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

DialogResult Vlastnost lze nastavit pouze v případě, že dialogové okno bylo zobrazeno s ShowDialog(). DialogResult Při nastavení vlastnosti se dialogové okno zavře.

Pokud je vlastnost tlačítka nastavena na a okno je otevřeno pomocí ShowDialog(), klávesa ESC zavře okno a nastaví na DialogResult false.trueIsCancel

Další informace o zavření dialogových oken naleznete v tématu Jak zavřít okno nebo dialogové okno.

Zpracování odpovědi

Vrátí ShowDialog() logickou hodnotu, která označuje, zda uživatel přijal nebo zrušil dialogové okno. Pokud uživatele na něco upozorníte, ale nevyžadujete, aby se rozhodl nebo zadal data, můžete odpověď ignorovat. Odpověď lze také zkontrolovat kontrolou DialogResult vlastnosti. Následující kód ukazuje, jak zpracovat odpověď:

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

Dialogové okno bez režimu

Chcete-li zobrazit dialogové okno bez režimu, zavolejte Show(). Dialogové okno by mělo obsahovat aspoň tlačítko Zavřít . Další tlačítka a interaktivní prvky je možné zadat ke spuštění konkrétní funkce, jako je například tlačítko Najít další a najít další slovo ve vyhledávání slov.

Protože bezmodální dialogové okno neblokuje pokračování volajícího kódu, musíte zadat jiný způsob vrácení výsledku. Můžete provést jednu z následujících akcí:

Zveřejnění vlastnosti datového objektu v okně
Zpracujte Window.Closed událost ve volajícím kódu.
Vytvořte události v okně, které jsou vyvolány, když uživatel vybere objekt nebo stiskne konkrétní tlačítko.

Následující příklad používá Window.Closed událost k zobrazení pole zprávy uživateli při zavření dialogového okna. Zobrazená zpráva odkazuje na vlastnost zavřeného dialogového okna. Další informace o zavření dialogových oken naleznete v tématu Jak zavřít okno nebo dialogové okno.

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

Sdílet prostřednictvím

Přehled dialogových oken (WPF .NET)

Pole zprávy

Běžná dialogová okna

Vlastní dialogová okna

Implementace dialogového okna

Prvky uživatelského rozhraní při otevření dialogového okna

Položky nabídky

Tlačítka

Vrácení výsledku

Zpracování odpovědi

Dialogové okno bez režimu

Viz také

Další materiály

Sdílet prostřednictvím

Přehled dialogových oken (WPF .NET)

Pole zprávy

Běžná dialogová okna

Vlastní dialogová okna

Implementace dialogového okna

Prvky uživatelského rozhraní při otevření dialogového okna

Položky nabídky

Tlačítka

Vrácení výsledku

Modální dialogy

Zpracování odpovědi

Dialogové okno bez režimu

Viz také

Další materiály