Samouczek: tworzenie aplikacji WPF przy użyciu Visual Basic

W tym samouczku utworzysz aplikację przy użyciu Visual Basic w zintegrowanym środowisku projektowym (IDE) Visual Studio. Program będzie używać platformy interfejsu użytkownika 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 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
• Sterowanie
• Graphics
• Układ
• Powiązanie danych
• Documents
• Zabezpieczenia

WPF jest częścią .NET. Jeśli wcześniej utworzono aplikacje z .NET przy użyciu ASP.NET lub Windows Forms, środowisko programowania powinno być znane. WPF używa rozszerzalnego języka znaczników aplikacji XAML aby zapewnić model deklaratywny programowania aplikacji. Aby uzyskać więcej informacji, zobacz WPF .NET overview.

Wymagania wstępne

Aby ukończyć ten samouczek, potrzebujesz programu Visual Studio. Aby uzyskać bezpłatną wersję, zobacz Visual Studio downloads.

Tworzenie projektu

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

1. Otwórz Visual Studio.

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

   

3. W oknie Utwórz nowy projekt wyszukaj WPF i wybierz Visual Basic na liście Wszystkie języki. Wybierz WPF App (.NET Framework) a następnie wybierz Dalej.

   

4. Nadaj projektowi nazwę HelloWPFApp i wybierz pozycję Utwórz.

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

   

W widoku podzielonym WPF Designer wyświetla widok projektu i widok XAML dla MainWindow.xaml.

Uwaga / Notatka

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

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

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

3. Po lewej stronie Visual Studio IDE wybierz kartę Toolbox. Jeśli go nie widzisz, wybierz pozycję View>Toolbox z paska menu lub >Ctrl+Alt+X.

4. Rozwiń Typowe kontrolki WPF lub wpisz Text w 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ę.

   Zrzut ekranu przedstawiający kontrolkę TextBlock umieszczoną na formularzu Greetings z widocznymi wytycznymi.

   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 kontrolkę 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 CtrlShiftS. 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 również kod 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.

   Zrzut ekranu przedstawiający formularz Powitania z kontrolką TextBlock i dwoma przyciskami radiowymi.

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 i do i 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ę przycisku. Następnie przeciągnij przycisk na powierzchnię projektową pod kontrolkami RadioButton.

8. W widoku XAML zmień wartość właściwości Content kontrolki Przycisk z na .

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

   Okno powinno przypominać poniższą ilustrację.

   Zrzut ekranu przedstawiający formularz Powitania z kontrolką TextBlock, RadioButtons oznaczonymi etykietami "Hello" i "Goodbye," oraz kontrolką Przycisk oznaczoną etykietą "Wyświetl," umieszczoną na formularzu.

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

   MainWindow.xaml.vb otwiera się z kursorem 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 debuguj aplikację, aby wyszukać błędy i przetestować, 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 MainWindow.xaml i wybierz Rename. 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 wyświetla informację, że wystąpił wyjątek.

   Zrzut ekranu pokazujący okno „Nieobsługiwany wyjątek” z komunikatem System.IO.Exception, który brzmi „Nie można zlokalizować zasobu mainwindow.xaml”.

3. Zatrzymaj debuger, wybierając DebugZatrzymaj 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ń na .

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

   Zrzut ekranu przedstawiający okno Powitania z widocznymi kontrolkami TextBlock, RadioButtons i Button. Wybrano przycisk radiowy "Hello".

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 Compile a WPF Application and Debug 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:

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

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 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ę DebugKrok 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 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ę DebugWyłącz wszystkie punkty przerwania.

Tworzenie wersji wydania

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

1. Wybierz pozycję Kompilujczyste 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 opcję Kompiluj rozwiązanie.

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

Następny krok

Przejdź do następnego artykułu, aby dowiedzieć się, jak utworzyć aplikację Windows Forms w Visual Studio za pomocą Visual Basic.

Tworzenie aplikacji Windows Forms

Aby uzyskać więcej informacji na temat Visual Studio, zobacz:

• wskazówki dotyczące produktywności