Kurz: Vytvoření jednoduché aplikace WPF pomocí jazyka C#

Po dokončení tohoto kurzu se seznámíte s mnoha nástroji, dialogovými okny a návrháři, které můžete použít při vývoji aplikací pomocí sady Visual Studio. Vytvoříte aplikaci "Hello, World", navrhnete uživatelské rozhraní, přidáte kód a ladíte chyby, zatímco se dozvíte o práci v integrovaném vývojovém prostředí (IDE).

Požadavky

• Pokud jste visual Studio ještě nenainstalovali, přejděte na stránku pro stažení sady Visual Studio a nainstalujte ji zdarma.
• Ujistěte se, že je nainstalovaná úloha vývoje desktopových aplikací .NET. Tuto konfiguraci můžete ověřit v Instalační program pro Visual Studio.
• Pro účely tohoto kurzu můžete použít rozhraní .NET Framework nebo .NET Core. .NET Core je novější, modernější architektura. .NET Core vyžaduje Visual Studio 2019 verze 16.3 nebo novější.

Co je WPF (Windows Presentation Foundation)?

WPF nebo Windows Presentation Foundation je architektura uživatelského rozhraní (uživatelského rozhraní), která vytváří desktopové klientské aplikace. Vývojová platforma WPF podporuje širokou paletu funkcí pro vývoj aplikací, například model aplikace, prostředky, ovládací prvky, grafiku, rozložení, datové vazby, dokumenty a zabezpečení.

WPF je součástí .NET, takže pokud jste dříve vytvořili aplikace s .NET pomocí ASP.NET nebo model Windows Forms, měli byste mít zkušenosti s programováním. WPF používá XAML jazyka EXTENSIBLE Application Markup Language k poskytnutí deklarativního modelu pro programování aplikací. Další informace naleznete v tématu WPF .NET přehled.

Nastavení integrovaného vývojového prostředí (IDE)

Při spuštění sady Visual Studio se nejprve otevře úvodní okno. Výběrem možnosti Pokračovat bez kódu otevřete vývojové prostředí. Zobrazí se okna nástrojů, nabídky a panely nástrojů a hlavní prostor okna. Okna nástrojů jsou ukotvená na levé a pravé straně okna aplikace. Vyhledávací pole, řádek nabídek a standardní panel nástrojů se nachází v horní části. Při načítání řešení nebo projektu se editory a návrháři zobrazí v centrálním prostoru okna aplikace. Při vývoji aplikace strávíte většinu času v této centrální oblasti.

Vytvoření projektu

Při vytváření aplikace v systému Visual Studio je třeba nejprve vytvořit projekt a řešení. V tomto příkladu vytvoříte projekt WPF (Windows Presentation Foundation).

1. Otevřete sadu Visual Studio.

2. V úvodním okně zvolte Vytvořit nový projekt.

   

3. Na obrazovce Vytvořit nový projekt vyhledejte "WPF", zvolte aplikaci WPF a pak zvolte Další.

   

4. Na další obrazovce pojmenujte projekt HelloWPFApp a zvolte Další.

   

5. V okně Další informace ověřte, že je pro cílovou architekturu vybraná rozhraní .NET 8.0. Pak zvolte Vytvořit.

   

Visual Studio vytvoří projekt a řešení HelloWPFApp a Průzkumník řešení zobrazí různé soubory. Návrhář WPF zobrazuje návrhové zobrazení a zobrazení XAML MainWindow.xaml v rozděleném zobrazení. Rozdělovač můžete posunout tak, aby se zobrazilo více nebo méně zobrazení. Můžete se rozhodnout zobrazit jenom vizuální zobrazení nebo jenom zobrazení XAML.

Poznámka:

Další informace o jazyku XAML (eXtensible Application Markup Language) najdete na stránce Přehled XAML pro WPF .

Poté, co jste projekt vytvořili, jej můžete upravit. Uděláte to tak, že v nabídce Zobrazení zvolíte okno Vlastnosti nebo stisknete klávesu F4. Potom můžete zobrazit a změnit možnosti pro položky projektu, ovládací prvky a další položky v aplikaci.

Návrh uživatelského rozhraní (UI)

Pokud návrhář není otevřený, vyberte MainWindow.xaml a stisknutím kláves Shift+F7 otevřete návrháře.

Do této aplikace přidáme tři typy ovládacích prvků: TextBlock ovládací prvek, dva RadioButton ovládací prvky a Button ovládací prvek.

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

1. Stisknutím kombinace kláves Ctrl+Q aktivujte vyhledávací pole a zadejte Panel nástrojů. V seznamu výsledků zvolte Zobrazit > sadu nástrojů .

2. V sadě nástrojů rozbalte uzel Běžných ovládacích prvků WPF a zobrazte ovládací prvek TextBlock.

   

3. Přidejte na návrhovou plochu ovládací prvek TextBlock tak, že vyberete položku TextBlock a přetáhnete ho do okna na návrhové ploše. Na střed ovládacího prvku v horní části okna. Pokyny můžete použít ke středu ovládacího prvku.

   Okno by mělo vypadat podobně jako na následujícím obrázku:

   

   Kód XAML by měl vypadat přibližně jako v následujícím příkladu:

   <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
   </Grid>
   

Přizpůsobení textu v bloku textu

1. V zobrazení XAML vyhledejte kód pro TextBlock a změňte atribut Text z TextBox na Select a message option and then choose the Display button.

   Kód XAML by měl vypadat přibližně jako v následujícím příkladu:

   <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
   </Grid>
   

2. Pokud chcete, znovu nastavte objekt TextBlock na střed a uložte změny stisknutím ctrl +S nebo pomocí položky nabídky Soubor .

Dále do formuláře přidáte dva ovládací prvky RadioButton .

Přidání tlačítek přepínače

1. V sadě nástrojů vyhledejte ovládací prvek RadioButton.

   

2. Přidejte dva ovládací prvky RadioButton na návrhovou plochu tak, že zvolíte položku RadioButton a přetáhnete ho do okna na návrhové ploše. Přesuňte tlačítka (tak, že je vyberete a použijete šipkové klávesy), aby se tlačítka zobrazovala vedle sebe pod ovládacím tlačítkem TextBlock. Pokyny můžete použít k zarovnání ovládacích prvků.

   Okno aplikace by mělo vypadat takto:

   

3. V okně Vlastnosti levého ovládacího prvku RadioButton změňte vlastnost Name (vlastnost v horní části okna Properties ) na HelloButton.

   

4. V okně Vlastnosti pravého ovládacího prvku RadioButton změňte vlastnost Name na GoodbyeButtona pak uložte změny.

Dále přidáte zobrazovaný text pro každý ovládací prvek RadioButton. Následující postup aktualizuje vlastnost Content ovládacího prvku RadioButton.

Přidání zobrazovaného textu pro každé přepínač

1. Aktualizujte atribut Content pro dvě přepínače HelloButton a GoodbyeButton na "Hello" a "Goodbye" v XAML. Kód XAML by teď měl vypadat podobně jako v následujícím příkladu:

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
   </Grid>
   

Nastavení přepínače, které má být ve výchozím nastavení zaškrtnuté

V tomto kroku nastavíme funkci HelloButton tak, aby byla ve výchozím nastavení zaškrtnutá, aby byla vždy vybrána jedna ze dvou přepínačů.

1. V zobrazení XAML vyhledejte kód pro HelloButton.

2. Přidejte atribut IsChecked a nastavte ho na Hodnotu True. Konkrétně přidejte IsChecked="True".

   Kód XAML by teď měl vypadat podobně jako v následujícím příkladu:

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
   </Grid>
   

Posledním prvkem uživatelského rozhraní, který přidáte, je ovládací prvek Button .

Přidání ovládacího prvku tlačítka

1. V sadě nástrojů najděte ovládací prvek Tlačítko a potom ho přidejte na návrhovou plochu pod ovládacími prvky RadioButton přetažením do formuláře v návrhovém zobrazení. Pokyny vám můžou pomoct na střed ovládacího prvku.

2. V zobrazení XAML změňte hodnotu obsahu ovládacího prvku Tlačítko z Content="Button" na Content="Display"a uložte změny.

   Okno by mělo vypadat podobně jako na následujícím snímku obrazovky.

   

   Kód XAML by teď měl vypadat podobně jako v následujícím příkladu:

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
        <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75"/>
   </Grid>
   

Přidání kódu na tlačítko zobrazení

Když se tato aplikace spustí, zobrazí se po výběru přepínače uživatele okno se zprávou a pak zvolí tlačítko Zobrazit . Jedno okno se zprávou se zobrazí pro Hello a další se zobrazí pro Goodbye. Chcete-li toto chování vytvořit, přidáte kód do Button_Click události v MainWindow.xaml.cs.

1. Na návrhové ploše poklikejte na tlačítko Zobrazit .

   Otevře se mainWindow.xaml.cs s kurzorem Button_Click v události.

   private void Button_Click(object sender, RoutedEventArgs e)
   {
   
   }
   

   Když dvakrát kliknete na tlačítko Zobrazit , Click="Button_Click" přidá se do XAML.

   Kód XAML by teď měl vypadat podobně jako v následujícím příkladu:

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
        <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
   </Grid>
   

2. Zadejte následující kód:

   if (HelloButton.IsChecked == true)
   {
        MessageBox.Show("Hello.");
   }
   else if (GoodbyeButton.IsChecked == true)
   {
       MessageBox.Show("Goodbye.");
   }
   

3. Uložte aplikaci.

Ladění a testování aplikace

Dále ladíte aplikaci a vyhledáte chyby a otestujete, že se obě okna zpráv zobrazují správně. Následující pokyny vám řeknou, jak sestavit a spustit ladicí program, ale později si můžete přečíst sestavení aplikace WPF (WPF) a ladění WPF další informace.

Změna názvu MainWindow.xaml

Dáme MainWindow konkrétnější název. V Průzkumník řešení klikněte pravým tlačítkem na MainWindow.xaml a zvolte Přejmenovat. Přejmenujte soubor na Greetings.xaml.

Vyhledání a oprava chyb

V tomto kroku zjistíte chybu, kterou jsme dříve způsobili změnou názvu souboru MainWindow.xaml .

Spusťte ladění a vyhledejte chybu.

1. Ladicí program spusťte stisknutím klávesy F5 nebo výběrem možnosti Ladit a pak spusťte ladění.

   Zobrazí se okno Režim přerušení a výstupníokno indikuje, že došlo k výluce IOException: Nelze najít prostředek mainwindow.xaml.

   

2. Zastavte ladicí program tak, že zvolíte >Ladění zastavit ladění.

Na začátku tohoto kurzu jsme přejmenovali MainWindow.xaml na Greetings.xaml , ale kód stále odkazuje na MainWindow.xaml jako spouštěcí identifikátor URI pro aplikaci, takže projekt nejde spustit.

Zadání souboru Greetings.xaml jako spouštěcího identifikátoru URI

1. V Průzkumník řešení otevřete soubor App.xaml.

2. Přejděte StartupUri="MainWindow.xaml" na StartupUri="Greetings.xaml"a uložte změny.

Jako volitelný krok zabrání nejasnostem při změně názvu okna aplikace tak, aby odpovídalo tomuto novému názvu.

1. V Průzkumník řešení otevřete soubor Greetings.xaml, který jste právě přejmenovali.

2. Změňte hodnotu vlastnosti Window.Title z Title="MainWindow" na Title="Greetings"a uložte změny.

Znovu spusťte ladicí program (stiskněte klávesu F5). Teď byste měli vidět okno Greetings vaší aplikace.

Teď zavřete okno aplikace a zastavte ladění.

Ladění pomocí zarážek

Kód můžete otestovat během ladění přidáním některých zarážek. Zarážky můžete přidat tak, že kliknete >na levý okraj editoru vedle řádku kódu, ke kterému chcete přerušení dojít, nebo stisknutím klávesy F9.

Přidání zarážek

1. Otevřete soubor Greetings.xaml.cs a vyberte následující řádek: MessageBox.Show("Hello.")

2. Pokud chcete přidat zarážku z nabídky, vyberte Ladit a potom Přepnout zarážku.

   Na levém okraji okna editoru se vedle řádku kódu zobrazí červený kruh.

3. Vyberte následující řádek: MessageBox.Show("Goodbye.").

4. Stisknutím klávesy F9 přidejte zarážku a stisknutím klávesy F5 spusťte ladění.

5. V okně Pozdravy zvolte přepínač Hello a pak zvolte tlačítko Zobrazit.

   Čára MessageBox.Show("Hello.") je zvýrazněná žlutou barvou. V dolní části integrovaného vývojového prostředí jsou okna Automatické hodnoty, Místní hodnoty a Kukátka ukotvená na levé straně a zásobník volání, zarážky, výjimky Nastavení, příkaz, okamžité a výstupní okna jsou ukotvena společně na pravé straně.

   

6. Na řádku nabídek zvolte Ladit>krok ven.

   Aplikace obnoví provádění a zobrazí se okno se zprávou "Hello".

7. Kliknutím na tlačítko OK v okně zprávy ho zavřete.

8. V okně Pozdravy zvolte přepínač Sbohem a pak zvolte tlačítko Zobrazit.

   Čára MessageBox.Show("Goodbye.") je zvýrazněná žlutou barvou.

9. Pokud chcete pokračovat v ladění, zvolte klávesu F5 . Když se zobrazí okno se zprávou, zavřete ho kliknutím na tlačítko OK v poli zprávy.

10. Zavřete okno aplikace a zastavte ladění.

11. Na řádku nabídek zvolte Ladit>Zakázat všechny zarážky.

Zobrazení reprezentace prvků uživatelského rozhraní

Ve spuštěné aplikaci by se měl zobrazit widget, který se zobrazí v horní části okna. Widget je pomocník modulu runtime, který poskytuje rychlý přístup k některým užitečným funkcím ladění. Vyberte první tlačítko, přejít do živého vizuálního stromu. Mělo by se zobrazit okno se stromem, který obsahuje všechny vizuální prvky stránky. Rozbalte uzly a vyhledejte tlačítka, která jste přidali.

Sestavení verze pro vydání aplikace

Teď, když jste ověřili, že všechno funguje, můžete připravit sestavení vydané verze aplikace.

1. V hlavní nabídce vyberte Sestavit>čisté řešení, abyste odstranili přechodné soubory a výstupní soubory vytvořené během předchozích sestavení. Tento krok není povinný, ale vyčistí výstupy sestavení ladění.

2. Pomocí ovládacího prvku rozevíracího seznamu na panelu nástrojů změňte konfiguraci sestavení pro HelloWPFApp z Debug na Release (v současné době říká Debug).

3. Sestavte řešení tak, že zvolíte Sestavit>řešení.

Blahopřejeme k dokončení tohoto kurzu! Soubor .exe, který jste vytvořili ve svém řešení a adresáři projektu (...\HelloWPFApp\HelloWPFApp\bin\Release).

Další kroky

Blahopřejeme k dokončení tohoto kurzu! Další informace najdete v následujících kurzech.

Pokračujte dalšími kurzy WPF.

Viz také

• Tipy pro vyšší produktivitu