Sdílet prostřednictvím


Kurz: Vytvoření aplikace WPF pomocí jazyka Visual Basic

V tomto kurzu vytvoříte aplikaci pomocí jazyka Visual Basic v integrovaném vývojovém prostředí (IDE) sady Visual Studio. Váš program bude používat architekturu uživatelského rozhraní WPF (Windows Presentation Foundation). V tomto kurzu se seznámíte s mnoha nástroji, dialogovými okny a návrháři, které můžete použít v sadě Visual Studio.

V tomto kurzu se naučíte:

  • Vytvoření projektu
  • Konfigurace okna a přidání textu
  • Přidání tlačítek a kódu
  • Ladění a testování aplikace
  • Ladění pomocí zarážek
  • Sestavení verze

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.

Požadavky

K dokončení tohoto kurzu potřebujete Visual Studio. Navštivte stránku se soubory ke stažení sady Visual Studio pro bezplatnou verzi.

K dokončení tohoto kurzu potřebujete Visual Studio. Navštivte stránku se soubory ke stažení sady Visual Studio pro bezplatnou verzi.

Vytvoření projektu

Při vytváření aplikace v sadě Visual Studio nejprve vytvoříte projekt. V tomto kurzu vytvořte projekt Windows Presentation Foundation.

  1. Otevřete sadu Visual Studio.

  2. Na obrazovce Vytvořit nový projekt vyhledejte WPF a vyberte aplikaci WPF (.NET Framework). Vyberte Další.

    Screenshot of the Create a new project dialog with W P F entered in the search box and the W P F App (.NET Framework) project template selected.

  3. Pojmenujte projekt HelloWPFApp a vyberte Vytvořit.

    Visual Studio vytvoří projekt a řešení HelloWPFApp. Průzkumník řešení zobrazí různé soubory.

    Screenshot shows Solution Explorer with Hello W P F App files.

Návrhář WPF zobrazuje návrhové zobrazení a zobrazení XAML MainWindow.xaml v rozděleném zobrazení.

  1. Otevřete sadu Visual Studio.

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

    Screenshot of the start window in Visual Studio 2022 with the 'Create a new project' option highlighted.

  3. V okně Vytvořit nový projekt vyhledejte "WPF" a v rozevíracím seznamu Všechny jazyky vyberte Visual Basic. Zvolte aplikaci WPF (.NET Framework) a pak zvolte Další.

    Screenshot of the 'Create a new project' dialog with 'WPF' entered in the search box, 'Visual Basic' selected in the languages list, and the 'WPF App (.NET Framework)' project template highlighted.

  4. Pojmenujte projekt HelloWPFApp a vyberte Vytvořit.

    Visual Studio vytvoří projekt a řešení HelloWPFApp. Průzkumník řešení zobrazí různé soubory.

    Screenshot showing the files in the HelloWPFApp project and solution in the Solution Explorer.

Návrhář WPF zobrazuje návrhové zobrazení a zobrazení XAML MainWindow.xaml v rozděleném zobrazení.

Poznámka:

Další informace o jazyku XAML (Application Markup Language) eXtensible najdete v přehledu XAML pro WPF.

Konfigurace okna a přidání textu

Pomocí okna Vlastnosti můžete zobrazit a změnit možnosti pro položky projektu, ovládací prvky a další položky.

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

  2. V zobrazení XAML změňte hodnotu vlastnosti Window.Title z Title="MainWindow" na Title="Greetings".

  3. Na levé straně integrovaného vývojového prostředí sady Visual Studio vyberte kartu Sada nástrojů. Pokud ho nevidíte, vyberte v>řádku nabídek panelu nabídek nebo kombinaci kláves Ctrl+Alt+X.

  4. Pokud chcete najít TextBlock, rozbalte běžné ovládací prvky WPF nebo zadejte text na panelu hledání.

    Screenshot showing the Toolbox window with the TextBlock control highlighted in the list of Common WPF Controls.

  5. Vyberte položku TextBlock a přetáhněte ji do okna na návrhové ploše. Ovládací prvek TextBlock můžete přesunout přetažením. K umístění ovládacího prvku použijte pokyny.

    Screenshot showing the TextBlock control positioned on the Greetings form with the guidelines visible.

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

    <TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
    
  6. V zobrazení XAML vyhledejte kód pro TextBlock a změňte atribut Text :

    Text="Select a message option and then choose the Display button."
    

    V případě potřeby znovu zacentrujte TextBlock.

  7. Uložte aplikaci tak, že vyberete tlačítko Uložit vše na panelu nástrojů. Pokud chcete aplikaci uložit, zvolte v řádku nabídek možnost Uložit>vše pro uložení souboru nebo stiskněte kombinaci kláves Ctrl+Shift+S. Osvědčeným postupem je uložit brzy a často.

Přidání tlačítek a kódu

Vaše aplikace používá dvě přepínače a tlačítko. Pomocí těchto kroků je přidejte. Do tlačítka přidáte kód jazyka Visual Basic. Tento kód odkazuje na výběr přepínače.

  1. Na panelu nástrojů najděte přepínač RadioButton.

    Screenshot showing the Toolbox window with the RadioButton control selected in the list of Common WPF Controls.

  2. Přidejte dva ovládací prvky RadioButton na návrhovou plochu tak , že vyberete položku RadioButton a přetáhnete ji na návrhovou plochu. Tlačítka můžete přesunout tak, že je vyberete a použijete šipkové klávesy. Tlačítka umístěte vedle sebe pod ovládací prvek TextBlock.

    Screenshot showing the Greetings form with a TextBlock control and two radio buttons.

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

    Screenshot showing the Solution Explorer Properties window for the 'HelloButton' RadioButton.

  4. V okně Properties pravého ovládacího prvku RadioButton změňte vlastnost Name na GoodbyeButton.

  5. Aktualizujte atribut Content pro HelloButton a GoodbyeButton do "Hello" xaml a "Goodbye" do souboru XAML.

    <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>
    
  6. V zobrazení XAML vyhledejte kód pro HelloButton a přidejte atribut IsChecked :

    IsChecked="True"
    

    Atribut IsChecked s hodnotou True znamená, že HelloButton je ve výchozím nastavení zaškrtnuté. Toto nastavení znamená, že přepínač je vždy vybraný, i když se program spustí.

  7. V sadě nástrojů vyhledejte ovládací prvek Tlačítko a přetáhněte tlačítko na návrhovou plochu pod ovládacími prvky RadioButton.

  8. V zobrazení XAML změňte hodnotu obsahu ovládacího prvku Button z Content="Button" na Content="Display".

    <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>
    

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

    Screenshot showing the Greetings form with the TextBlock, RadioButtons labeled 'Hello' and 'Goodbye', and the Button control labeled 'Display' all positioned on the form.

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

    Otevře se MainWindow.xaml.vb s kurzorem Button_Click v události.

    Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
    
    End Sub
    
  10. Přidejte následující kód:

    If HelloButton.IsChecked = True Then
        MessageBox.Show("Hello.")
    ElseIf GoodbyeButton.IsChecked = True Then
        MessageBox.Show("Goodbye.")
    End If
    

Ladění a testování aplikace

V dalším kroku aplikaci ladíte, abyste vyhledli chyby a otestli, že se obě okna zpráv zobrazují správně. Pokud chcete zjistit, jak tento proces funguje, první krok záměrně zavádí do programu chybu.

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

  2. 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 okno Výstup indikuje, že došlo k výjimce.

    Screenshot showing the 'Exception Unhandled' window with a System.IO.Exception message that reads 'Cannot locate resource mainwindow.xaml'.

    Screenshot showing the 'Exception Unhandled' window with a System.IO.Exception message that reads 'Cannot locate resource mainwindow.xaml'.

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

    Na začátku této části jste přejmenovali MainWindow.xaml na Greetings.xaml . Kód stále odkazuje na MainWindow.xaml jako spouštěcí identifikátor URI aplikace, takže projekt nemůže spustit.

  4. V Průzkumník řešení otevřete soubor Application.xaml.

  5. Změnit StartupUri="MainWindow.xaml" na StartupUri="Greetings.xaml"

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

    Screenshot of the Greetings window with the TextBlock, RadioButtons, and Button controls visible. The 'Hello' radio button is selected.

    Screenshot of the Greetings window with the TextBlock, RadioButtons, and Button controls visible. The 'Hello' radio button is selected.

  7. Vyberte Hello a tlačítko Zobrazit a pak sbohem a tlačítko Zobrazit . Ladění zastavíte pomocí ikony zavřít v pravém horním rohu.

Další informace naleznete v tématu Sestavení aplikace WPF (WPF) a Ladění WPF.

Ladění pomocí zarážek

Kód můžete otestovat během ladění přidáním některých zarážek.

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

  2. Pokud chcete přidat zarážku stisknutím klávesy F9 nebo výběrem možnosti Ladit, přepněte zarážku.

    Vedle řádku kódu v levém okraji okna editoru se zobrazí červený kroužek.

  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 vyberte tlačítko Hello a pak vyberte 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ě. Okna Zásobník volání, zarážky, výjimky Nastavení, Příkaz, Okamžité a Výstupní okna jsou ukotvena na pravé straně.

    Screenshot showing a debug session in Visual Studio with the Code, Diagnostics. Autos, and Call Stack windows open. Execution is stopped at a breakpoint in Greetings.xaml.vb.

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

    Aplikace se spustí znovu. Zobrazí se dialogové okno se slovem "Hello".

  7. Kliknutím na tlačítko OK zavřete dialogové okno.

  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 . Po zobrazení dialogového okna zavřete dialogové okno kliknutím na tlačítko OK .

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

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

Sestavení verze

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

  1. Výběrem možnosti Sestavit>čisté řešení odstraňte zprostředkující soubory a výstupní soubory vytvořené během předchozích sestavení.

  2. Pomocí ovládacího prvku rozevíracího seznamu na panelu nástrojů změňte konfiguraci sestavení pro HelloWPFApp z ladění na release .

  3. Vyberte 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\bin\Release), najdete.

Další kroky

V dalším článku se dozvíte, jak vytvořit model Windows Forms aplikaci v sadě Visual Studio pomocí jazyka Visual Basic.

Další informace o sadě Visual Studio najdete v těchto zdrojích informací: