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

Dotyczy:programu Visual Studio Visual Studio dla komputerów Mac 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.

   

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 i wybierz pozycję Dalej.

   

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.

   

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.

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.

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.

   

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:

   

   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 .

   

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:

   

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

   

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

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

   

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.

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.

   

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.

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.

Dalsze samouczki dotyczące platformy WPF

Zobacz też

• Wskazówki dotyczące produktywności