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 egy "Hello World" alkalmazást fog létrehozni, amely bármilyen Windows 10-es vagy újabb eszközön fut. Ehhez a Windows App SDK (WinUI 3) projektsablont, az Extensible Application Markup Language (XAML) és a C# programozási nyelvet fogja használni.

Jegyzet

A WinUI 3 a Windows App SDK natív platformösszetevője a felhasználói felülethez (amely teljesen el van választva a Windows SDK-któl). További információ: WinUI 3.

Ha még nem telepítette a Visual Studiót, lépjen a Visual Studio letöltési lapjára, és telepítse ingyenesen.

Előfeltételek

• Az oktatóanyag elvégzéséhez a Visual Studióra van szüksége. Az ingyenes verzióért látogasson el a Visual Studio letöltési oldalára.

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

  Visual Studio 2022 17.10-es és újabb verziója

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

  Visual Studio 2022 17.1 - 17.9-es

  • Ha C# alkalmazásfejlesztést a Windows App SDK-val, válassza .NET Desktop Developmentlehetőséget.
  • Ezután a telepítési párbeszédpanel Telepítés részletei panelen válassza Windows App SDK C#-sablonok (a lista alján).
  • Az Egyes összetevők lap SDK-k, kódtárak és keretrendszerek szakaszában győződjön meg arról, hogy a Windows 10 SDK (10.0.19041.0) ki van jelölve.

  Egyéb Visual Studio-verziók

  • A Windows App SDK-val végzett C#-alkalmazásfejlesztéshez válassza a .NET Desktop Development lehetőséget.
  • Az Egyes összetevők lap SDK-k, kódtárak és keretrendszerek szakaszában győződjön meg arról, hogy a Windows 10 SDK (10.0.19041.0) ki van jelölve.

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 projekttípus 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. A Új projekt létrehozása képernyőn írja be WinUI a keresőmezőbe, válassza Üres alkalmazás, Csomagolt (WinUI 3 az asztalon)C#-sablont, majd válassza Következőlehetőséget.

   

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

   

   Jegyzet

   Ha most először hoz létre Windows App SDK-alkalmazást 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.
   
   
   
   A Visual Studio egy további 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. 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.

   

   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.

   

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

   

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

1. A XAML-szerkesztő-ben módosítsa a Gomb szövegét "Kattintásra" értékről "Hello World!" értékre.

   

2. Figyelje meg, hogy a gombhoz egy Click eseménykezelő, nevezetesen a myButton_Click van megadva. Ezt a következő lépésben fogjuk elérni.

   

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

Az "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 a "Hello World!" gomb által aktivált műveletet ad hozzá.

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:

   

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

   

   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. (További információ a Microsoft.UI.Xaml.Controls.ContentDialoghasználatáról, lásd: ContentDialog osztály.)

Az alkalmazás futtatása

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

1. Használja a Lejátszás gombot (a HelloWorld (Csomag)feliratú) az alkalmazás helyi gépen való elindításához.

   

   (Másik lehetőségként választhatja Hibakeresési>A hibakeresés indítása a menüsávon, vagy az alkalmazás elindításához nyomja le F5.)

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:

   

3. Válassza a Hello World gombot.

   A Windows 10 vagy újabb rendszerű eszközön megjelenik egy üzenet "Üdvözöljük az első Windows App SDK-appban" szöveggel, a "Hello from HelloWorld" címmel. Kattintson az Ok gombra az üzenet bezárásához.

   

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 menüsávon a Hibakeresési>, A hibakeresés leállítása opciót, vagy nyomja le a Shift+F5billentyűkombinációt.)

Következő lépések

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

Lásd még:

• Alkalmazások írása Windows rendszerhez: Fejlesztési technológia kiválasztása
• Windows App SDK áttekintése
• Windows App SDK/WinUI 3-minták