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

Uwaga

Jeśli jesteś zadowolony z bieżących funkcji w platforma uniwersalna systemu Windows (UWP), nie ma potrzeby migrowania typu projektu do zestawu SDK aplikacji systemu Windows. WinUI 2.x i zestaw Windows SDK obsługują typy projektów platformy UNIWERSALNEJ systemu 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 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 platforma uniwersalna systemu Windows (UWP), języka programowania Extensible Application Markup Language (XAML) i języka programowania C#.

Jeśli program Visual Studio nie został jeszcze zainstalowany, przejdź do strony pobierania programu Visual Studio, aby zainstalować ją bezpłatnie.

Tworzenie projektu

Najpierw utwórz projekt platforma uniwersalna systemu Windows. Typ projektu jest dostarczany ze wszystkimi potrzebnymi plikami szablonów, zanim jeszcze wszystko zostało dodane.

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 pozycji Pusta aplikacja (uniwersalny system Windows), a następnie wybierz przycisk Dalej.

   

   Uwaga

   Jeśli nie widzisz szablonu projektu Pusta aplikacja (uniwersalny system Windows), kliknij link Zainstaluj więcej narzędzi i funkcji .
   
   
   
   Zostanie uruchomiona Instalator programu Visual Studio. Wybierz obciążenie programistyczne platforma uniwersalna systemu Windows, a następnie wybierz pozycję Modyfikuj.
   
   

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

   

4. Zaakceptuj domyślne ustawienia Wersja docelowa i Minimalna wersja w oknie dialogowym Nowy projekt platforma uniwersalna systemu Windows.

   

   Uwaga

   Jeśli po raz pierwszy użyto programu Visual Studio do utworzenia aplikacji platformy UNIWERSALNEJ systemu Windows, zostanie wyświetlone okno dialogowe Włączanie trybu dewelopera dla systemu Windows . Wybierz ustawienia dla deweloperów, aby otworzyć Ustawienia. Włącz tryb dewelopera, a następnie wybierz pozycję 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 Eksplorator rozwiązań kliknij dwukrotnie plik 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 pozycję Przybornik , aby otworzyć okno wysuwane przybornika.

   

   (Jeśli nie widzisz Opcja przybornika, którą można otworzyć na pasku menu. W tym celu wybierz pozycję Wyświetl>pasek narzędzi. Możesz też nacisnąć klawisze Ctrl+Alt+X.

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

   

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

   

   Jeśli spojrzysz na kod w edytorze XAML, zobaczysz, że przycisk został tam dodany, zbyt:

   

Dodawanie etykiety do przycisku

1. W edytorze XAML zmień wartość zawartości przycisku z "Button" na "Hello World!".

   

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

   

Dodawanie procedury obsługi zdarzeń

Procedura obsługi zdarzeń jest 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 pliku MainPage.xaml.cs na stronie kodowej.

   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 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 po prostu 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 korzystania z programu 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ć Debuguj>uruchamianie debugowania na pasku menu lub naciśnij klawisz F5 , aby uruchomić aplikację).

2. Wyświetl 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.

   Urządzenie z systemem Windows 10 lub nowszym dosłownie powie: "Hello, World!".

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

Następne kroki

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

Zobacz też

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