Samouczek: tworzenie pierwszej aplikacji zestawu SDK aplikacji systemu Windows w programie Visual Studio przy użyciu języka XAML i C#
W tym wprowadzeniu do zintegrowanego środowiska projektowego programu Visual Studio (IDE) utworzysz aplikację "Hello World" działającą na dowolnym urządzeniu z systemem Windows 10 lub nowszym. W tym celu użyjesz szablonu projektu zestawu SDK aplikacji systemu Windows (WinUI 3), języka programowania Extensible Application Markup Language (XAML) i języka programowania C#.
Notatka
WinUI 3 to natywny składnik platformy interfejsu użytkownika dostarczany z zestawem SDK aplikacji systemu Windows (całkowicie oddzielony od zestawów SDK systemu Windows ). Aby uzyskać więcej informacji, zobacz WinUI 3.
Jeśli program Visual Studio nie został jeszcze zainstalowany, przejdź do strony Visual Studio do pobrania, aby ją zainstalować bezpłatnie.
Warunki wstępne
Do ukończenia tego samouczka potrzebny jest program Visual Studio. Odwiedź stronę pobierania Visual Studio, aby uzyskać bezpłatną wersję.
Obciążenia i składniki wymagane do tworzenia za pomocą interfejsu WinUI i zestawu SDK aplikacji systemu Windows. Aby zweryfikować lub zainstalować pakiet w programie Visual Studio, wybierz Tools>Get Tools and Features. Aby uzyskać więcej informacji, zobacz Zmienianie obciążeń lub poszczególnych składników.
Na karcie Obciążenia Instalatora programu Visual Studio wybierz następujące obciążenia i składniki:
- Aby rozpocząć rozwój aplikacji w C# przy użyciu Windows App SDK, wybierz rozwój aplikacji na system Windows.
Tworzenie projektu
Najpierw utwórz projekt WinUI 3. Typ projektu jest dostarczany ze wszystkimi potrzebnymi plikami szablonów, zanim jeszcze cokolwiek dodasz.
Ważny
Program Visual Studio 2019 obsługuje tylko zestaw Windows App SDK 1.1 i starsze wersje. Program Visual Studio 2022 jest zalecany do tworzenia aplikacji ze wszystkimi wersjami zestawu Windows App SDK.
Szablony zestawu Windows App SDK 1.1.x są dostępne przez zainstalowanie rozszerzenia programu Visual Studio (VSIX).
Notatka
Jeśli masz już zainstalowane rozszerzenie visual studio zestawu SDK aplikacji systemu Windows (VSIX), odinstaluj je przed zainstalowaniem innej wersji. Aby uzyskać wskazówki, zobacz Zarządzanie rozszerzeniami w Visual Studio.
- Najnowszą stabilną wersję 1.1.x programu VSIX można zainstalować w programie Visual Studio. Wybierz opcję Rozszerzenia>Zarządzaj rozszerzeniami, wyszukaj Windows App SDKi pobierz rozszerzenie Windows App SDK. Zamknij i otwórz ponownie program Visual Studio, a następnie postępuj zgodnie z monitami, aby zainstalować rozszerzenie. Upewnij się, że zainstalowano szablony dla zestawu Windows App SDK 1.1.
- Alternatywnie możesz pobrać rozszerzenie bezpośrednio z witryny Visual Studio Marketplacei zainstalować je:
Po zainstalowaniu rozszerzenia szablonów możesz utworzyć swój pierwszy projekt. Aby uzyskać więcej informacji na temat obsługi programu Visual Studio 2019, zobacz Zainstaluj narzędzia dla Windows App SDK. W pozostałej części tego samouczka założono, że używasz programu Visual Studio 2022.
Otwórz program Visual Studio, a następnie w oknie uruchamiania wybierz pozycję Utwórz nowy projekt.
Na ekranie Utwórz nowy projekt wprowadź WinUI w polu wyszukiwania, wybierz szablon C# dla Pusta aplikacja, pakietowana (WinUI 3 na komputerze), a następnie wybierz Dalej.
Nadaj projektowi nazwę HelloWorldi wybierz Utwórz.
Notatka
Jeśli po raz pierwszy używasz programu Visual Studio do stworzenia aplikacji w Windows App SDK, może pojawić się okno dialogowe Ustawienia. Wybierz tryb deweloperski, a następnie wybierz Tak.
Program Visual Studio instaluje dodatkowy pakiet trybu dewelopera. Po zakończeniu instalacji pakietu zamknij okno dialogowe Ustawienia.
Tworzenie aplikacji
Nadszedł czas, aby rozpocząć opracowywanie. Dodasz kontrolkę przycisku, dodasz akcję do przycisku, a następnie uruchomisz aplikację "Hello World", aby zobaczyć, jak wygląda.
Dodawanie przycisku do kanwy projektu
W eksploratorze rozwiązań kliknij dwukrotnie MainWindow.xaml, aby otworzyć edytor znaczników XAML.
Edytor XAML służy do dodawania lub zmieniania znaczników. W przeciwieństwie do projektów platformy UWP interfejs WinUI 3 nie ma widoku Design.
Przejrzyj kontrolkę przycisk zagnieżdżona w StackPanel w katalogu głównym okna.
Zmienianie etykiety na przycisku
W edytorze XAMLzmień wartość zawartości przycisku z "Kliknij mnie" na "Hello World!".
Zwróć uwagę, że przycisk ma Click - program obsługi zdarzeń o nazwie myButton_Click. Przejdziemy do tego w następnym kroku.
Modyfikowanie programu obsługi zdarzeń
Procedura obsługi zdarzeń jest skomplikowana, ale jest to tylko inna nazwa kodu wywoływanego w przypadku wystąpienia zdarzenia. W takim przypadku dodaje akcję wyzwalaną przez przycisk "Hello World!".
W Eksploratorze rozwiązań kliknij dwukrotnie MainWindow.xaml.cs, pliku zawierającego kod.
Edytuj kod programu obsługi zdarzeń w wyświetlonym oknie edytora języka C#.
Oto, gdzie rzeczy są interesujące. Domyślna procedura obsługi zdarzeń wygląda następująco:
Zmieńmy ją, tak aby wyglądała następująco:
Oto kod do skopiowania i wklejania:
private async void myButton_Click(object sender, RoutedEventArgs e) { var welcomeDialog = new ContentDialog() { Title = "Hello from HelloWorld", Content = "Welcome to your first Windows App SDK app.", CloseButtonText = "Ok", XamlRoot = myButton.XamlRoot }; await welcomeDialog.ShowAsync(); }
Co po prostu zrobiliśmy?
Kod używa kontrolki ContentDialog, aby wyświetlić komunikat powitalny w modalnym wyskakującym oknie w bieżącym oknie. (Aby uzyskać więcej informacji na temat używania Microsoft.UI.Xaml.Controls.ContentDialog
, zobacz ContentDialog Class.)
Uruchamianie aplikacji
Nadszedł czas, aby skompilować, wdrożyć i uruchomić aplikację zestawu SDK aplikacji systemu Windows "Hello World", aby zobaczyć, jak wygląda. Oto jak to zrobić.
Użyj przycisku Odtwarzania (ma tekst HelloWorld (pakiet)), aby uruchomić aplikację na komputerze lokalnym.
(Alternatywnie możesz wybrać Debugowanie>Rozpocznij debugowanie na pasku menu lub nacisnąć F5, aby uruchomić aplikację).
Obejrzyj swoją aplikację, która pojawi się wkrótce po zniknięciu ekranu powitalnego. Aplikacja powinna wyglądać podobnie do poniższej ilustracji:
Wybierz przycisk Hello World.
Na urządzeniu z systemem Windows 10 lub nowszym zostanie wyświetlony komunikat "Witamy w pierwszej aplikacji zestawu SDK aplikacji systemu Windows" z tytułem "Hello from HelloWorld". Kliknij przycisk ok, aby odrzucić komunikat.
Aby zamknąć aplikację, wybierz przycisk Zatrzymaj debugowanie na pasku narzędzi. (Alternatywnie, wybierz Debugowanie>Zatrzymaj debugowanie z paska menu lub naciśnij Shift+F5).
Następne kroki
Gratulujemy ukończenia tego samouczka! Mamy nadzieję, że znasz podstawowe informacje o zestawie SDK aplikacji systemu Windows, winui 3 i środowisku IDE programu Visual Studio. Aby dowiedzieć się więcej, przejdź do następującego samouczka:
Zobacz też
- Pisanie aplikacji dla systemu Windows: wybieranie technologii programowania
- Omówienie zestawu SDK aplikacji systemu Windows
- zestaw SDK aplikacji systemu Windows / przykłady winUI 3