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

V tomto kurzu se dozvíte, jak pomocí sady Visual Studio vytvořit novou aplikaci WINDOWS Presentation Foundation (WPF). V sadě Visual Studio přidáte ovládací prvky do oken pro návrh uživatelského rozhraní aplikace a zpracujete vstupní události z těchto ovládacích prvků pro interakci s uživatelem. 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:

Požadavky

• Visual Studio 2022 verze 17.12 nebo novější
  • Výběr úlohy vývoje desktopových aplikací .NET
  • Vyberte jednotlivou komponentu .NET 9.

Vytvoření aplikace WPF

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

1. Otevřete sadu Visual Studio.

2. Vyberte Vytvořit nový projekt.

   

3. Do pole Hledat šablony zadejte wpf a stiskněte Enter.

4. V rozevíracím seznamu jazyka kódu zvolte C# nebo Visual Basic.

5. 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 pouze šablona pro daný jazyk.

   

6. V okně Konfigurovat nový projekt postupujte takto:

   1. Do pole Název projektu zadejte Názvy.
   2. Zaškrtněte políčko Umístit řešení a projekt do stejného adresáře.
   3. Volitelně můžete zvolit jiné umístění pro uložení kódu.
   4. Vyberte tlačítko Další.

   

7. V okně Další informace vyberte rozhraní .NET 9.0 (Standardní podpora termínů) pro cílovou architekturu. Vyberte tlačítko Vytvořit.

   

Po vygenerování aplikace by visual Studio mělo otevřít 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:

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

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

2. Vlastnosti

   Toto okno zobrazuje nastavení vlastností, která můžete nakonfigurovat na základě vybrané položky. Pokud například vyberete položku z Průzkumník řešení, zobrazí se nastavení vlastností související se souborem. Pokud v Návrháři vyberete objekt, zobrazí se nastavení prvku. Pokud jde o předchozí obrázek, byl v návrháři vybrán záhlaví okna.

3. Sada nástrojů

   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 na povrch. 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.

Prozkoumání XAML

Po vytvoření projektu se editor kódu XAML zobrazí s minimálním množstvím kódu XAML, aby se zobrazilo okno. 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ý zpracovává WPF 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. Deklarují se osm atributů a obvykle patří do tří kategorií:

• Obory názvů XML

  Obor názvů XML poskytuje strukturu XML a určuje, jaký obsah XML lze deklarovat v souboru.

  Hlavní xmlns atribut importuje obor názvů XML pro celý soubor a v tomto případě se mapuje na typy deklarované 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 deklarovaný 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.

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

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

   

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

3. Změňte velikost okna nastavením Width na 180 a Height 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í zadaný v tomto xaml je <Grid> 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 jiných ovládacích prvků 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. To vám ve skutečnosti neposkytuje velkou flexibilitu při umísťování ovládacíchprvkůch

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

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

   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, uvidíte, že 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ůžeme do ní začít přidávat ovládací prvky. Nejprve začněte ovládacím prvku popisku.

1. Vytvořte nový <Label> prvek uvnitř elementu <Grid> za definicemi řádků a sloupců. Nastavte obsah prvku 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. Nastavení obsahu prostřednictvím syntaxe atributu XAML byste použili tento formát: <Label Content="Names" />. Oba způsoby dosáhne stejné věci a nastaví obsah popisku tak, aby zobrazoval text Names.

   Všimněte si, že popisek zabírá polovinu okna, protože se automaticky umístil na první řádek a sloupec mřížky. Pro první řádek nepotřebujeme tolik místa, protože tento řádek použijeme jenom pro popisek.

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

   Všimněte si, že návrhář teď zobrazuje popisek, který zabírá malou velikost dostupné výšky. Teď je víc místa pro další řádek, aby zabírala.

   

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

Promluvme si o umístění ovládacích prvků. Popisek vytvořený v předchozí části se automaticky umístil 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á výkonný 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, jsou k dispozici pro ovládací prvek, jakmile je přidán do mřížky.

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 jsou tyto vlastnosti z ovládacího prvku vynechány, předpokládá se, že mají výchozí hodnoty 0, takže ovládací prvek se 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. Pomocí vlastností a Grid.Row připojených vlastností můžete Grid.Column umístit další ovládací prvky, které vytvoříme. 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.

1. Deklarujte <ListBox /> ovládací prvek pod ovládacím <Label> prvku.

2. Nastavte vlastnost Grid.Row na 1.

3. Nastavte vlastnost x:Name na lstNames.

   Jakmile je ovládací prvek pojmenován, můžete na něj odkazovat v kódu. Název se přiřadí ovládacímu prvku 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ů

Poslední dva ovládací prvky, které přidáme, jsou textové pole a tlačítko, které uživatel použije k zadání jména pro přidání do seznamu. Místo toho, abychom se pokusili vytvořit další řádky a sloupce v mřížce, abychom tyto ovládací prvky uspořádali, vložíme tyto ovládací prvky do <StackPanel> ovládacího prvku rozložení.

Panel zásobníku se liší od mřížky v umístění ovládacích prvků. Zatímco mřížku řeknete, kde mají být ovládací prvky s připojenými Grid.Row vlastnostmiGrid.Column, panel zásobníku automaticky rozloží jednotlivé podřízené ovládací prvky postupně. Každý ovládací prvek je "skládaný" za druhým.

1. Deklarujte <StackPanel> ovládací prvek pod ovládacím <ListBox> prvku.

2. Nastavte vlastnost Grid.Row na 1.

3. Nastavte vlastnost Grid.Column na 1.

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

   Atribut Margin byl dříve použit v mřížce, ale umístili jsme 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.

5. <StackPanel> Uvnitř ovládacího prvku vytvořte <TextBox /> ovládací prvek.

   1. Nastavte vlastnost x:Name na txtName.

6. 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é. Naše aplikace ale nemá žádnou logiku, která by ve skutečnosti fungovala. Dále musíme 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á událost má Click událost, která se vyvolá, když uživatel stiskne tlačítko. Můžete se přihlásit k odběru této události a přidat kód pro přidání názvu do seznamu. Atributy XAML se používají k přihlášení k odběru událostí stejně jako k nastavení vlastností.

1. <Button> Vyhledejte ovládací prvek.

2. Nastavení atributu 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>
   

3. 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á 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
   

Spustit aplikaci

Teď, když je událost zpracována, spusťte aplikaci. Zobrazí se okno a do textového pole můžete zadat název a pak ho přidat kliknutím na tlačítko.

Související obsah

• Další informace o windows Presentation Foundation
• Přehled XAML