Samouczek: tworzenie prostej aplikacji WPF przy użyciu języka C #

Dotyczy:takprogramu Visual Studio nie Visual Studio dla komputerów Mac nie Visual Studio Code

Po ukończeniu tego samouczka zapoznasz się z wieloma narzędziami, oknami dialogowymi i projektantami, których można użyć podczas tworzenia aplikacji za pomocą programu Visual Studio. Utworzysz aplikację "Hello, World", zaprojektujesz interfejs użytkownika, dodasz kod i błędy debugowania, podczas gdy dowiesz się więcej o pracy w zintegrowanym środowisku projektowym (IDE).

Wymagania wstępne

  • Jeśli program Visual Studio nie został jeszcze zainstalowany, przejdź do strony pobierania programu Visual Studio , aby zainstalować ją bezpłatnie.
  • Upewnij się, że zainstalowano obciążenie programistyczne dla komputerów .NET . Możesz to sprawdzić w Instalator programu Visual Studio.
  • W tym samouczku możesz użyć .NET Framework lub .NET Core. Platforma .NET Core to nowsza, bardziej nowoczesna struktura. Platforma .NET Core wymaga programu Visual Studio 2019 w wersji 16.3 lub nowszej.

Co to jest platforma WPF?

WPF lub Windows Presentation Foundation to struktura interfejsu użytkownika (interfejs 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 z platformą .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 deklaratywnego modelu programowania aplikacji. Aby uzyskać więcej informacji, zobacz Omówienie platformy .NET WPF.

Konfigurowanie IDE

Po uruchomieniu programu Visual Studio zostanie otwarte pierwsze okno uruchamiania. Wybierz pozycję Kontynuuj bez kodu , aby otworzyć środowisko deweloperskie. Zobaczysz okna narzędzi, menu i paski narzędzi oraz przestrzeń okna głównego. Okna narzędzi są zadokowane po lewej i prawej stronie okna aplikacji. Pole wyszukiwania, pasek menu i standardowy pasek narzędzi znajdują się u góry. Podczas ładowania rozwiązania lub projektu edytory i projektanci pojawiają się w centralnej przestrzeni okna aplikacji. Podczas tworzenia aplikacji większość czasu spędzasz w tym centralnym obszarze.

Tworzenie projektu

Podczas tworzenia aplikacji w programie Visual Studio, należy najpierw utworzyć projekt i rozwiązanie. W tym przykładzie utworzysz projekt Windows Presentation Foundation (WPF).

  1. Otwórz program Visual Studio.

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

    Wyświetl okno

  3. Na ekranie Tworzenie nowego projektu wyszukaj ciąg "WPF", wybierz pozycję Aplikacja WPF, a następnie wybierz pozycję Dalej.

    Zrzut ekranu przedstawiający okno dialogowe

  4. Na następnym ekranie nadaj projektowi nazwę HelloWPFApp i wybierz pozycję Dalej.

    Zrzut ekranu przedstawiający okno dialogowe

  5. W oknie Dodatkowe informacje program .NET Core 3.1 powinien być już wybrany dla platformy docelowej. W przeciwnym razie wybierz pozycję .NET Core 3.1. Następnie wybierz pozycję Utwórz.

    W oknie

Program Visual Studio tworzy projekt HelloWPFApp i rozwiązanie, a Eksplorator rozwiązań pokazuje różne pliki. Projektant WPF przedstawia widok projektu i widok XAML mainWindow.xaml w widoku podzielonym. Możesz przesunąć rozdzielacz, aby pokazać więcej lub mniej widoku. Możesz wyświetlić tylko widok wizualizacji lub tylko widok XAML.

Projekt I rozwiązanie WPF w środowisku IDE

Uwaga

Aby uzyskać więcej informacji o języku XAML (eXtensible Application Markup Language), zobacz stronę XAML overview for WPF (Omówienie języka XAML dla platformy WPF ).

Po utworzeniu projektu, można go dostosować. W tym celu wybierz pozycję Okno właściwości z menu Widok lub naciśnij klawisz F4. Następnie można wyświetlać i zmieniać opcje elementów projektu, kontrolek i innych elementów w aplikacji.

okno Właściwości

  1. Otwórz program Visual Studio.

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

    Zrzut ekranu przedstawiający okno uruchamiania w programie Visual Studio 2022 z wyróżnioną opcją

  3. Na ekranie Tworzenie nowego projektu wyszukaj ciąg "WPF", wybierz pozycję Aplikacja WPF, a następnie wybierz pozycję Dalej.

    Zrzut ekranu przedstawiający okno dialogowe

  4. Na następnym ekranie nadaj projektowi nazwę HelloWPFApp i wybierz pozycję Dalej.

    Zrzut ekranu przedstawiający okno dialogowe

  5. W oknie Dodatkowe informacje platforma .NET 6.0 (obsługa długoterminowa) powinna być już wybrana dla platformy docelowej. W przeciwnym razie wybierz pozycję .NET 6.0 (obsługa długoterminowa). Następnie wybierz pozycję Utwórz.

    Na zrzucie ekranu okna Dodatkowe informacje z wybraną obsługą długoterminową platformy .NET 6.0 w polu Framework.

Program Visual Studio tworzy projekt HelloWPFApp i rozwiązanie, a Eksplorator rozwiązań pokazuje różne pliki. Projektant WPF przedstawia widok projektu i widok XAML mainWindow.xaml w widoku podzielonym. Możesz przesunąć rozdzielacz, aby pokazać więcej lub mniej widoku. Możesz wyświetlić tylko widok wizualizacji lub tylko widok XAML.

Zrzut ekranu przedstawiający projekt HelloWPFApp i rozwiązanie w środowisku IDE programu Visual Studio z otwartym Eksplorator rozwiązań, a widoki XAML i projektanta

Uwaga

Aby uzyskać więcej informacji o języku XAML (eXtensible Application Markup Language), zobacz stronę XAML overview for WPF (Omówienie języka XAML dla platformy WPF ).

Po utworzeniu projektu, można go dostosować. W tym celu wybierz pozycję Okno właściwości z menu Widok lub naciśnij klawisz F4. Następnie można wyświetlać i zmieniać opcje elementów projektu, kontrolek i innych elementów w aplikacji.

Zrzut ekranu przedstawiający okno Właściwości sekcję Błędy właściwości rozwiązania dla projektu HelloWPFApp.

Zaprojektuj interfejs użytkownika

Jeśli projektant nie jest otwarty, wybierz pozycję MainWindow.xaml i naciśnij klawisze Shift+F7 , aby otworzyć projektanta.

Dodamy do tej aplikacji trzy typy kontrolek: kontrolkę TextBlock , dwie RadioButton kontrolki i kontrolkę Button .

Dodawanie kontrolki TextBlock

  1. Naciśnij klawisze Ctrl+Q , aby aktywować pole wyszukiwania i wpisz Przybornik. Wybierz pozycję Wyświetl > przybornik z listy wyników.

  2. W przyborniku rozwiń węzeł Wspólne kontrolki WPF , aby wyświetlić kontrolkę TextBlock.

    Przybornik z wyróżnioną kontrolką TextBlock

  3. Dodaj kontrolkę TextBlock do powierzchni projektowej, wybierając element TextBlock i przeciągając go do okna na powierzchni projektowej. Wyśrodkuj kontrolkę w górnej części okna. W programie Visual Studio 2019 lub nowszym możesz użyć czerwonych wskazówek, aby wyśrodkować kontrolkę.

    Okno powinno wyglądać podobnie, jak na poniższej ilustracji:

    Kontrolka TextBlock na formularzu MainWindow

    Znaczniki XAML powinny wyglądać podobnie do następującego przykładu:

    <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
    </Grid>
    
  1. Naciśnij klawisze Ctrl+Q , aby aktywować pole wyszukiwania i wpisz Przybornik. Wybierz pozycję Wyświetl > przybornik z listy wyników.

  2. W przyborniku rozwiń węzeł Wspólne kontrolki WPF , aby wyświetlić kontrolkę TextBlock.

    Zrzut ekranu okna Przybornik z kontrolką TextBlock wybraną na liście wspólnych kontrolek WPF.

  3. Dodaj kontrolkę TextBlock do powierzchni projektowej, wybierając element TextBlock i przeciągając go do okna na powierzchni projektowej. Wyśrodkuj kontrolkę w górnej części okna. Możesz użyć wytycznych, aby wyśrodkować kontrolkę.

    Okno powinno wyglądać podobnie do poniższego obrazu:

    Zrzut ekranu przedstawiający kontrolkę TextBlock na powierzchni projektowej. Wskazówki są wyświetlane w przypadku pozycjonowania i zmiany rozmiaru kontrolki.

    Znaczniki XAML powinny wyglądać podobnie do następującego przykładu:

    <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
    </Grid>
    

Dostosowywanie tekstu w bloku tekstowym

  1. W widoku XAML znajdź znaczniki textBlock i zmień atrybut Text z TextBox na Select a message option and then choose the Display button.

    Znaczniki XAML powinny wyglądać podobnie do następującego przykładu:

    <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
    </Grid>
    
  2. Wyśrodkuj ponownie element TextBlock, jeśli chcesz, a następnie zapisz zmiany, naciskając klawisze Ctrl+S lub używając elementu menu Plik .

Następnie dodasz do formularza dwa kontrolki RadioButton .

Dodawanie przycisków radiowych

  1. W przyborniku znajdź kontrolkę RadioButton .

    Okno przybornika z wybraną kontrolką RadioButton

  2. Dodaj dwa kontrolki RadioButton do powierzchni projektowej, wybierając element RadioButton i przeciągając go do okna na powierzchni projektowej. Przenieś przyciski (wybierając je i używając klawiszy strzałek), aby przyciski wyświetlane obok siebie pod kontrolką TextBlock. Użyj czerwonych wskazówek, aby wyrównać kontrolki.

    Okno powinno wyglądać następująco:

    Formularz MainWindow z kontrolką TextBlock i dwoma przyciskami radiowymi

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

    Okno właściwości RadioButton

  4. W oknie Właściwości dla prawej kontrolki RadioButton zmień właściwość Name na GoodbyeButton, a następnie zapisz zmiany.

Następnie dodasz tekst wyświetlany dla każdej kontrolki RadioButton. Poniższa procedura aktualizuje właściwość Content dla kontrolki RadioButton.

  1. W przyborniku znajdź kontrolkę RadioButton .

    Zrzut ekranu przedstawiający okno Przybornik z kontrolką RadioButton wybraną na liście wspólnych kontrolek WPF.

  2. Dodaj dwa kontrolki RadioButton do powierzchni projektowej, wybierając element RadioButton i przeciągając go do okna na powierzchni projektowej. Przenieś przyciski (wybierając je i używając klawiszy strzałek), aby przyciski wyświetlane obok siebie pod kontrolką TextBlock. Możesz użyć wytycznych, aby wyrównać kontrolki.

    Okno powinno wyglądać następująco:

    Zrzut ekranu przedstawiający okno Projekt dla pliku Greetings.xaml z kontrolką TextBlock i dwoma kontrolkami RadioButton umieszczonymi na powierzchni projektowej.

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

    Zrzut ekranu przedstawiający okno Właściwości kontrolki RadioButton. Wartość właściwości Name została zmieniona na

  4. W oknie Właściwości dla prawej kontrolki RadioButton zmień właściwość Name na GoodbyeButton, a następnie zapisz zmiany.

Następnie dodasz tekst wyświetlany dla każdej kontrolki RadioButton. Poniższa procedura aktualizuje właściwość Content dla kontrolki RadioButton.

Dodawanie tekstu wyświetlania dla każdego przycisku radiowego

  1. Zaktualizuj atrybut Content dla elementu HelloButton i GoodbyeButton do "Hello" i "Goodbye" w języku XAML. Znaczniki XAML powinny teraz wyglądać podobnie do poniższego przykładu:

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

Ustaw przycisk radiowy, który ma być domyślnie sprawdzany

W tym kroku ustawimy opcję HelloButton domyślnie, aby zawsze zaznaczono jeden z dwóch przycisków radiowych.

  1. W widoku XAML znajdź znaczniki helloButton.

  2. Dodaj atrybut IsChecked i ustaw go na wartość True. W szczególności dodaj element IsChecked="True".

    Znaczniki XAML powinny teraz wyglądać podobnie do poniższego przykładu:

    <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" IsChecked="True" 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>
    

Ostatnim elementem interfejsu użytkownika, który dodasz, jest kontrolka Przycisk .

Dodawanie kontrolki przycisku

  1. W przyborniku znajdź kontrolkę Przycisk , a następnie dodaj ją do powierzchni projektowej pod kontrolkami RadioButton, przeciągając go do formularza w widoku projektu. Jeśli używasz programu Visual Studio 2019 lub nowszego, czerwona linia ułatwia wyśrodkowanie kontrolki.

  2. W widoku XAML zmień wartość kontrolki Content dla kontrolki Przycisk z Content="Button" na Content="Display", a następnie zapisz zmiany.

    Okno powinno wyglądać podobnie, jak na poniższej ilustracji.

    Formularz MainWindow z etykietami kontrolek

    Znaczniki XAML powinny teraz wyglądać podobnie do poniższego przykładu:

    <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" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
         <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
         <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75"/>
    </Grid>
    
  1. W przyborniku znajdź kontrolkę Przycisk , a następnie dodaj ją do powierzchni projektowej pod kontrolkami RadioButton, przeciągając go do formularza w widoku projektu. Wskazówki mogą ułatwić wyśrodkowanie kontrolki.

  2. W widoku XAML zmień wartość kontrolki Content dla kontrolki Przycisk z Content="Button" na Content="Display", a następnie zapisz zmiany.

    Okno powinno wyglądać podobnie do poniższego zrzutu ekranu.

    Zrzut ekranu przedstawiający okno Projekt dla pliku Greetings.xaml z kontrolką TextBlock, dwie kontrolki RadioButton oznaczone etykietą

    Znaczniki XAML powinny teraz wyglądać podobnie do poniższego przykładu:

    <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" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
         <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
         <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75"/>
    </Grid>
    

Dodawanie kodu do przycisku wyświetlania

Po uruchomieniu tej aplikacji zostanie wyświetlone pole komunikatu po wybraniu przez użytkownika przycisku radiowego, a następnie wybraniu przycisku Wyświetl . Jedno okno komunikatu pojawi się, żeby wyświetlić „Hello”, a inne pojawi się, aby wyświetlić „Goodbye”. Aby utworzyć to zachowanie, dodasz kod do Button_Click zdarzenia w pliku MainWindow.xaml.cs.

  1. Na powierzchni projektowej kliknij dwukrotnie przycisk Wyświetl .

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

    private void Button_Click(object sender, RoutedEventArgs e)
    {
    
    }
    
  2. Wprowadź następujący kod:

    if (HelloButton.IsChecked == true)
    {
         MessageBox.Show("Hello.");
    }
    else if (GoodbyeButton.IsChecked == true)
    {
        MessageBox.Show("Goodbye.");
    }
    
  3. Zapisz aplikację.

Po uruchomieniu tej aplikacji zostanie wyświetlone pole komunikatu po wybraniu przez użytkownika przycisku radiowego, a następnie wybraniu przycisku Wyświetl . Jedno okno komunikatu pojawi się, żeby wyświetlić „Hello”, a inne pojawi się, aby wyświetlić „Goodbye”. Aby utworzyć to zachowanie, dodasz kod do Button_Click zdarzenia w pliku MainWindow.xaml.cs.

  1. Na powierzchni projektowej kliknij dwukrotnie przycisk Wyświetl .

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

    private void Button_Click(object sender, RoutedEventArgs e)
    {
    
    }
    
  2. Wprowadź następujący kod:

    if (HelloButton.IsChecked == true)
    {
         MessageBox.Show("Hello.");
    }
    else if (GoodbyeButton.IsChecked == true)
    {
        MessageBox.Show("Goodbye.");
    }
    
  3. Zapisz aplikację.

Debugowanie i testowanie aplikacji

Następnie debugujesz aplikację, aby wyszukać błędy i przetestować, czy oba pola komunikatów są wyświetlane poprawnie. Poniższe instrukcje informują, jak skompilować i uruchomić debuger, ale później możesz przeczytać artykuł Build a WPF application (WPF) and Debug WPF (Build a WPF) and Debug WPF (Debug WPF), aby uzyskać więcej informacji.

Zmienianie nazwy pliku MainWindow.xaml

Nadajmy nazwę MainWindow bardziej szczegółową. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy pozycję MainWindow.xaml i wybierz polecenie Zmień nazwę. Zmień nazwę pliku na Greetings.xaml.

Znajdowanie i naprawianie błędów

W tym kroku znajdziesz błąd spowodowany wcześniej przez zmianę nazwy pliku MainWindow.xaml .

Rozpocznij debugowanie i znajdź błąd

  1. 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 IOException: Nie można zlokalizować zasobu "mainwindow.xaml".

    Komunikat IOException

  2. Zatrzymaj debuger, wybierając pozycję Debugujzatrzymaj debugowanie>.

Nazwa pliku MainWindow.xaml została zmieniona na Greetings.xaml, ale kod nadal odwołuje się do mainWindow.xaml jako identyfikatora URI uruchamiania aplikacji, aby nie można było uruchomić projektu.

  1. 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 IOException: Nie można zlokalizować zasobu "mainwindow.xaml".

    Zrzut ekranu przedstawiający okno Dane wyjściowe z komunikatem System.IO.IOException z komunikatem

  2. Zatrzymaj debuger, wybierając pozycję Debugujzatrzymaj debugowanie>.

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

Określ element Greetings.xaml jako identyfikator URI uruchamiania

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

  2. Zmień wartość StartupUri="MainWindow.xaml" na StartupUri="Greetings.xaml", a następnie zapisz zmiany.

W ramach opcjonalnego kroku uniknąć pomyłek, aby zmienić tytuł okna aplikacji tak, aby był zgodny z tą nową nazwą.

  1. W Eksplorator rozwiązań otwórz właśnie zmieniony plik Greetings.xaml.

  2. Zmień wartość właściwości Window.Title z Title="MainWindow" na Title="Greetings", a następnie zapisz zmiany.

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

Zrzut ekranu przedstawiający uruchomioną aplikację Zrzut ekranu okna

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

Teraz zamknij okno aplikacji, aby zatrzymać debugowanie.

Debugowanie za pomocą punktów przerwania

Kod można przetestować podczas debugowania, dodając niektóre punkty przerwania. Punkty przerwania można dodać, wybierając pozycję Debuguj>przełącz punkt przerwania, klikając lewy margines edytora obok wiersza kodu, w którym ma nastąpić przerwanie, lub naciskając klawisz F9.

Dodawanie punktów przerwania

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

  2. Dodaj punkt przerwania z menu, wybierając pozycję Debuguj, a następnie przełącz punkt przerwania.

    Obok wiersza kodu na marginesie po lewej stronie okna edytora jest wyświetlane czerwone koło.

  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 Powitanie wybierz przycisk radiowy Witaj , a następnie wybierz przycisk 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, a stos wywołań, punkty przerwania, ustawienia wyjątków, polecenie, natychmiastowe i wyjściowe okna są zadokowane razem po prawej stronie.

    Punkt przerwania na

  6. Na pasku menu wybierz pozycję Debuguj>wyjście.

    Aplikacja wznawia wykonywanie, a zostanie wyświetlone pole komunikatu z wyrazem "Hello".

  7. Wybierz przycisk OK w polu komunikatu, aby go zamknąć.

  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 pola komunikatu wybierz przycisk OK w polu komunikatu, aby go zamknąć.

  10. Zamknij okno aplikacji, aby zatrzymać debugowanie.

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

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

  2. Dodaj punkt przerwania z menu, wybierając pozycję Debuguj, a następnie przełącz punkt przerwania.

    Obok wiersza kodu na marginesie po lewej stronie okna edytora jest wyświetlane czerwone koło.

  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 Powitanie wybierz przycisk radiowy Witaj , a następnie wybierz przycisk 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, a stos wywołań, punkty przerwania, ustawienia wyjątków, polecenie, natychmiastowe i wyjściowe okna są zadokowane razem po prawej stronie.

    Zrzut ekranu przedstawiający sesję debugowania w programie Visual Studio. Okno kodu dla pliku Greetings.xaml.cs pokazuje, że wykonanie zostało zatrzymane w punkcie przerwania z linią wyróżnioną na żółtym.

  6. Na pasku menu wybierz pozycję Debuguj>wyjście.

    Aplikacja wznawia wykonywanie, a zostanie wyświetlone pole komunikatu z wyrazem "Hello".

  7. Wybierz przycisk OK w polu komunikatu, aby go zamknąć.

  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 pola komunikatu wybierz przycisk OK w polu komunikatu, aby go zamknąć.

  10. Zamknij okno aplikacji, aby zatrzymać debugowanie.

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

Wyświetlanie reprezentacji elementów interfejsu użytkownika

W uruchomionej aplikacji powinien zostać wyświetlony widżet wyświetlany w górnej części okna. Widżet to pomocnik środowiska uruchomieniowego, który zapewnia szybki dostęp do niektórych przydatnych funkcji debugowania. Wybierz pierwszy przycisk Przejdź do dynamicznego drzewa wizualnego. Powinno zostać wyświetlone okno z drzewem zawierającym wszystkie elementy wizualne strony. Rozwiń węzły, aby znaleźć dodane przyciski.

Zrzut ekranu przedstawiający okno Live Visual Tree (Dynamiczne drzewo wizualne) Zrzut ekranu przedstawiający

Zrzut ekranu przedstawiający okno Live Visual Tree (Dynamiczne drzewo wizualne) przedstawiające drzewo elementów wizualnych w HelloWPFApp.exe podczas jego działania.

Tworzenie dystrybucyjnej wersji tej aplikacji

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

  1. W menu głównym wybierz pozycję Kompiluj>czyste rozwiązanie , aby usunąć pliki pośrednie i pliki wyjściowe utworzone podczas poprzednich kompilacji. Ten krok nie jest wymagany, ale czyści dane wyjściowe kompilacji debugowania.

  2. Zmień konfigurację kompilacji dla aplikacji HelloWPFApp z Debuguj na Wydanie , używając kontrolki listy rozwijanej na pasku narzędzi (obecnie mówi "Debuguj").

  3. Skompiluj rozwiązanie, wybierając pozycję Kompilujrozwiązanie kompilacji>.

Gratulujemy ukończenia tego samouczka! Możesz znaleźć .exe utworzone w katalogu rozwiązania i projektu (...\HelloWPFApp\HelloWPFApp\bin\Release).

Następne kroki

Gratulujemy ukończenia tego samouczka! Aby dowiedzieć się więcej, przejdź do poniższych samouczków.

Zobacz też