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.

   

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

   

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

   

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

   

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.

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.

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.

   

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

   

   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.

   

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:

   

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.

   

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

   

   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)
   {
   
   }
   

   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.

   

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.

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.

   

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.

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.

Kontynuuj korzystanie z kolejnych samouczków dotyczących platformy WPF

Zobacz też

• Wskazówki dotyczące produktywności