Sdílet prostřednictvím


Kurz: Vytvoření aplikace WPF (Windows Presentation Foundation) pomocí Visual Basic

V tomto kurzu vytvoříte aplikaci pomocí Visual Basic v integrovaném vývojovém prostředí (IDE) Visual Studio. Váš program bude používat architekturu uživatelského rozhraní Windows Presentation Foundation (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 Visual Studio.

V tomto návodu se naučíte, jak:

  • 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í bodů přerušení
  • Sestavení vydané verze

Co je WPF (Windows Presentation Foundation)?

WPF (Windows Presentation Foundation) nebo Windows Presentation Foundation je architektura uživatelského rozhraní, která vytváří desktopové klientské aplikace. Vývojová platforma WPF (Windows Presentation Foundation) podporuje širokou škálu funkcí vývoje aplikací, mezi které patří:

  • Aplikační model
  • Zdroje
  • Ovládání
  • Graphics
  • Rozložení
  • Datová vazba
  • Documents
  • Zabezpečení

WPF (Windows Presentation Foundation) je součástí technologie .NET. Pokud jste dříve vytvořili aplikace s technologie .NET pomocí ASP.NET nebo model Windows Forms, měli byste mít zkušenosti s programováním. WPF (Windows Presentation Foundation) pomocí jazyka Extensible Application Markup Language XAML poskytuje deklarativní model pro programování aplikací. Další informace najdete v tématu WPF (Windows Presentation Foundation) technologie .NET overview.

Požadavky

K dokončení tohoto kurzu potřebujete Visual Studio. Bezplatnou verzi najdete v tématu Visual Studio ke stažení.

Vytvoření projektu

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

  1. Otevřete Visual Studio.

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

    Screenshot úvodního okna v Visual Studio se zvýrazněnou možností Vytvořit nový projekt.

  3. V okně Vytvořit nový projekt vyhledejte WPF (Windows Presentation Foundation) a v seznamu Visual Basic vyberte Všechny jazyky. Zvolte WPF (Windows Presentation Foundation) App (technologie .NET Framework) a pak zvolte Dalši.

    Snímek obrazovky dialogového okna

  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 zobrazující soubory v projektu HelloWPFApp a řešení v Průzkumník řešení.

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

  1. Otevřete Visual Studio.

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

    Screenshot úvodního okna v Visual Studio 2022 se zvýrazněnou možností Vytvořit nový projekt.

  3. V okně Vytvořit nový projekt vyhledejte WPF (Windows Presentation Foundation) a v seznamu Visual Basic vyberte Všechny jazyky. Zvolte WPF (Windows Presentation Foundation) App (technologie .NET Framework) a pak zvolte Dalši.

    Screenshot dialogového okna 'Vytvořit nový projekt' se zadáním 'WPF (Windows Presentation Foundation)' do vyhledávacího pole, s vybráním Visual Basic v seznamu jazyků a zvýrazněnou šablonou projektu aplikace WPF (Windows Presentation Foundation) (technologie .NET Framework).

  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 zobrazující soubory v projektu HelloWPFApp a řešení v Průzkumník řešení v Visual Studio 2022.

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

Poznámka:

Další informace o jazyku XAML (Extensible Application Markup Language) najdete v tématu XAML – přehled WPF (Windows Presentation Foundation).

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ě Visual Studio – sada IDE vyberte kartu Nástroj. Pokud ho nevidíte, vyberte View>Toolbox z řádku nabídek nebo Ctrl+Alt+X.

  4. Rozbalte Common WPF (Windows Presentation Foundation) Ovládací prvky nebo zadejte Text do vyhledávacího pole a najděte TextBlock.

    Snímek obrazovky zobrazující okno Nástrojů s ovládacím prvkem TextBlock zvýrazněným v seznamu běžných ovládacích prvků WPF (Windows Presentation Foundation).

    Snímek obrazovky zobrazující okno nástrojů ve Visual Studio 2022 s ovládacím prvkem TextBlock zvýrazněným v seznamu běžných WPF (Windows Presentation Foundation) ovládacích prvků.

  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.

    Snímek obrazovky znázorňující ovládací prvek TextBlock umístěný ve formuláři Greetings s viditelnými pokyny

    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ů. Alternativně, pokud chcete aplikaci uložit, zvolte SouborUložit vše z řádku nabídek nebo stiskněte CtrlShiftS. Nejlepší praxí je uložit data 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 také přidáte Visual Basic kód. Tento kód odkazuje na výběr radiobuttonu.

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

    Snímek obrazovky zobrazující okno Nástroje s ovládacím prvkem RadioButton vybraným v seznamu Obecných ovládacích prvků WPF (Windows Presentation Foundation).

    Snímek obrazovky ukazující okno Nástrojů ve Visual Studiu 2022 s vybraným ovládacím prvkem RadioButton v seznamu Obecných WPF (Windows Presentation Foundation) ovládacích prvků.

  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.

    Snímek obrazovky s formulářem Greetings s ovládacím tlačítkem TextBlock a dvěma přepínači

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

    Screenshot ukazuje okno vlastností Průzkumníka řešení pro radiobutton 'HelloButton'.

    Snímek obrazovky zobrazující okno vlastností Průzkumníka řešení ve Visual Studio 2022 pro RadioButton 'HelloButton'.

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

  5. Aktualizujte atribut Content pro a na a v 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 rádiové tlačítko je vždy vybrané, i při spuštění programu.

  7. V panelu nástrojů najděte ovládací prvek tlačítka . Potom 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 na .

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

    Snímek obrazovky s formulářem Greetings s TextBlockem, RadioButtony označenými "Hello" a "Goodbye" a ovládacím tlačítkem označeným "Display" (Zobrazit) všechny umístěné ve formuláři

  9. Na návrhové ploše dvakrát klikněte na tlačítko Zobrazit.

    MainWindow.xaml.vb se otevře s kurzorem 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

Dále vylaďte aplikaci, abyste hledali chyby, a otestujte, ž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 Rename. 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.

    Snímek obrazovky s oknem Nezpracovaná výjimka zobrazující zprávu System.IO.Exception: 'Nelze najít prostředek mainwindow.xaml'.

  3. Zastavte ladění 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ěňte na .

  6. Spusťte ladicí program znovu (stiskněte F5). Nyní byste měli vidět okno Greetings vaší aplikace.

    Snímek obrazovky okna Greetings s viditelnými ovládacími prvky TextBlock, RadioButtons a Button Je vybrán přepínač "Hello".

  7. Vyberte Hello a tlačítko Zobrazit a pak sbohem a tlačítko Zobrazit . K ukončení ladění použijte ikonu zavření v pravém horním rohu.

Další informace najdete v tématu Kompile aplikace WPF (Windows Presentation Foundation) a Debug WPF (Windows Presentation Foundation).

Ladění pomocí bodů přerušení

Kód můžete otestovat během ladění (debugging) přidáním několika zarážek.

  1. Otevřete Greetings.xaml.vb a vyberte následující řádek:

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

  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 je zvýrazněná žlutou barvou. V dolní části IDE jsou okna Automatické, Místní a Sledování společně ukotvena na levé straně. zásobník volání, zarážky, nastavení výjimek, příkaz, okamžitéa okna Výstupní jsou ukotvena na pravé straně.

  6. Na liště nabídek zvolte Ladění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 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, čímž zastavíte ladění.

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

Sestavení vydané verze

Jakmile ověříte, že všechno funguje, můžete připravit vydání 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. Změňte konfiguraci sestavení pro HelloWPFApp z Ladění na Release pomocí ovládacího prvku rozevíracího seznamu na panelu nástrojů.

  3. Vyberte Sestavit řešení.

Blahopřejeme k dokončení tohoto kurzu! Můžete najít .exe , které jste vytvořili v rámci vašeho řešení a adresáře projektu (...\HelloWPFApp\bin\Release).

Další krok

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

Další informace o Visual Studio najdete tady:

  • tipy pro produktivitu