Udostępnij za pośrednictwem


Samouczek: tworzenie prostej aplikacji WPF za pomocą języka C#

Wykonując czynności z tego samouczka, zapoznasz się z wieloma narzędziami, oknami dialogowymi i projektantami, których można używać podczas tworzenia aplikacji za pomocą programu Visual Studio. Tworzysz aplikację "Hello, World", projektujesz 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 programowanie aplikacji klasycznych platformy .NET. Tę konfigurację można sprawdzić w Instalator programu Visual Studio.
  • Na potrzeby tego samouczka możesz użyć programu .NET Framework lub .NET Core. .NET Core to nowsza, bardziej nowoczesna platforma. Program .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 , 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.

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.

    View the 'Create a new project' window

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

    Screenshot of the 'Create a new project' dialog with 'WPF' entered in the search box, and the 'WPF Application' project template highlighted.

  4. Na następnym ekranie nadaj projektowi nazwę HelloWPFApp, a następnie wybierz pozycję Dalej.

    Screenshot of the 'Configure your new project' dialog in Visual Studio with 'HelloWPFApp' entered in the Project name field.

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

    Screenshot that shows the Additional information window in Visual Studio with .NET Core 3.1 selected as the target framework for the new project.

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

WPF project and solution in the IDE

Uwaga

Aby uzyskać więcej informacji na temat języka 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.

Properties window

  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. Na ekranie Tworzenie nowego projektu wyszukaj ciąg "WPF", wybierz pozycję Aplikacja WPF, a następnie wybierz pozycję Dalej.

    Screenshot of the 'Create a new project' dialog with 'WPF' entered in the search box, and the 'WPF Application' project template highlighted.

  4. Na następnym ekranie nadaj projektowi nazwę HelloWPFApp, a następnie wybierz pozycję Dalej.

    Screenshot that shows the 'Configure your new project' dialog in Visual Studio with 'HelloWPFApp' entered in the Project name field.

  5. W oknie Dodatkowe informacje sprawdź, czy dla używanej platformy docelowej wybrano platformę .NET 8.0. Następnie wybierz pozycję Utwórz.

    Screenshot that shows the Additional information window in Visual Studio with .NET 8.0 selected as the target framework for the new project.

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

Screenshot of the HelloWPFApp project and solution in Solution Explorer, and the XAML and designer views of 'MainWindow.xaml' open in the WPF Designer.

Uwaga

Aby uzyskać więcej informacji na temat języka 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.

Screenshot of the Properties window showing the Misc section of the Solution Properties for the HelloWPFApp project.

Zaprojektuj interfejs użytkownika

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

Do tej aplikacji dodajemy 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ł Typowe kontrolki WPF, aby wyświetlić kontrolkę TextBlock.

    Toolbox with the TextBlock control highlighted

  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:

    TextBlock control on the MainWindow form

    Znacznik XAML powinien wyglądać podobnie do poniższego 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ł Typowe kontrolki WPF, aby wyświetlić kontrolkę TextBlock.

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

  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 przypominać następującą ilustrację:

    Screenshot of the TextBlock control on the design surface. Guidelines are shown for positioning and resizing the control.

    Znacznik XAML powinien wyglądać podobnie do poniższego 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 naSelect a message option and then choose the Display button.

    Znacznik XAML powinien wyglądać podobnie do poniższego 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 do formularza zostaną dodane dwa kontrolki RadioButton .

Dodawanie przycisków radiowych

  1. W przyborniku znajdź kontrolkę RadioButton.

    Toolbox window with RadioButton control selected

  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 były wyświetlane obok siebie pod kontrolką TextBlock. Użyj czerwonych wskazówek, aby wyrównać kontrolki.

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

    MainWindow form with TextBlock and two radio buttons

  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.

    RadioButton properties window

  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.

    Screenshot of 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 okna na powierzchni projektowej. Przenieś przyciski (wybierając je i używając klawiszy strzałek), aby przyciski były wyświetlane obok siebie pod kontrolką TextBlock. Aby dopasować kontrolki, możesz użyć wytycznych.

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

    Screenshot of the Design window for Greetings.xaml, showing a TextBlock control and two RadioButton controls positioned on the design surface.

  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.

    Screenshot of the Properties window for a RadioButton control. The value of the Name property has been changed to HelloButton.

  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świetlanego dla każdego przycisku radiowego

  1. Zaktualizuj atrybut Content dla dwóch przycisków radiowych HelloButton i do "Hello" i GoodbyeButton"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 jeden z dwóch przycisków radiowych był zawsze zaznaczony.

  1. W widoku XAML znajdź znaczniki dla elementu 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 dodanym elementem interfejsu użytkownika 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 ją 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.

    MainWindow form with control labels

    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 ją do formularza w widoku projektu. Wskazówki mogą pomóc wyśrodkować kontrolkę.

  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.

    Screenshot of the Design window for Greetings.xaml showing a TextBlock control, two RadioButton controls labeled 'Hello' and 'Goodbye', and a button labeled 'Display'.

    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 okno komunikatu po wybraniu przycisku radiowego przez użytkownika, a następnie wybraniu przycisku Wyświetl . Zostanie wyświetlone jedno okno komunikatu Hello, a drugie pojawi się w polu Goodbye (Pożegnanie). Aby utworzyć to zachowanie, należy dodać 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ące 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 okno komunikatu po wybraniu przycisku radiowego przez użytkownika, a następnie wybraniu przycisku Wyświetl . Zostanie wyświetlone jedno okno komunikatu Hello, a drugie pojawi się w polu Goodbye (Pożegnanie). Aby utworzyć to zachowanie, należy dodać 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)
    {
    
    }
    

    Po dwukrotnym kliknięciu przycisku Click="Button_Click" Wyświetl zostanie dodany do kodu 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" 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" Click="Button_Click"/>
    </Grid>
    
  2. Wprowadź następujące 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ć, że oba pola komunikatów są wyświetlane poprawnie. Poniższe instrukcje zawierają informacje na temat kompilowania i uruchamiania debugera, ale później możesz przeczytać artykuł Build a WPF application (WPF) and Debug WPF (Build a WPF) and Debug WPF (Build a WPF) (Tworzenie aplikacji WPF i Debugowanie 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, który został wcześniej spowodowany 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.

    IOException message

  2. Zatrzymaj debuger, wybierając pozycję Debuguj>Zatrzymaj 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, więc nie można 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.

    Screenshot of the Output window showing a System.IO.IOException with the message, Cannot locate resource mainwindow.xaml.

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

Na początku tego samouczka zmieniliśmy nazwę MainWindow.xaml na Greetings.xaml, ale kod nadal odnosi 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ń StartupUri="MainWindow.xaml" wartość na StartupUri="Greetings.xaml", a następnie zapisz zmiany.

Opcjonalny krok pozwala uniknąć nieporozumień, aby zmienić tytuł okna aplikacji tak, aby był zgodny z tą nową nazwą.

  1. W Eksplorator rozwiązań otwórz plik Greetings.xaml, którego nazwa została właśnie zmieniona.

  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 Greetings (Pozdrowienia) aplikacji.

Screenshot of running app

Screenshot of the Greetings window with the TextBlock, RadioButtons, and Button controls visible. The 'Hello' radio button is selected.

Teraz zamknij okno aplikacji, aby zatrzymać debugowanie.

Debugowanie przy użyciu 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 Pozdrowienia 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, wyjątki Ustawienia, polecenie, natychmiastowe i wyjściowe okna są zadokowane razem po prawej stronie.

    Breakpoint in the debugger

  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. Gdy pojawi się okno 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 Pozdrowienia 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, wyjątki Ustawienia, polecenie, natychmiastowe i wyjściowe okna są zadokowane razem po prawej stronie.

    Screenshot of a debug session in Visual Studio. The code window for Greetings.xaml.cs shows execution stopped at a breakpoint with a line highlighted in yellow.

  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. Gdy pojawi się okno 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.

Screenshot of Live Visual Tree window

Screenshot of the Live Visual Tree window, showing the tree of visual elements in HelloWPFApp.exe while it's running.

Tworzenie dystrybucyjnej wersji tej aplikacji

Po sprawdzeniu, czy 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 rozwijanej na pasku narzędzi (obecnie jest wyświetlany komunikat "Debuguj").

  3. Utwórz rozwiązanie, wybierając pozycję Kompiluj rozwiązanie kompilacji>.

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

Następne kroki

Gratulujemy ukończenia tego samouczka! Aby dowiedzieć się jeszcze więcej, przejdź do następujących samouczków.

Zobacz też