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 Windows App SDK.

W tym samouczku:

• Tworzenie projektu
• Tworzenie aplikacji
• Uruchamianie aplikacji

Warunki wstępne

Do ukończenia tego samouczka potrzebny jest program Visual Studio. Odwiedź stronę pobierania Visual Studio bezpłatną wersję.

Nota

Ten samouczek wymaga szablonu projektu pustej aplikacji (uniwersalnej systemu Windows). Podczas instalacji wybierz obciążenie programowania platformy uniwersalnej systemu Windows:

Jeśli masz już zainstalowany program Visual Studio i musisz dodać nowe funkcje, w menu wybierz pozycję Narzędzia >Pobierz narzędzia i funkcje, lub w oknie Tworzenie nowego projektu wybierz łącze Zainstaluj więcej narzędzi i funkcji.

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 Twórz nowy projekt wprowadź Universal Windows w polu wyszukiwania, wybierz szablon języka C# dla Pustej aplikacji (Universal Windows), a następnie kliknij Dalej.

   

3. Nadaj projektowi nazwę HelloWorldi wybierz Utwórz.

   

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

   

   Notatka

   Jeśli jest to pierwszy raz, gdy 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 programisty, a następnie wybierz opcję 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, oraz edytor XAML, gdzie można dodać lub zmienić kod.

   

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

   

   Jeśli nie widzisz opcji przybornika, możesz ją otworzyć na pasku menu. W tym celu wybierz View>Toolbar. Lub naciśnij Ctrl+Alt+X.

3. Wybierz ikonę Przypnij, aby zadokować okno Przybornika.

   

4. Wybierz kontrolkę Button, 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ń wartość Button Content z Button na Hello World!

   

2. Zwróć uwagę, że przycisk w projektancie XAML także ulega zmianie.

   

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. Zmodyfikuj kod programu obsługi zdarzeń w MainPage.xaml.cs, na stronie za pomocą kodu.

   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 Odtwarzania (ma tekst Komputer lokalny), aby uruchomić aplikację na komputerze lokalnym.

   

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

2. Wyświetl aplikację, która pojawi się wkrótce po zniknięciu ekranu startowego. 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ę Debugowanie>Zatrzymaj debugowanie na pasku menu lub naciśnij Shift+F5.

Powiązana zawartość

• omówienie platformy UWP
• Zdobądź przykłady aplikacji 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