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#

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

Notatka

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

Warunki wstępne

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

  • Obciążenia i składniki wymagane do tworzenia za pomocą interfejsu WinUI i zestawu SDK aplikacji systemu Windows. Aby zweryfikować lub zainstalować pakiet w programie Visual Studio, wybierz Tools>Get Tools and Features. 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:

    • Aby rozpocząć rozwój aplikacji w C# przy użyciu Windows App SDK, wybierz rozwój aplikacji na system Windows.

Tworzenie projektu

Najpierw utwórz projekt WinUI 3. Typ projektu jest dostarczany ze wszystkimi potrzebnymi plikami szablonów, zanim jeszcze cokolwiek dodasz.

Ważny

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

Notatka

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 w Visual Studio.

  • Najnowszą stabilną wersję 1.1.x programu VSIX można zainstalować w programie Visual Studio. Wybierz opcję Rozszerzenia>Zarządzaj rozszerzeniami, wyszukaj Windows App SDKi pobierz rozszerzenie Windows App SDK. 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 Marketplacei zainstalować je:

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 Zainstaluj narzędzia dla Windows App SDK. 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 Utwórz nowy projekt wprowadź WinUI w polu wyszukiwania, wybierz szablon C# dla Pusta aplikacja, pakietowana (WinUI 3 na komputerze), a następnie wybierz Dalej.

    Zrzut ekranu przedstawiający okno dialogowe

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

    Zrzut ekranu przedstawiający okno dialogowe

    Notatka

    Jeśli po raz pierwszy używasz programu Visual Studio do stworzenia aplikacji w Windows App SDK, może pojawić się okno dialogowe Ustawienia. Wybierz tryb deweloperski, a następnie wybierz Tak.

    Zrzut ekranu przedstawiający okno dialogowe Ustawienia z opcją włączania trybu dewelopera.

    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 eksploratorze rozwiązań kliknij dwukrotnie MainWindow.xaml, aby otworzyć edytor znaczników XAML.

    Zrzut ekranu okna Eksploratora rozwiązań przedstawiający właściwości, odwołania, zasoby i pliki w projekcie HelloWorld. Plik MainWindow.xaml jest zaznaczony.

    Edytor XAML służy do dodawania lub zmieniania znaczników. W przeciwieństwie do projektów platformy UWP interfejs WinUI 3 nie ma widoku Design.

    Zrzut ekranu przedstawiający plik MainWindow.xaml otwarty w środowisku IDE programu Visual Studio. Okienko Edytor XAML zawiera znaczniki XAML dla okna.

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

    Zrzut ekranu przedstawiający przycisk wyróżniony w edytorze XAML.

Zmienianie etykiety na przycisku

  1. W edytorze XAMLzmień wartość zawartości przycisku z "Kliknij mnie" na "Hello World!".

    Zrzut ekranu przedstawiający kod XAML przycisku w edytorze XAML. Wartość właściwości Content została zmieniona na

  2. Zwróć uwagę, że przycisk ma Click - program obsługi zdarzeń o nazwie myButton_Click. Przejdziemy do tego w następnym kroku.

    Zrzut ekranu przedstawiający kod XAML przycisku w edytorze XAML. Zdarzenie kliknięcia przycisku zostało wyróżnione.

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 Eksploratorze rozwiązań kliknij dwukrotnie MainWindow.xaml.cs, pliku zawierającego kod.

  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:

    Zrzut ekranu przedstawiający kod języka C# dla domyślnego programu obsługi zdarzeń myButton_Click.

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

    Zrzut ekranu przedstawiający kod języka C# dla nowej procedury obsługi zdarzeń asynchronicznych myButton_Click.

    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, aby wyświetlić komunikat powitalny w modalnym wyskakującym oknie w bieżącym oknie. (Aby uzyskać więcej informacji na temat używania Microsoft.UI.Xaml.Controls.ContentDialog, zobacz ContentDialog Class.)

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.

    Zrzut ekranu przedstawiający pole listy rozwijanej otwarte obok przycisku Odtwarzania z wybraną pozycją

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

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

    Zrzut ekranu przedstawiający uruchomioną aplikację Zestawu SDK aplikacji systemu Windows

  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.

    Zrzut ekranu przedstawiający uruchomioną aplikację

  4. Aby zamknąć aplikację, wybierz przycisk Zatrzymaj debugowanie na pasku narzędzi. (Alternatywnie, wybierz Debugowanie>Zatrzymaj debugowanie z paska menu lub naciśnij 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:

Zobacz też