Udostępnij za pośrednictwem

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

  • Artykuł

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

Uwaga

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 pobierania programu Visual Studio, aby zainstalować ją bezpłatnie.

Tworzenie projektu

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

Ważne

Program Visual Studio 2019 obsługuje tylko zestaw Windows App SDK 1.1 i starsze wersje. Program Visual Studio 2022 jest zalecany do tworzenia aplikacji ze wszystkimi wersjami zestawu Windows App SDK.

Szablony zestawu Windows App SDK 1.1.x są dostępne przez zainstalowanie rozszerzenia programu Visual Studio (VSIX).

Uwaga

Jeśli masz już zainstalowane rozszerzenie visual studio zestawu SDK aplikacji systemu Windows (VSIX), odinstaluj je przed zainstalowaniem innej wersji. Aby uzyskać wskazówki, zobacz Zarządzanie rozszerzeniami dla programu Visual Studio.

  • Najnowszą stabilną wersję 1.1.x programu VSIX można zainstalować w programie Visual Studio. Wybierz pozycję Rozszerzenia Zarządzaj rozszerzeniami>, wyszukaj pozycję Zestaw SDK aplikacji systemu Windows i pobierz rozszerzenie zestawu SDK aplikacji systemu Windows. Zamknij i otwórz ponownie program Visual Studio, a następnie postępuj zgodnie z monitami, aby zainstalować rozszerzenie. Upewnij się, że zainstalowano szablony dla zestawu Windows App SDK 1.1.
  • Alternatywnie możesz pobrać rozszerzenie bezpośrednio z witryny Visual Studio Marketplace i zainstalować je:

Pobierz szablony zestawu SDK aplikacji systemu Windows dla języka C# dla programu VS2019

Po zainstalowaniu rozszerzenia szablonów możesz utworzyć swój pierwszy projekt. Aby uzyskać więcej informacji na temat obsługi programu Visual Studio 2019, zobacz Instalowanie narzędzi dla zestawu SDK aplikacji systemu Windows. W pozostałej części tego samouczka założono, że używasz programu Visual Studio 2022.

  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ź WinUIw polu wyszukiwania, wybierz szablon języka C# dla pustej aplikacji, spakowany (WinUI 3 w programie Desktop), a następnie wybierz przycisk Dalej.

    Screenshot of the 'Create a new project' dialog with 'WinUI' entered in the search box, and the 'Blank App, Packaged (WinUI 3 in Desktop)' project template highlighted.

    Uwaga

    Jeśli nie widzisz szablonu projektu Pusta aplikacja, Spakowane (WinUI 3 w programie Desktop), 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 Programowanie aplikacji klasycznych platformy .NET, a następnie w okienku Szczegóły instalacji okna dialogowego wybierz pozycję Szablony języka C# zestawu SDK aplikacji systemu Windows (w dolnej części listy). Teraz wybierz pozycję Modyfikuj.

    Screenshot of the Visual Studio Installer showing the .NET Desktop 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.

    Uwaga

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

    Screenshot showing the 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 MainWindow.xaml, aby otworzyć edytor znaczników XAML.

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

    Edytor XAML to miejsce, w którym można dodawać lub zmieniać znaczniki. W przeciwieństwie do projektów platformy UWP interfejs WinUI 3 nie ma widoku projektowego.

    Screenshot showing MainWindow.xaml open in the Visual Studio IDE. The XAML Editor pane shows the XAML markup for the window.

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

    Screenshot showing 'Button' highlighted in the XAML editor.

Zmienianie etykiety na przycisku

  1. W edytorze XAML zmień wartość Zawartości przycisku z "Kliknij mnie" 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 ma program obsługi zdarzeń click o nazwie myButton_Click określony. Przejdziemy do tego w następnym kroku.

    Screenshot showing the XAML code for the Button in the XAML editor. The click event of the button has been highlighted.

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 Eksplorator rozwiązań kliknij dwukrotnie plik MainWindow.xaml.cs na stronie kodowej.

  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:

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

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

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

    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 do wyświetlania komunikatu powitalnego w modalnym kontrolce podręcznej w bieżącym oknie. (Aby uzyskać więcej informacji na temat korzystania z klasy Microsoft.UI.Xaml.Controls.ContentDialog, zobacz Klasa ContentDialog).

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.

    Screenshot showing the drop-down box open next to the Play button with 'HelloWorld (Package)' 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 Windows App SDK 'Hello World' application.

  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.

    Screenshot showing the running 'Hello World' application with a popup titled 'Hello from HelloWorld'.

  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 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ż