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

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.

W tym poradniku nauczysz się, jak:

• 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 WPF?

WPF lub Windows Presentation Foundation to struktura interfejsu użytkownika , która tworzy aplikacje klienckie dla komputerów stacjonarnych. Platforma deweloperów WPF obsługuje szeroki zestaw 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ę.

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. W oknie uruchamiania wybierz pozycję Utwórz nowy projekt.

   

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.

   

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.

   

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

Uwaga / Notatka

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 Eksploratorze 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ę Narzędzia. Jeśli jej nie widzisz, wybierz pozycję Widok>Narzędzia na pasku menu lub Ctrl+Alt+X.

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

   

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

   

   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 Ctrl+Shift+S. Najlepszą praktyką 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.

   

2. Dodaj dwa elementy sterujące RadioButton do obszaru projektowego, wybierając opcję RadioButton i przeciągając ją do obszaru projektowego. Przenieś przyciski, wybierając je i używając strzałek. Umieść przyciski obok siebie pod kontrolką TextBlock.

   

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.

   

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 GoodbyeButton do "Hello" i "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 kodu HelloButton i dodaj znacznik 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 obszaru projektowego pod kontrolkami RadioButton.

8. W widoku XAML zmień wartość właściwości Content 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ę.

   

9. Na powierzchni projektowej proszę kliknąć dwukrotnie przycisk Wyświetl.

   MainWindow.xaml.vb otwiera się 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 Eksploratorze 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 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.

   

3. Zatrzymaj debuger, wybierając Debug>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 Eksploratorze rozwiązań otwórz plik Application.xaml .

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

6. Uruchom ponownie debuger (naciśnij F5). Powinieneś teraz zobaczyć okno Greetings swojej aplikacji.

   

7. Wybierz Hello i przycisk Display, a następnie Goodbye i przycisk Display. Użyj ikony zamknięcia w prawym górnym rogu, aby zatrzymać debugowanie.

Aby uzyskać więcej informacji, zobacz Kompilowanie aplikacji WPF (WPF) oraz Debugowanie WPF.

Debugowanie przy użyciu punktów przerwania

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

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

2. Dodaj punkt przerwania, naciskając 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 F9 , aby dodać punkt przerwania, a następnie naciśnij F5 , aby rozpocząć debugowanie.

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

   Wiersz MessageBox.Show("Hello.") jest wyróżniony kolorem żółtym. W dolnej części środowiska IDE okna Autos, Locals i Watch są zadokowane razem po lewej stronie. Stos wywołań , punkty przerwania , ustawienia wyjątków , polecenia , natychmiastowe i okno wyjściowe są zadokowane razem po prawej stronie.

   

6. Na pasku menu wybierz pozycję Debug>Krok Wychodzący.

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

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

8. W oknie Greetings wybierz przycisk radiowy Goodbye, a następnie wybierz przycisk Wyświetl.

   Wiersz MessageBox.Show("Goodbye.") jest wyróżniony kolorem żółtym.

9. Wybierz klucz 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ę Debug>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 Debug na Wersja przy użyciu kontrolki rozwijanej na pasku narzędzi.

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

Gratulujemy ukończenia tego samouczka! Możesz znaleźć .exe, które zbudowałeś, w twoim katalogu rozwiązania i projektu (...\HelloWPFApp\bin\Release).

Dalsze 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

Powiązane linki

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

• wskazówki dotyczące produktywności