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:

  Visual Studio 2022 w wersji 17.10 lub nowszej

  • Aby rozpocząć rozwój aplikacji w C# przy użyciu Windows App SDK, wybierz rozwój aplikacji na system Windows.

  Visual Studio 2022 w wersji 17.1 — 17.9

  • Aby uzyskać tworzenie aplikacji w języku C# przy użyciu zestawu SDK aplikacji systemu Windows, wybierz .NET Desktop Development.
  • Następnie w okienku Szczegóły instalacji okna dialogowego instalacji wybierz pozycję Szablony języka C# zestawu SDK aplikacji systemu Windows (w dolnej części listy).

Tworzenie projektu

Najpierw utwórz projekt WinUI 3. Typ projektu jest dostarczany ze wszystkimi potrzebnymi plikami szablonów, zanim jeszcze cokolwiek dodasz.

1. Otwórz program Visual Studio, a następnie w oknie uruchamiania wybierz pozycję Utwórz nowy projekt.

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

   

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

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

   

2. Przejrzyj kontrolkę przycisk zagnieżdżona w StackPanel w katalogu głównym okna.

   

Zmienianie etykiety na przycisku

1. W edytorze XAMLzmień wartość zawartości przycisku z "Kliknij mnie" na "Hello World!".

   

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

1. W Eksploratorze rozwiązań kliknij dwukrotnie MainWindow.xaml.cs, pliku zawierającego kod.

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

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

2. Obejrzyj swoją aplikację, która pojawi się wkrótce po zniknięciu ekranu powitalnego. Aplikacja powinna wyglądać podobnie do poniższej ilustracji:

   

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

   

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

samouczek : tworzenie prostej przeglądarki zdjęć za pomocą interfejsu WinUI 3

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