Sdílet prostřednictvím

Kurz: Vytvoření aplikace WPF (Windows Presentation Foundation) pomocí technologie .NET

V tomto kurzu se dozvíte, jak pomocí Visual Studio vytvořit aplikaci Windows Presentation Foundation (WPF (Windows Presentation Foundation)). Pomocí Visual Studio přidáte ovládací prvky do oken a zpracujete události. Na konci tohoto kurzu máte jednoduchou aplikaci, která přidává názvy do seznamu.

V tomto kurzu se naučíte:

  • Vytvořte novou WPF (Windows Presentation Foundation) aplikaci.
  • Přidání ovládacích prvků do okna
  • Zpracování řídicích událostí za účelem poskytování funkcí aplikace
  • Spustit aplikaci.

Tady je náhled aplikace vytvořené v tomto kurzu:

Dokončená ukázková aplikace pro tutoriál WPF (Windows Presentation Foundation)

Požadavky

Vytvoření aplikace WPF (Windows Presentation Foundation)

Prvním krokem k vytvoření nové aplikace je otevření Visual Studio a vygenerování aplikace ze šablony.

  1. Otevřete Visual Studio.

  2. Vyberte Vytvořit nový projekt.

    A snímek obrazovky s úvodním dialogem z Visual Studio 2026. Tlačítko Vytvořit nový projekt je zvýrazněné červeným rámečkem.

  3. Do pole Hledat šablony zadejte wpf a počkejte, až se zobrazí výsledky hledání.

  4. V rozevíracím seznamu code zvolte C# nebo Visual Basic.

  5. V seznamu šablon vyberte WPF (Windows Presentation Foundation) Application a pak vyberte Dalši.

    Důležité

    Nevybírejte šablonu aplikace WPF (Windows Presentation Foundation) (technologie .NET Framework).

    Následující obrázek ukazuje šablony projektů c# i Visual Basic technologie .NET. Pokud jste použili filtr jazyka kódu , zobrazí se odpovídající šablona.

    Screenshot dialogového okna 'Vytvoření nového projektu' ve Visual Studiu s 'wpf' v poli pro hledání a se zvýrazněnými šablonami aplikací WPF (Windows Presentation Foundation).

  6. V okně Konfigurovat nový projekt nastavte název projektu na Názvy a vyberte Další.

    Projekt můžete také uložit do jiné složky úpravou cesty Umístění .

    Snímek obrazovky dialogového okna 'Konfigurace nového projektu' z Visual Studio 2026. Textové pole 'Název projektu' obsahuje slovo

  7. Nakonec v okně Přidatné informace Vyberte technologie .NET 10.0 (dlouhodobá podpora) pro nastavení Framework a pak vyberte Create.

    Snímek obrazovky s dialogovým oknem

Po Visual Studio vygenerování aplikace se otevře okno návrháře XAML pro výchozí okno MainWindow. Pokud návrhář není viditelný, dvakrát klikněte na soubor MainWindow.xaml v okně Průzkumník řešení, abyste otevřeli návrháře.

Důležité části Visual Studio

Podpora WPF (Windows Presentation Foundation) v Visual Studio má pět důležitých komponent, se kterými pracujete při vytváření aplikace:

Důležité součásti Visual Studio 2026 byste měli vědět při vytváření projektu WPF (Windows Presentation Foundation) pro technologie .NET.

  1. Průzkumník řešení

    V tomto okně se zobrazí všechny soubory projektu, kód, okna a zdroje.

  2. Vlastnosti

    Toto okno zobrazuje nastavení vlastností, která můžete nakonfigurovat na základě kontextu vybrané položky. Pokud například vyberete položku z Průzkumník řešení, zobrazí se nastavení související se souborem. Pokud je vybrán objekt v Návrháři , zobrazí se vlastnosti ovládacího prvku nebo okna.

  3. Skříňka na nářadí

    Sada nástrojů obsahuje všechny ovládací prvky, které můžete přidat na návrhovou plochu. Pokud chcete přidat ovládací prvek na aktuální plochu, poklikejte na ovládací prvek nebo ho přetáhněte do návrháře. Místo toho je běžné použít okno editoru kódu XAML k návrhu uživatelského rozhraní (UI) při použití okna návrháře XAML k zobrazení náhledu výsledků.

  4. Návrhář XAML

    Toto je návrhář dokumentu XAML. Je interaktivní a objekty můžete přetáhnout z panelu nástrojů. Výběrem a přesunutím položek v návrháři můžete vizuálně vytvořit uživatelské rozhraní pro vaši aplikaci.

    Když jsou návrhář i editor viditelné, změny v jednom se projeví i v druhém.

    Když vyberete položky v návrháři, okno Vlastnosti zobrazí vlastnosti a atributy o daném objektu.

  5. Editor kódu XAML

    Toto je editor kódu XAML pro dokument XAML. Editor kódu XAML představuje způsob, jak vytvořit uživatelské rozhraní ručně bez návrháře. Návrhář může automaticky nastavit vlastnosti ovládacího prvku při přidání ovládacího prvku do návrháře. Editor kódu XAML poskytuje mnohem větší kontrolu.

    Když jsou návrhář i editor viditelné, změny v jednom se projeví i v druhém. Při procházení stříškou textu v editoru kódu se v okně Vlastnosti zobrazí vlastnosti a atributy objektu.

Prozkoumat XAML

Po vytvoření projektu se otevře editor kódu XAML. Zobrazuje minimální množství kódu XAML pro zobrazení okna. Pokud editor není otevřený, poklikejte na položku MainWindow.xaml v okně Průzkumník řešení. Měl by se zobrazit kód XAML podobný následujícímu příkladu:

<Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

Důležité

Pokud kódujete v Visual Basic, xaml se mírně liší, konkrétně atribut x:Class="..". XAML ve Visual Basicu používá název třídy objektu a vynechá obor názvů pro třídu.

Abychom lépe pochopili XAML, pojďme si ho rozdělit. XAML je jednoduše XML, které WPF (Windows Presentation Foundation) zpracovává pro vytvoření uživatelského rozhraní. Abyste pochopili XAML, měli byste se alespoň seznámit se základy XML.

Kořenový adresář dokumentu představuje typ objektu popsaného souborem XAML. Soubor deklaruje osm atributů a obvykle patří do tří kategorií:

  • Obory názvů XML

    Obor názvů XML poskytuje strukturu XML. Určuje, jaký obsah XML můžete deklarovat v souboru.

    Hlavní atribut importuje obor názvů XML pro celý soubor. V tomto případě mapuje na typy, které jsou deklarovány WPF (Windows Presentation Foundation). Ostatní obory názvů XML deklarují předponu a importují další typy a objekty pro soubor XAML. Obor názvů například deklaruje předponu a mapuje na objekty deklarované vaším projektem, které jsou deklarovány v oboru názvů kódu.

  • atribut

    Tento atribut mapuje <Window> na typ definovaný kódem: MainWindow.xaml.cs nebo MainWindow.xaml.vb, což je třída Names.MainWindow v jazyce C# a MainWindow v Visual Basic.

  • atribut

    Jakýkoli normální atribut, který deklarujete u objektu XAML, nastaví vlastnost tohoto objektu. V tomto případě atribut nastaví vlastnost.

Změna okna

V naší ukázkové aplikaci je toto okno příliš velké a záhlaví není popisné. Pojďme to opravit.

  1. Nejprve spusťte aplikaci stisknutím klávesy F5 nebo výběrem možnosti Laditspustit ladění z nabídky.

    Zobrazí se výchozí okno vygenerované šablonou bez jakýchkoli ovládacích prvků a název MainWindow:

    Prázdná aplikace WPF (Windows Presentation Foundation)

  2. Změňte název okna nastavením na .

  3. Změňte velikost okna nastavením na a na .

    <Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="Names" Height="180" Width="260">
    <Grid>
        
    </Grid>
</Window>

Příprava rozložení

WPF (Windows Presentation Foundation) poskytuje výkonný systém rozložení s mnoha různými ovládacími prvky rozložení. Ovládací prvky rozložení pomáhají umisťovat a měnit velikost podřízených ovládacích prvků a mohou to udělat i automaticky. Výchozí ovládací prvek rozložení poskytovaný v tomto XAML je ovládací prvek .

Ovládací prvek mřížky umožňuje definovat řádky a sloupce, podobně jako tabulka, a umístit ovládací prvky do hranici určité kombinace řádků a sloupců. Do mřížky můžete přidat libovolný počet podřízených ovládacích prvků nebo ostatních prvků pro rozložení. Můžete například umístit jiný ovládací prvek do konkrétní kombinace řádku a sloupce, a tato nová mřížka pak může definovat více řádků a sloupců a mít vlastní podřízené položky.

Řídicí prvek mřížky umístí své podřízené ovládací prvky do řádků a sloupců. Mřížka má vždy jeden řádek a sloupec deklarovaný, což znamená, že mřížka je ve výchozím nastavení jedna buňka. Toto výchozí nastavení neposkytuje velkou flexibilitu při umísťování ovládacích prvků.

Upravte rozložení mřížky pro ovládací prvky požadované pro tuto aplikaci.

  1. Přidejte do elementu nový atribut: .

    Toto nastavení přivádí mřížku z okrajů okna a bude vypadat trochu hezčí.

  2. Definujte dva řádky a dva sloupce a rozdělte mřížku do čtyř buněk:

    <Grid Margin="10">
    
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    
</Grid>

  3. Vyberte mřížku v editoru kódu XAML nebo návrháři XAML. Návrhář XAML zobrazuje každý řádek a sloupec:

    WPF (Windows Presentation Foundation) aplikace s okrajem nastaveným na mřížce

Přidání prvního ovládacího prvku

Teď, když je mřížka nakonfigurovaná, můžete do ní začít přidávat ovládací prvky. Nejprve přidejte popiskový ovládací prvek.

  1. Vytvořte nový prvek uvnitř elementu za definicemi řádků a sloupců. Nastavte obsah elementu na řetězcovou hodnotu :

    <Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>

</Grid>

    Definuje obsah . Některé ovládací prvky chápou, jak zpracovávat obsah, jiné ne. Obsah ovládacího prvku se mapuje na vlastnost. Pokud nastavíte obsah prostřednictvím syntaxe atributů XAML, použijte tento formát: . Oba způsoby dosáhnou téhož výsledku a nastaví obsah popisku tak, aby zobrazoval text.

    Popisek zabírá polovinu okna, jelikož byl automaticky umístěn na první řádek a sloupec mřížky. Pro první řádek nepotřebujete tolik místa, protože tento řádek použijete jenom pro popisek.

  2. Změňte atribut prvního z na .

    Hodnota automaticky přizpůsobuje řádek mřížky velikosti svého obsahu, v tomto případě popisku ovládacího prvku.

    <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

    Návrhář teď zobrazuje popisek, který zabírá malou část dostupné výšky. Pro další řadu je více místa.

    WPF (Windows Presentation Foundation) aplikace s okrajem nastaveným na mřížce a popiskem ovládacího prvku v prvním řádku

Umístění ovládacího prvku

Promluvme si o umístění ovládacích prvků. Popisek, který jste vytvořili v předchozí části, se automaticky umístí do řádku 0 a sloupce 0 mřížky. Číslování řádků a sloupců začíná na 0 a zvyšuje se o 1. Ovládací prvek o mřížce nic neví a ovládací prvek nedefinuje žádné vlastnosti pro řízení jeho umístění v mřížce.

Jak ovládací prvek řeknete, aby používal jiný řádek nebo sloupec, když ovládací prvek nemá žádné znalosti mřížky? Připojené vlastnosti! Mřížka využívá systém vlastností poskytovaný WPF (Windows Presentation Foundation).

Ovládací prvek mřížky definuje nové vlastnosti, které mohou podřízené ovládací prvky připojit na sebe. Vlastnosti ve skutečnosti neexistují na samotném ovládacím prvku, ale jakmile se do mřížky přidají, zpřístupní se ovládacímu prvku.

Mřížka definuje dvě vlastnosti pro určení umístění řádku a sloupce podřízeného ovládacího prvku: a . Pokud tyto vlastnosti z ovládacího prvku vynecháte, výchozí hodnoty jsou 0. Ovládací prvek se tedy umístí do řádku a sloupce mřížky. Zkuste změnit umístění ovládacího prvku nastavením atributu na :

<Label Grid.Column="1">Names</Label>

Všimněte si, že popisek se přesunul do druhého sloupce. K umístění dalších ovládacích prvků, které vytvoříte, můžete použít vlastnosti a připojené vlastnosti. Prozatím ale obnovte popisek do sloupce 0.

Vytvořte seznamovou skříňku s názvy

Teď, když má mřížka správnou velikost a vytvořený popisek, přidejte na řádek pod popisek ovládací prvek seznam.

  1. Deklarujte ovládací prvek pod ovládacím prvkem.

  2. Nastavte vlastnost na .

  3. Nastavte vlastnost na .

    Jakmile je ovládací prvek pojmenován, můžete na něj v kódu odkazovat. Přiřaďte k ovládacímu prvku název pomocí atributu .

Xaml by měl vypadat takto:

<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>
    <ListBox Grid.Row="1" x:Name="lstNames" />

</Grid>

Přidání zbývajících ovládacích prvků

Přidejte textové pole a tlačítko. Uživatel pomocí těchto ovládacích prvků zadá jméno, které chcete přidat do seznamu. Místo vytváření dalších řádků a sloupců v mřížce pro uspořádání těchto ovládacích prvků vložte tyto ovládací prvky do ovládacího prvku rozložení.

Panel zásobníku se liší od mřížky v tom, jak umísťuje ovládací prvky. Když použijete připojené vlastnosti a k určení, kam chcete umístit ovládací prvky v mřížce, panel zásobníku funguje automaticky. Uspořádá jednotlivé podřízené ovládací prvky postupně. Řadí jednotlivé ovládací prvky za sebou.

  1. Podřiďte ovládací prvek pod správu jiného ovládacího prvku.

  2. Nastavte vlastnost na .

  3. Nastavte vlastnost na .

  4. Nastavte na .

    <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Label>Names</Label>
<ListBox Grid.Row="1" x:Name="lstNames" />

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    
</StackPanel>

    Dříve jste použili atribut v mřížce, ale umístili jste pouze jednu hodnotu . Tento okraj má hodnotu , která se velmi liší od . Vlastnost okraje je typ a může interpretovat obě hodnoty. Tloušťka definuje prostor kolem každé strany obdélníkového rámečku, vlevo, nahoře, vpravo, dole. Pokud je hodnota okraje jedinou hodnotou, použije tuto hodnotu pro všechny čtyři strany.

  5. Uvnitř ovládacího prvku vytvořte ovládací prvek.

    1. Nastavte vlastnost na .

  6. Nakonec, po , stále uvnitř , vytvořte ovládací prvek.

    1. Nastavte vlastnost na .
    2. Nastavte na .
    3. Nastavte obsah na hodnotu .

Xaml by měl vypadat takto:

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0">Add Name</Button>
</StackPanel>

Rozložení okna je hotové. Aplikace ale nemá žádnou logiku, která by ve skutečnosti fungovala. Dále musíte připojit řídicí události k kódu a získat aplikaci, aby něco skutečně udělala.

Přidejte kód pro událost „Click“

vytvořené má událost , kterou aplikace spustí, když uživatel stiskne tlačítko. Přihlaste se k odběru této události a přidejte kód pro přidání názvu do seznamu. Pomocí atributů XAML se přihlašujte k odběru událostí, stejně jako je používáte k nastavení vlastností.

  1. Vyhledejte ovládací prvek.

  2. Nastavte atribut na .

    <StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0" Click="ButtonAddName_Click">Add Name</Button>
</StackPanel>

  3. Vygenerujte kód obslužné rutiny události. Klikněte pravým tlačítkem myši a vyberte Přejít k definici.

    Tato akce vygeneruje metodu v kódu, která odpovídá vámi zadanému názvu obslužné rutiny.

    private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{

}

    Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)

End Sub

  4. Dále přidejte následující kód, který provede tyto tři kroky:

    1. Ujistěte se, že textové pole obsahuje název.
    2. Ověřte, že název zadaný v textovém poli ještě neexistuje.
    3. Přidejte název do seznamu.
    private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{
    if (!string.IsNullOrWhiteSpace(txtName.Text) && !lstNames.Items.Contains(txtName.Text))
    {
        lstNames.Items.Add(txtName.Text);
        txtName.Clear();
    }
}

    Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)
    If Not String.IsNullOrWhiteSpace(txtName.Text) And Not lstNames.Items.Contains(txtName.Text) Then
        lstNames.Items.Add(txtName.Text)
        txtName.Clear()
    End If
End Sub

Spuštění aplikace

Po zpracování události spusťte aplikaci. Zobrazí se okno a do textového pole můžete zadat název. Přidejte název výběrem tlačítka.

Spuštění WPF (Windows Presentation Foundation) aplikace pro technologie .NET ve Visual Studiu 2026.

Související obsah

  • Last updated on