Oktatóanyag: Az első Windows App SDK-alkalmazás létrehozása a Visual Studióban XAML és C használatával#

A Visual Studio integrált fejlesztői környezetének (IDE) ebben a bevezetőjében létrehoz egy "Hello World" alkalmazást, amely bármely Windows 10-es vagy újabb eszközön fut. Ehhez Windows App SDK (WinUI 3) projektsablont, XAML-t (Extensible Application Markup Language, XAML) és C# programozási nyelvet használ.

Jegyzet

A WinUI 3 a Windows App SDK-t tartalmazó natív felhasználói felületi platformösszetevő. Teljesen leválasztva van a Windows SDK-ról. További információ: WinUI 3.

Előfeltételek

  • Az oktatóanyag elvégzéséhez a Visual Studio 2026-ra vagy a Visual Studio 2022 legújabb verziójára van szüksége. Az ingyenes verzióért tekintse meg a Visual Studio letöltéseit.
  • A WinUI és a Windows App SDK használatával történő fejlesztéshez szükséges számítási feladatok és összetevők. Ha ellenőrizni vagy telepíteni szeretne egy számítási feladatot a Visual Studióban, válassza az Eszközök>Eszközök és szolgáltatások lekéréselehetőséget. További információért lásd: Számítási feladatok vagy egyes összetevők módosítása.

A Visual Studio Installer Számítási feladatok lapján válassza a következőket:

A Windows App SDK-val történő C# -alkalmazásfejlesztéshez válassza a WinUI-alkalmazásfejlesztés lehetőséget.

A Windows App SDK-val történő C# -alkalmazásfejlesztéshez válassza a WinUI-alkalmazásfejlesztés lehetőséget.

Jegyzet

A Visual Studio 17.10- 17.12-ben ezt a számítási feladatot Windows-alkalmazásfejlesztésnek nevezzük.

További információ: Eszközök telepítése a Windows App SDK-hoz.

Projekt létrehozása

Először hozzon létre egy WinUI 3 projektet. A projekt típusa tartalmazza az összes szükséges sablonfájlt, mielőtt bármit is hozzáadna!

  1. Nyissa meg a Visual Studiót, és a kezdési ablakban válassza az Új projekt létrehozásalehetőséget.

  2. Az Új projekt létrehozása képernyőn írja be a WinUI kifejezést a keresőmezőbe, válassza ki a WinUI Üres alkalmazás (Csomagolt) C# sablonját, majd válassza a Tovább gombot.

    Képernyőkép az

  3. Adjon nevet a projektnek, HelloWorld, és válassza a létrehozása lehetőséget.

    Képernyőkép az

  1. Nyissa meg a Visual Studiót, és a kezdési ablakban válassza az Új projekt létrehozásalehetőséget.

  2. Az Új projekt létrehozása képernyőn írja be a winui kifejezést a keresőmezőbe, válassza a C# sablont az Üres alkalmazás, a Csomagolt (WinUI 3 az asztalon) C# sablonhoz, majd válassza a Tovább gombot.

    Képernyőkép a Visual Studio 2022

  3. Adjon nevet a projektnek, HelloWorld, és válassza a létrehozása lehetőséget.

    Képernyőkép a Visual Studio 2022

Jegyzet

Ha ez a cikk az első alkalom, hogy Windows App SDK-alkalmazást hoz létre a Visual Studióval, megjelenik egy Beállítások párbeszédpanel. Válassza a Fejlesztői módlehetőséget, majd válassza Igenlehetőséget.

Képernyőkép a Beállítások párbeszédpanelről a fejlesztői mód engedélyezésének lehetőségével.

A Visual Studio egy másik fejlesztői módú csomagot telepít Önnek. Ha a csomag telepítése befejeződött, zárja be a Beállítások párbeszédpanelt.

Az alkalmazás létrehozása

Ideje elkezdeni a fejlesztést. Itt hozzáad egy gombvezérlőt, hozzáad egy műveletet a gombhoz, majd futtassa a Hello World alkalmazást, hogy lássa, hogyan néz ki.

Gomb hozzáadása a tervezővászonhoz

  1. A Megoldáskezelőablakban kattintson duplán a MainWindow.xaml fájlra az XAML jelölés szerkesztő megnyitásához.

    Képernyőkép a Megoldáskezelő ablakáról, amelyen a HelloWorld projekt tulajdonságai, hivatkozásai, eszközei és fájljai láthatók, a MainWindow.xaml fájl ki van választva.

    A XAML-szerkesztőben adhatja hozzá vagy módosíthatja a jelölést. Az UWP-projektektől eltérően a WinUI 3 nem rendelkezik Tervezési nézettel.

    Képernyőkép a MainWindow.xaml megnyitásáról a Visual Studio IDE-ben. Az XAML-szerkesztő panelen látható az ablak XAML-korrektúrajelölése.

  2. Az <Button elemen belül kezdjen el gépelni <Grid>. Az Intellisense egy gombbeállítást kínál. Az elfogadáshoz nyomja le a Tab billentyűt .

    Képernyőkép az XAML-szerkesztőben kiemelt

  1. A Megoldáskezelőablakban kattintson duplán a MainWindow.xaml fájlra az XAML jelölés szerkesztő megnyitásához.

    Képernyőkép a Visual Studio 2022 Megoldáskezelő ablakáról, amelyen a HelloWorld projekt tulajdonságai, hivatkozásai, eszközei és fájljai láthatók, és a MainWindow.xaml fájl van kiválasztva.

    A XAML-szerkesztőben adhatja hozzá vagy módosíthatja a jelölést. Az UWP-projektektől eltérően a WinUI 3 nem rendelkezik Tervezési nézettel.

    Képernyőkép a MainWindow.xaml megnyitásáról a Visual Studio 2022 IDE-ben. Az XAML-szerkesztő panelen látható az ablak XAML-korrektúrajelölése.

  2. Tekintse át a Gomb vezérlőt, amely a StackPanel-ben található, a Ablakgyökérszintjén.

    Képernyőkép az XAML-szerkesztőben kiemelt

Címke módosítása a gombon

  1. Az XAML-szerkesztőben módosítsa a Gombtartalom értékét az aktuális értékről a "Hello World!" értékre.

    Képernyőkép, amely az XAML-szerkesztőben megjelenő gomb XAML-kódját mutatja, ahol a Tartalom tulajdonság értéke „Hello World!”-re van változtatva.

  2. Helyezze a kurzort az <Button> elem kezdőcímkéjére (a meglévő attribútumok, például Content) után, és kezdje el beírni a Click billentyűt. Az Intellisense egy Button_Click nevű új eseménykezelőt kínál. A kóddal a következő szakaszban dolgozhat.

    Képernyőkép az XAML-szerkesztőben lévő gomb XAML-kóddal rendelkező kódjáról, a gomb kattintási eseményének kiemelésével.

  1. Az XAML-szerkesztőben módosítsa a Gombtartalom értékét az aktuális értékről a "Hello World!" értékre.

    Képernyőkép a Visual Studio 2022 XAML-szerkesztőjében található Gomb XAML-kódjával, a Tartalom tulajdonság értéke pedig Hello World!

  2. Figyelje meg, hogy a gombhoz egy Click eseménykezelő, nevezetesen a myButton_Click van megadva. Ezzel a következő lépésben kell dolgoznia.

    Képernyőkép a Visual Studio 2022 XAML-szerkesztőjében található gomb XAML-kódjával, a gomb kattintási eseményének kiemelésével.

Az eseménykezelő módosítása

Egy eseménykezelő bonyolultnak hangzik, de ez csak egy másik neve annak a kódnak, amelyet esemény bekövetkezésekor hívunk meg. Ebben az esetben hozzáad egy műveletet, amelyet a Hello World aktivál! gomb

  1. Kattintson duplán a MainWindow.xaml.csfájlra, amely a kód mögötti fájl, a Megoldáskezelő-ben.

  2. Szerkessze az eseménykezelő kódot a megnyíló C# szerkesztőablakban.

    Itt érdekesek a dolgok. Az alapértelmezett eseménykezelő a következőképpen néz ki:

    Képernyőkép az alapértelmezett Button_Click eseménykezelő C#-kódját ábrázoló képernyőképről.

    Változtassuk meg, így néz ki:

    Az új aszinkron myButton_Click eseménykezelő C#-kódját bemutató képernyőkép.

    Másolja és illessze be az alábbi kódot:

    private async void Button_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 = ((FrameworkElement)sender).XamlRoot
    };
    await welcomeDialog.ShowAsync();
}

  1. Kattintson duplán a MainWindow.xaml.csfájlra, amely a kód mögötti fájl, a Megoldáskezelő-ben.

  2. Szerkessze az eseménykezelő kódot a megnyíló C# szerkesztőablakban.

    Itt érdekesek a dolgok. Az alapértelmezett eseménykezelő a következőképpen néz ki:

    A Visual Studio 2022 alapértelmezett Button_Click eseménykezelőjének C#-kódját bemutató képernyőkép.

    Változtassuk meg, így néz ki:

    A Visual Studio 2022 új aszinkron myButton_Click eseménykezelőjének C#-kódját bemutató képernyőkép.

    Másolja és illessze be az alábbi kódot:

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

Mit csináltunk most?

A kód a ContentDialog vezérlővel jelenít meg egy üdvözlő üzenetet egy modális előugró vezérlőben az aktuális ablakban. A Microsoft.UI.Xaml.Controls.ContentDialog használatáról további információt a ContentDialog osztály cikkben talál.

Az alkalmazás futtatása

Ideje létrehozni, üzembe helyezni és elindítani a Hello World Windows App SDK alkalmazást, hogy lássa, hogyan néz ki. Íme, hogyan.

  1. A Lejátszás gombbal indítsa el az alkalmazást a helyi gépen. Ez a szöveg HelloWorld (Csomag).

    Képernyőkép a Lejátszás gomb melletti legördülő menüről, amelyen a

    Másik lehetőségként választhatja a Hibakeresés>Hibakeresés indítása lehetőséget a menüsávból, vagy az alkalmazás elindításához nyomja le a F5 billentyűt.

  2. Tekintse meg az alkalmazást, amely nem sokkal a kezdőképernyő eltűnésekor jelenik meg. Az alkalmazásnak a következő képhez hasonlóan kell kinéznie:

    Képernyőkép a futó Windows App SDK

  3. Válassza a Hello World gombot.

    A Windows 10 vagy újabb rendszerű eszköz "Üdvözöljük az első Windows App SDK-appban" üzenet jelenik meg "Hello from HelloWorld" címmel. Az üzenet bezárásához válassza az OK gombot.

    Képernyőkép a futó

  4. Az alkalmazás bezárásához válassza a Hibakeresés leállítása gombot az eszköztáron. Másik lehetőségként válassza a Hibakeresés>leállítása hibakeresés lehetőséget a menüsávon, vagy nyomja le a Shift+F5 billentyűkombinációt.

Kapcsolódó tartalom

Gratulálunk az oktatóanyag elvégzéséhez! Reméljük, hogy megismerkedett a Windows App SDK, a WinUI 3 és a Visual Studio IDE alapjaival. További információért folytassa az alábbi oktatóanyaggal:

oktatóanyag: Egyszerű fényképmegjelenítő létrehozása WinUI 3

Ezek az erőforrások a következőkben is hasznosak lehetnek:

  • Last updated on