Kurz: Vytvoření aplikace WPF pomocí .NET

V tomto kurzu se dozvíte, jak pomocí sady Visual Studio vytvořit aplikaci WPF (Windows Presentation Foundation). V sadě Visual Studio přidáváte ovládací prvky do oken a zpracováváte 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 aplikaci WPF.
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:

Kurz dokončené ukázkové aplikace pro WPF

Požadavky

Visual Studio 2026
- Výběr úlohy vývoje desktopových aplikací .NET
- Vyberte jednotlivou komponentu .NET 10.

Vytvoření aplikace WPF

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

Otevřete Visual Studio.
Vyberte Vytvořit nový projekt.
Do pole Hledat šablony zadejte wpf a počkejte, až se zobrazí výsledky hledání.
V rozevíracím seznamu jazyka kódu zvolte C# nebo Visual Basic.
V seznamu šablon vyberte aplikaci WPF a pak vyberte Další.

Důležité

Nevybírejte šablonu aplikace WPF (.NET Framework).

Následující obrázek ukazuje šablony projektů C# i Visual Basic .NET. Pokud jste použili filtr jazyka kódu , zobrazí se odpovídající šablona.
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í .
Nakonec v okně Další informace vyberte .NET 10.0 (dlouhodobá podpora) pro nastavení rozhraní a pak vyberte Vytvořit.

Jakmile Visual Studio aplikaci vygeneruje, otevře okno návrháře XAML pro výchozí okno MainWindow. Pokud návrhář není viditelný, poklikejte na soubor MainWindow.xaml v okně Průzkumník řešení a otevřete návrháře.

Důležité části sady Visual Studio

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

Důležité komponenty sady Visual Studio 2026 byste měli vědět při vytváření projektu WPF pro .NET.

Průzkumník řešení

V tomto okně se zobrazí všechny soubory projektu, kód, okna a zdroje.
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íka ř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.
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ů.
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.
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.

Prozkoumání 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 jazyce Visual Basic, xaml se mírně liší, konkrétně atribut x:Class=".." . XAML v jazyce Visual Basic používá název třídy objektu a vynechá obor názvů do třídy.

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

Kořenový adresář <Window> 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í xmlns atribut importuje obor názvů XML pro celý soubor. V tomto případě je mapováno na typy, které jsou deklarovány WPF. Ostatní obory názvů XML deklarují předponu a importují další typy a objekty pro soubor XAML. Obor názvů například xmlns:local deklaruje předponu local a mapuje na objekty deklarované vaším projektem, které jsou deklarovány v Names oboru názvů kódu.
atribut x:Class

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

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

Změna okna

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

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

Zobrazí se výchozí okno vygenerované šablonou bez jakýchkoli ovládacích prvků a název MainWindow:
Změňte název okna nastavením na Title .Names

Změňte velikost okna nastavením Height na 180 a Width na 260.

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

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í <Grid> kombinace řádků a sloupců a že nová mřížka pak může definovat více řádků a sloupců a mít své vlastní podřízené položky.

Ovládací prvek mřížky umístí 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.

Přidejte do elementu <Grid> nový atribut: Margin="10".

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

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>

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

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.

Vytvořte nový <Label> prvek uvnitř elementu <Grid> za definicemi řádků a sloupců. Nastavte obsah elementu na řetězcovou hodnotu Names:
```
<Grid Margin="10">

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

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

    <Label>Names</Label>

</Grid>
```
Definuje <Label>Names</Label> obsah Names. Některé ovládací prvky chápou, jak zpracovávat obsah, jiné ne. Obsah ovládacího prvku se mapuje na Content vlastnost. Pokud nastavíte obsah prostřednictvím syntaxe atributů XAML, použijte tento formát: <Label Content="Names" />. Oba způsoby dosáhne stejné věci a nastaví obsah popisku tak, aby zobrazoval text Names.

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.
Height Změňte atribut prvního <RowDefinition> z * na Auto.

Hodnota Auto automaticky zvětšuje řádek mřížky na velikost jejího obsahu, v tomto případě ovládací prvek popisek.
```
<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.

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á 0 a přírůstky 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í, který poskytuje WPF.

Ovládací prvek mřížky definuje nové vlastnosti, které se můžou podřízené ovládací prvky připojit k sobě. 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: Grid.Row a Grid.Column. Pokud tyto vlastnosti z ovládacího prvku vynecháte, výchozí hodnoty jsou 0. Ovládací prvek se tedy umístí do řádku 0 a sloupce 0 mřížky. Zkuste změnit umístění ovládacího prvku nastavením atributu <Label>Grid.Column na 1:

<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 Grid.Row vlastnosti a Grid.Column připojené vlastnosti. Prozatím ale obnovte popisek do sloupce 0.

Vytvoření seznamu názvů

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

Deklarujte <ListBox /> ovládací prvek pod ovládacím <Label> prvku.
Nastavte vlastnost Grid.Row na 1.
Nastavte vlastnost x:Name na lstNames.

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 x:Name .

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 <StackPanel> 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 Grid.Row a Grid.Column 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ě. Každý ovládací prvek je "skládaný" za druhým.

Deklarujte <StackPanel> ovládací prvek pod ovládacím <ListBox> prvku.
Nastavte vlastnost Grid.Row na 1.
Nastavte vlastnost Grid.Column na 1.
Nastavte Margin na 5,0,0,0.
```
<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 Margin atribut v mřížce, ale umístili jste pouze jednu hodnotu . 10 Tento okraj má hodnotu 5,0,0,0, která se velmi liší od 10. Vlastnost okraje je Thickness 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.
<StackPanel> Uvnitř ovládacího prvku vytvořte <TextBox /> ovládací prvek.
1. Nastavte vlastnost x:Name na txtName.
Nakonec za <TextBox>, stále uvnitř <StackPanel>, vytvořit <Button> ovládací prvek.
1. Nastavte vlastnost x:Name na btnAdd.
2. Nastavte Margin na 0,5,0,0.
3. Nastavte obsah na Add Namehodnotu .

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řidání kódu události Click

<Button> vytvořené má událost Click, 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í.

<Button> Vyhledejte ovládací prvek.

Nastavte atribut na ClickButtonAddName_Click.

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

Vygenerujte kód obslužné rutiny události. Klikněte pravým tlačítkem myši a ButtonAddName_Click 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
```

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

Ujistěte se, že textové pole obsahuje název.
Ověřte, že název zadaný v textovém poli ještě neexistuje.
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í aplikace WPF pro .NET v sadě Visual Studio 2026

Váš názor

Byla tato stránka užitečná?

Last updated on 2025-12-28