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

  • Artykuł

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.

    Screenshot of the 'Create a new project' dialog with 'universal windows' entered in the search box, and the 'Blank App (Universal Windows)' project template highlighted.

    Uwaga

    Jeśli nie widzisz szablonu projektu Pusta aplikacja (uniwersalny system Windows), kliknij link Zainstaluj więcej narzędzi i funkcji .

    Screenshot of the Create a new project window showing the 'Install more tools and features' link.

    Zostanie uruchomiona Instalator programu Visual Studio. Wybierz obciążenie deweloperskie platforma uniwersalna systemu Windows, a następnie wybierz pozycję Modyfikuj.

    Screenshot of the Visual Studio Installer showing the Universal Windows Platform development workload.

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

    Screenshot of the 'Configure your new project' dialog with 'HelloWorld' entered in the Project name field.

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

    Screenshot of the New Universal Windows Platform Project dialog box showing the default Target version and Minimum version settings.

    Uwaga

    Jeśli po raz pierwszy użyto programu Visual Studio do utworzenia aplikacji platformy UNIWERSALNEJ systemu Windows, może zostać wyświetlone okno dialogowe Ustawienia. Wybierz pozycję Tryb dewelopera, a następnie wybierz pozycję Tak.

    Screenshot showing the UWP Settings dialog box with the option for enabling Developer Mode.

    Program Visual Studio instaluje dodatkowy pakiet trybu dewelopera. Po zakończeniu instalacji pakietu zamknij okno dialogowe Ustawienia.

  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.

    Screenshot of the 'Create a new project' dialog with 'Universal Windows' entered in the search box, and the 'Blank App (Universal Windows)' project template highlighted.

    Uwaga

    Jeśli nie widzisz szablonu projektu Pusta aplikacja (uniwersalny system Windows), kliknij link Zainstaluj więcej narzędzi i funkcji .

    Screenshot of the Create a new project window showing the 'Install more tools and features' link.

    Zostanie uruchomiona Instalator programu Visual Studio. Wybierz obciążenie programistyczne platforma uniwersalna systemu Windows, a następnie wybierz pozycję Modyfikuj.

    Screenshot of the Visual Studio Installer showing the Universal Windows Platform development workload.

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

    Screenshot of the 'Configure your new project' dialog with 'HelloWorld' entered in the Project name field.

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

    Screenshot of the New Universal Windows Platform Project dialog box showing the default Target version and Minimum version settings.

    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.

    Screenshot showing the UWP Settings dialog box with the option for enabling Developer Mode.

    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.

    Screenshot of the Solution Explorer window showing the properties, references, assets, and files in the HelloWorld project. The file MainPage.xaml is selected.

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

    Screenshot showing MainPage.xaml open in the Visual Studio IDE. The XAML Designer pane shows a blank design surface and the XAML Editor pane shows some of the XAML code.

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

    Screenshot showing the tab for the 'Toolbox' fly-out window highlighted on the left side of the XAML Designer Pane.

    (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. Kliknij ikonę Przypnij, aby zadokować okno Przybornik.

    Screenshot showing the Pin icon highlighted in the top bar of the Toolbox window.

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

    Screenshot showing 'Button' highlighted in the Toolbox window and a Button control on the design canvas.

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

    Screenshot showing the code for the newly added Button highlighted in the XAML editor.

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

    Screenshot of the Solution Explorer window showing the properties, references, assets, and files in the HelloWorld project. The file MainPage.xaml is selected.

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

    Screenshot showing MainPage.xaml open in the Visual Studio IDE. The XAML Designer pane shows a blank design surface and the XAML Editor pane shows some of the XAML code.

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

    Screenshot showing the tab for the 'Toolbox' fly-out window highlighted on the left side of the XAML Designer Pane.

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

    Screenshot showing the Pin icon highlighted in the top bar of the Toolbox window.

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

    Screenshot showing 'Button' highlighted in the Toolbox window and a Button control on the design canvas.

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

    Screenshot showing the code for the newly added Button highlighted in the XAML editor.

Dodawanie etykiety do przycisku

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

    Screenshot showing the XAML code for the Button in the XAML editor. The value of the Content property has been changed to 'Hello World!'.

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

    Screenshot showing the Button control on the canvas of the XAML Designer. The label of the button has been changed to 'Hello World!'.

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

    Screenshot showing the XAML code for the Button in the XAML editor. The value of the Content property has been changed to 'Hello World!'.

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

    Screenshot showing the Button control on the canvas of the XAML Designer. The label of the button has been changed to 'Hello World!'.

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:

    Screenshot showing the C# code for the default Button_Click event handler.

    Zmieńmy ją, tak aby wyglądała następująco:

    Screenshot showing the C# code for the new async Button_Click event handler.

    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();
}

  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:

    Screenshot showing the C# code for the default Button_Click event handler.

    Zmieńmy ją, tak aby wyglądała następująco:

    Screenshot showing the C# code for the new async Button_Click event handler.

    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.

    Screenshot showing the drop-down box open next to the Play button with 'Local Machine' selected.

    (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ć mniej więcej tak:

    Screenshot showing the running UWP 'Hello World' application.

  3. Kliknij przycisk Hello World (Witaj , świecie ).

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

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

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.

    Screenshot showing the drop-down box open next to the Play button with 'Local Machine' selected.

    (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:

    Screenshot showing the running UWP 'Hello World' application.

  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ż