Samouczek: tworzenie pierwszej aplikacji platformy uniwersalnej systemu Windows w programie Visual Studio przy użyciu języka XAML i C#

W tym samouczku jako wprowadzenie do zintegrowanego środowiska projektowego programu Visual Studio (IDE) tworzysz aplikację "Hello World", która działa na dowolnym urządzeniu z systemem Windows 10 lub nowszym. W tym celu należy użyć szablonu projektu platformy uniwersalnej systemu Windows (UWP), języka programowania Extensible Application Markup Language (XAML) i języka programowania C#.

Notatka

Jeśli korzystasz z bieżących funkcji na platformie uniwersalnej systemu Windows (UWP), nie trzeba migrować typu projektu do zestawu SDK aplikacji systemu Windows. WinUI 2.x i zestaw SDK systemu Windows obsługują typy projektów Uniwersalnej platformy Windows. Jeśli chcesz rozpocząć pracę z zestawem WinUI 3 i zestawem SDK aplikacji systemu Windows, możesz wykonać kroki opisane w samouczku dotyczącym zestawu SDK aplikacji systemu Windows.

W tym samouczku:

• Tworzenie projektu
• Tworzenie aplikacji
• Uruchamianie aplikacji

Warunki wstępne

Potrzebujesz:

• Visual Studio. Odwiedź stronę pobierania programu Visual Studio , aby uzyskać bezpłatną wersję.

• Obciążenia i składniki wymagane do tworzenia aplikacji platformy UWP. Aby zweryfikować lub zainstalować zestaw funkcji w programie Visual Studio, wybierz pozycję Narzędzia>Pobierz narzędzia i funkcje, lub na ekranie Tworzenie nowego projektu wybierz link Zainstaluj więcej narzędzi i funkcji. 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:

  Program Visual Studio 2022 w wersji 17.10 lub nowszej

  • W przypadku tworzenia aplikacji przy użyciu platformy UWP wybierz obciążenie Tworzenie aplikacji WinUI . Następnie w okienku Szczegóły instalacji w węźle programowania aplikacji WinUI wybierz wymaganą opcję platformy UWP (spowoduje to również wybranie dodatkowych wymaganych składników)

  • W języku C# wybierz pozycję Narzędzia platformy uniwersalnej systemu Windows i zestaw Windows 11 SDK (10.0.26100.0).

  • Ten samouczek wymaga wzorca projektu Pusta aplikacja UWP.

  Visual Studio 2022 w wersji 17.1 — 17.9

  • W przypadku tworzenia aplikacji w języku C# przy użyciu platformy UWP, wybierz zestaw narzędzi platforma uniwersalna systemu Windows.

  • Ten samouczek wymaga szablonu projektu Pusta Aplikacja (Uniwersalny system Windows).

  Notatka

  W programie Visual Studio 17.10 — 17.12 to obciążenie jest nazywane programowaniem aplikacji systemu Windows.

Tworzenie projektu

Najpierw utwórz projekt platformy uniwersalnej systemu Windows. Typ projektu jest dostarczany ze wszystkimi potrzebnymi plikami szablonów, zanim cokolwiek dodasz!

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

2. Na ekranie Tworzenie nowego projektu wprowadź ciąg Uniwersalny system Windows w polu wyszukiwania, wybierz szablon języka C# dla pustej aplikacji (uniwersalnej systemu Windows) lub pustej aplikacji platformy UWP w programie Visual Studio 2022 17.10 lub nowszym, a następnie wybierz przycisk Dalej.

   

3. Nadaj projektowi nazwę HelloWorld i wybierz pozycję Utwórz.

   

4. Zaakceptuj domyślne ustawienia wersji docelowej i minimalnej wersji w oknie dialogowym Nowy projekt platformy uniwersalnej systemu Windows .

   

   Notatka

   Jeśli po raz pierwszy używasz programu Visual Studio do utworzenia aplikacji UWP, pojawi się okno dialogowe Włącz tryb dewelopera dla systemu Windows. Wybierz ustawienia dla deweloperów , aby otworzyć ustawienia. Włącz tryb dewelopera, a następnie wybierz pozycję Tak.

   

   Visual Studio instaluje dla Ciebie dodatkowy pakiet Trybu dewelopera. Po zakończeniu instalacji pakietu zamknij okno dialogowe Ustawienia .

Tworzenie aplikacji

Nadszedł czas, aby rozpocząć opracowywanie. Dodaj kontrolkę przycisku, dodaj akcję do przycisku, a następnie uruchom aplikację "Hello World", aby zobaczyć, jak wygląda.

Dodawanie przycisku do kanwy projektu

1. W eksploratorze rozwiązań kliknij dwukrotnie MainPage.xaml, aby otworzyć widok podzielony.

   

   Istnieją dwa okienka: Projektant XAML, który zawiera kanwę projektu i edytor XAML, w którym można dodać lub zmienić kod.

   

2. Wybierz Przybornik, aby otworzyć okno wysuwane Przybornik.

   

   Jeśli nie widzisz opcji Przybornik , możesz ją otworzyć na pasku menu. W tym celu wybierz Widok>Pasek narzędzi. Lub naciśnij Ctrl+Alt+X.

3. Wybierz ikonę Przypnij, aby zadokować okno Narzędzia.

   

4. Wybierz kontrolkę Przycisk , a następnie przeciągnij ją na kanwę projektu.

   

   Jeśli spojrzysz na kod w edytorze XAML , zobaczysz, że przycisk również tam pojawi się:

   

Dodawanie etykiety do przycisku

1. W Edytorze XAML zmień Button Content wartość z Button na Hello World!

   

2. Zwróć uwagę, że przycisk w projektancie XAML również się zmienia.

   

Dodawanie programu obsługi zdarzeń

Procedura obsługi zdarzeń wydaje się skomplikowana, ale jest to tylko inna nazwa kodu wywoływanego w przypadku wystąpienia zdarzenia. W tym przypadku dodaje akcję do przycisku Hello World!

1. Kliknij dwukrotnie kontrolkę przycisku na kanwie projektu.

2. Edytuj kod programu obsługi zdarzeń w MainPage.xaml.cs, pliku zaplecza.

   Oto, gdzie rzeczy są interesujące. Domyślna procedura obsługi zdarzeń wygląda następująco:

   

   Zmień ją, więc wygląda następująco:

   

   Oto kod do skopiowania i wklejania:

   private async void Button_Click(object sender, RoutedEventArgs e)
   {
      MediaElement mediaElement = new MediaElement();
      var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
      Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
      mediaElement.SetSource(stream, stream.ContentType);
      mediaElement.Play();
   }
   

Co my właśnie zrobiliśmy?

Kod używa niektórych interfejsów API systemu Windows do utworzenia obiektu syntezy mowy, a następnie daje mu jakiś tekst do powiedzenia. Aby uzyskać więcej informacji na temat używania SpeechSynthesis, zobacz System.Speech.Synthesis.

Uruchamianie aplikacji

Nadszedł czas, aby skompilować, wdrożyć i uruchomić aplikację platformy UWP "Hello World", aby zobaczyć, jak wygląda i brzmi. Oto jak to zrobić.

1. Użyj przycisku Odtwórz (ma tekst Maszyna lokalna), aby uruchomić aplikację na komputerze lokalnym.

   

   Alternatywnie możesz wybrać pozycję Debuguj>rozpocznij debugowanie na pasku menu lub nacisnąć F5 , aby uruchomić aplikację.

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

   

3. Wybierz przycisk Hello World .

   Urządzenie z systemem Windows 10 lub nowszym dosłownie mówi: "Hello, World!"

4. Aby zamknąć aplikację, wybierz przycisk Zatrzymaj debugowanie na pasku narzędzi. Alternatywnie wybierz pozycję Debuguj Zatrzymaj>debugowanie na pasku menu lub naciśnij Shift+F5.

Powiązana zawartość

• Omówienie platformy UWP
• Pobieranie przykładów aplikacji platformy UWP

Następny krok

Gratulujemy ukończenia tego samouczka! Mamy nadzieję, że znasz podstawy platformy UWP i środowiska IDE programu Visual Studio. Aby dowiedzieć się więcej, przejdź do następującego samouczka:

Tworzenie interfejsu użytkownika