Udostępnij za pośrednictwem

Samouczek: tworzenie aplikacji WPF przy użyciu języka Visual Basic

  • Artykuł

W tym samouczku utworzysz aplikację przy użyciu języka Visual Basic w zintegrowanym środowisku projektowym (IDE) programu Visual Studio. Program będzie używać struktury interfejsu użytkownika programu Windows Presentation Foundation (WPF). Skorzystaj z tego samouczka, aby zapoznać się z wieloma narzędziami, oknami dialogowymi i projektantami, których można używać w programie Visual Studio.

Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

  • Tworzenie projektu
  • Konfigurowanie okna i dodawanie tekstu
  • Dodawanie przycisków i kodu
  • Debugowanie i testowanie aplikacji
  • Debugowanie przy użyciu punktów przerwania
  • Tworzenie wersji wydania

Co to jest platforma WPF?

WPF lub Windows Presentation Foundation to struktura interfejsu użytkownika , która tworzy aplikacje klienckie dla komputerów stacjonarnych. Platforma programistyczna WPF obsługuje szeroką gamę funkcji tworzenia aplikacji, w tym model aplikacji, zasoby, kontrolki, grafiki, układ, powiązanie danych, dokumenty i zabezpieczenia.

WPF jest częścią platformy .NET, więc jeśli masz wcześniej utworzone aplikacje na platformie .NET przy użyciu ASP.NET lub Windows Forms, środowisko programowania powinno być znane. WPF używa rozszerzalnego języka XAML języka znaczników aplikacji w celu zapewnienia modelu deklaratywnego do programowania aplikacji. Aby uzyskać więcej informacji, zobacz Omówienie platformy WPF .NET.

Wymagania wstępne

Do ukończenia tego samouczka potrzebny jest program Visual Studio. Odwiedź stronę pobierania programu Visual Studio, aby uzyskać bezpłatną wersję.

Do ukończenia tego samouczka potrzebny jest program Visual Studio. Odwiedź stronę pobierania programu Visual Studio, aby uzyskać bezpłatną wersję.

Tworzenie projektu

Podczas tworzenia aplikacji w programie Visual Studio należy najpierw utworzyć projekt. W tym samouczku utwórz projekt Windows Presentation Foundation.

  1. Otwórz program Visual Studio.

  2. Na ekranie Tworzenie nowego projektu wyszukaj ciąg "WPF", a następnie wybierz pozycję Aplikacja WPF (.NET Framework). Wybierz Dalej.

    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. Nadaj projektowi nazwę HelloWPFApp i wybierz pozycję Utwórz.

    Program Visual Studio tworzy projekt HelloWPFApp i rozwiązanie. Eksplorator rozwiązań pokazuje różne pliki.

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

WPF Projektant przedstawia widok projektu i widok XAML mainWindow.xaml w widoku podzielonym.

  1. Otwórz program Visual Studio.

  2. W oknie uruchamiania wybierz pozycję Utwórz nowy projekt.

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

  3. W oknie Tworzenie nowego projektu wyszukaj ciąg "WPF" i wybierz pozycję Visual Basic z listy rozwijanej Wszystkie języki. Wybierz pozycję Aplikacja WPF (.NET Framework),a następnie wybierz pozycję Dalej.

    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. Nadaj projektowi nazwę HelloWPFApp i wybierz pozycję Utwórz.

    Program Visual Studio tworzy projekt HelloWPFApp i rozwiązanie. Eksplorator rozwiązań pokazuje różne pliki.

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

WPF Projektant przedstawia widok projektu i widok XAML mainWindow.xaml w widoku podzielonym.

Uwaga

Aby uzyskać więcej informacji na temat języka eXtensible Application Markup Language (XAML), zobacz XAML overview for WPF (Omówienie języka XAML).

Konfigurowanie okna i dodawanie tekstu

Za pomocą okna Właściwości można wyświetlać i zmieniać opcje elementów projektu, kontrolek i innych elementów.

  1. W Eksplorator rozwiązań otwórz plik MainWindow.xaml.

  2. W widoku XAML zmień wartość właściwości Window.Title z Title="MainWindow" na Title="Greetings".

  3. Po lewej stronie środowiska IDE programu Visual Studio wybierz kartę Przybornik. Jeśli go nie widzisz, wybierz pozycję Wyświetl>przybornik na pasku menu lub Ctrl+Alt+X.

  4. Rozwiń pozycję Typowe kontrolki WPF lub wprowadź tekst na pasku wyszukiwania, aby znaleźć textBlock.

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

  5. Wybierz element TextBlock i przeciągnij go do okna na powierzchni projektowej. Kontrolkę TextBlock można przenieść, przeciągając ją. Użyj wytycznych, aby umieścić kontrolkę.

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

    Znacznik XAML powinien wyglądać podobnie do poniższego przykładu:

    <TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>

  6. W widoku XAML znajdź znaczniki dla atrybutu TextBlock i zmień atrybut Text :

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

    W razie potrzeby wyśrodkuj ponownie element TextBlock

  7. Zapisz aplikację, wybierając przycisk Zapisz wszystko na pasku narzędzi. Alternatywnie, aby zapisać aplikację, wybierz pozycję Plik>Zapisz wszystko na pasku menu lub naciśnij klawisze Ctrl+Shift+S. Najlepszym rozwiązaniem jest wczesne i częste zapisywanie.

Dodawanie przycisków i kodu

Aplikacja używa dwóch przycisków radiowych i przycisku. Wykonaj te kroki, aby je dodać. Do przycisku dodasz kod Języka Visual Basic. Ten kod odnosi się do zaznaczenia przycisku radiowego.

  1. W przyborniku znajdź pozycję RadioButton.

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

  2. Dodaj dwa kontrolki RadioButton do powierzchni projektowej, wybierając element RadioButton i przeciągając go do powierzchni projektowej. Przenieś przyciski, wybierając je i używając klawiszy strzałek. Umieść przyciski obok siebie pod kontrolką TextBlock.

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

  3. W oknie Właściwości lewej kontrolki RadioButton zmień właściwość Name w górnej części okna Właściwości na HelloButton.

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

  4. W oknie Właściwości dla prawej kontrolki RadioButton zmień właściwość Name na GoodbyeButton.

  5. Zaktualizuj atrybut Content dla HelloButton i do "Hello" i GoodbyeButton "Goodbye" w języku 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. W widoku XAML znajdź znaczniki helloButton i dodaj atrybut IsChecked :

    IsChecked="True"

    Atrybut IsChecked z wartością True oznacza, że funkcja HelloButton jest domyślnie sprawdzana. To ustawienie oznacza, że przycisk radiowy jest zawsze wybrany, nawet po uruchomieniu programu.

  7. W przyborniku znajdź kontrolkę Przycisk, a następnie przeciągnij przycisk do powierzchni projektowej pod kontrolkami RadioButton.

  8. W widoku XAML zmień wartość kontrolki Przycisk z Content="Button" na Content="Display".

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

    Okno powinno przypominać poniższą ilustrację.

    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 powierzchni projektowej kliknij dwukrotnie przycisk Wyświetl .

    Zostanie otwarty plik MainWindow.xaml.vb z kursorem Button_Click w zdarzeniu.

    Private Sub Button_Click(sender As Object, e As RoutedEventArgs)

End Sub

  10. Dodaj następujący kod:

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

Debugowanie i testowanie aplikacji

Następnie debugujesz aplikację, aby wyszukać błędy i sprawdzić, czy oba pola komunikatów są wyświetlane poprawnie. Aby zobaczyć, jak działa ten proces, pierwszy krok celowo wprowadza błąd do programu.

  1. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy pozycję MainWindow.xaml i wybierz polecenie Zmień nazwę. Zmień nazwę pliku na Greetings.xaml.

  2. Uruchom debuger, naciskając klawisz F5 lub wybierając pozycję Debuguj, a następnie rozpocznij debugowanie.

    Zostanie wyświetlone okno Tryb przerwania, a okno Dane wyjściowe wskazuje, że wystąpił wyjątek.

    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. Zatrzymaj debuger, wybierając pozycję Debuguj>Zatrzymaj debugowanie.

    Nazwa pliku MainWindow.xaml została zmieniona na Greetings.xaml na początku tej sekcji. Kod nadal odwołuje się do MainWindow.xaml jako identyfikatora URI uruchamiania aplikacji, więc nie można uruchomić projektu.

  4. W Eksplorator rozwiązań otwórz plik Application.xaml.

  5. Zmień StartupUri="MainWindow.xaml" na StartupUri="Greetings.xaml"

  6. Uruchom ponownie debuger (naciśnij klawisz F5). Powinno zostać wyświetlone okno Greetings (Pozdrowienia) aplikacji.

    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. Wybierz przycisk Hello (Witaj) i Display (Wyświetl), a następnie przycisk Goodbye (Pożegnanie) i Display (Wyświetl). Użyj ikony zamknięcia w prawym górnym rogu, aby zatrzymać debugowanie.

Aby uzyskać więcej informacji, zobacz Tworzenie aplikacji WPF (WPF) i Debugowanie WPF.

Debugowanie przy użyciu punktów przerwania

Kod można przetestować podczas debugowania, dodając niektóre punkty przerwania.

  1. Otwórz plik Greetings.xaml.vb i wybierz następujący wiersz: MessageBox.Show("Hello.")

  2. Dodaj punkt przerwania, naciskając klawisz F9 lub wybierając pozycję Debuguj, a następnie przełącz punkt przerwania.

    Czerwony okrąg pojawia się obok wiersza kodu na lewym marginesie okna edytora.

  3. Wybierz następujący wiersz: MessageBox.Show("Goodbye.").

  4. Naciśnij klawisz F9, aby dodać punkt przerwania, a następnie naciśnij klawisz F5, aby rozpocząć debugowanie.

  5. W oknie Pozdrowienia wybierz przycisk Witaj, a następnie wybierz pozycję Wyświetl.

    Linia MessageBox.Show("Hello.") jest wyróżniona kolorem żółtym. W dolnej części środowiska IDE okna Autos, Locals i Watch są zadokowane razem po lewej stronie. Stos wywołań, punkty przerwania, wyjątki Ustawienia, polecenie, natychmiastowe i wyjściowe okna są zadokowane razem po prawej stronie.

    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 pasku menu wybierz pozycję Debuguj>wyjście.

    Aplikacja zostanie uruchomiona ponownie. Zostanie wyświetlone okno dialogowe z wyrazem "Hello".

  7. Wybierz przycisk OK, aby zamknąć okno dialogowe.

  8. W oknie Pozdrowienia wybierz przycisk radiowy Pożegnaj, a następnie wybierz przycisk Wyświetl.

    Linia MessageBox.Show("Goodbye.") jest wyróżniona kolorem żółtym.

  9. Wybierz klawisz F5, aby kontynuować debugowanie. Po wyświetleniu okna dialogowego wybierz przycisk OK , aby zamknąć okno dialogowe.

  10. Zamknij okno aplikacji, aby zatrzymać debugowanie.

  11. Na pasku menu wybierz pozycję Debuguj>Wyłącz wszystkie punkty przerwania.

Tworzenie wersji wydania

Po sprawdzeniu, czy wszystko działa, możesz przygotować kompilację wydania aplikacji.

  1. Wybierz pozycję Kompiluj>czyste rozwiązanie, aby usunąć pliki pośrednie i pliki wyjściowe utworzone podczas poprzednich kompilacji.

  2. Zmień konfigurację kompilacji aplikacji HelloWPFApp z Debuguj na Wydanie , używając kontrolki rozwijanej na pasku narzędzi.

  3. Wybierz pozycję Kompiluj rozwiązanie kompilacji>.

Gratulujemy ukończenia tego samouczka! Plik .exe utworzony w katalogu rozwiązania i projektu (...\HelloWPFApp\bin\Release).

Następne kroki

Przejdź do następnego artykułu, aby dowiedzieć się, jak utworzyć aplikację Windows Forms w programie Visual Studio przy użyciu języka Visual Basic.

Tworzenie aplikacji Windows Forms

Aby uzyskać więcej informacji na temat programu Visual Studio, zobacz następujące zasoby: