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

Ebben az oktatóanyagban a Visual Studio integrált fejlesztői környezetének (IDE) bemutatásaként létrehoz egy "Hello World" alkalmazást, amely bármely Windows 10-es vagy újabb eszközön fut. Ehhez univerzális Windows-platform (UWP) projektsablont, extensible Application Markup Language (XAML) és C# programozási nyelvet használ.

Jegyzet

Ha elégedett az Univerzális Windows Platform (UWP) aktuális funkcióival, akkor nem kell migrálnia a projekt típusát a Windows App SDK-ba. A WinUI 2.x és a Windows SDK támogatja az UWP-projekttípusokat. Ha el szeretné kezdeni a WinUI 3 és a Windows App SDK használatát, kövesse a Windows App SDK oktatóanyaglépéseit.

Ebben az oktatóanyagban ön:

• Projekt létrehozása
• Alkalmazás létrehozása
• Az alkalmazás futtatása

Előfeltételek

Szükséged van:

• Visual Studió. Az ingyenes verzióért látogasson el a Visual Studio letöltési oldalára.

• Az UWP-alkalmazások fejlesztéséhez 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 lekérése>eszközök és szolgáltatások lehetőséget, vagy az Új projekt létrehozása ablakban válassza a További eszközök és szolgáltatások telepítése hivatkozást. További információért látogasson el: Munkaállományok vagy egyes összetevők módosítása.

  A Visual Studio Installer Számítási feladatok lapján válassza ki a következő számítási feladatokat és összetevőket:

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

  • Az UWP használatával történő alkalmazásfejlesztéshez válassza ki a WinUI-alkalmazásfejlesztési számítási feladatot. Ezután a Telepítés részleteipanelen, a WinUI alkalmazásfejlesztési csomópontja alatt válassza ki a szükséges UWP-beállítást (ez a további szükséges összetevőket is kiválasztja)

  • C# esetén válassza az Univerzális Windows Platform-eszközöket és a Windows 11 SDK-t (10.0.26100.0).

  • Ehhez az oktatóanyaghoz az UWP Blank App projektsablon szükséges.

  Visual Studio 2022 17.1–17.9-es verzió

  • Az UWP használatával történő C# -alkalmazásfejlesztéshez válassza ki az univerzális Windows platform fejlesztési számítási feladatát.

  • Ehhez az oktatóanyaghoz Üres alkalmazás (Univerzális Windows) projektsablonra van szükség.

  Jegyzet

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

Projekt létrehozása

Először hozzon létre egy univerzális Windows Platform-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 az Univerzális Windows kifejezést a keresőmezőbe, válassza az Üres alkalmazás (Univerzális Windows) vagy az UWP Blank App sablont a Visual Studio 2022 17.10-es vagy újabb verziójában, majd válassza a Tovább gombot.

   

3. Adjon nevet a projektnek, HelloWorld, és válassza a Createparancsot.

   

4. Fogadja el az alapértelmezett Célverzió és Minimális verzió beállításokat az Új univerzális Windows-platform projekt párbeszédpanelen.

   

   Jegyzet

   Ha most először hoz létre UWP-alkalmazást a Visual Studióval, megjelenik a Fejlesztői mód engedélyezése Windows párbeszédpanelen. A Beállításokmegnyitásához válassza a fejlesztői beállítások lehetőséget. Kapcsolja be fejlesztői módot, majd válassza az 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. Vegyen fel egy gombvezérlőt, adjon hozzá egy műveletet a gombhoz, majd indítsa el a "Hello World" alkalmazást, hogy lássa, hogyan néz ki.

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

1. A Megoldáskezelő-ben kattintson duplán a MainPage.xaml elemre az osztott nézet megnyitásához.

   

   Két ablaktábla van: a XAML Designer, amely egy tervezővászont is tartalmaz, valamint az XAML-szerkesztő, ahol kódot adhat hozzá vagy módosíthat.

   

2. Válassza a Eszközkészlet lehetőséget az Eszközkészlet kiugró ablakának megnyitásához.

   

   Ha nem látja a Eszközkészlet lehetőséget, a menüsávon nyithatja meg. Ehhez válassza >eszköztár megtekintéselehetőséget. Vagy nyomja le Ctrl+Alt+Xbillentyűkombinációt.

3. Az eszközkészlet ablakának rögzítéséhez válassza a Rögzítés ikont.

   

4. Jelölje ki a gombot vezérlőt, majd húzza a tervezővászonra.

   

   Ha a XAML-szerkesztőbenkódot tekinti meg, láthatja, hogy ott is megjelenik a gomb:

   

Címke hozzáadása a gombhoz

1. A XAML-szerkesztőmódosítsa Button Content értékét a gomb értékéről Hello World!

   

2. Figyelje meg, hogy a XAML Designer gombja is változik.

   

Eseménykezelő hozzáadá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 egy műveletet ad a Hello World! gombhoz.

1. Kattintson duplán a tervezővászon gombvezérlőjére.

2. Szerkessze az eseménykezelő kódját MainPage.xaml.cs, a kód mögötti oldalon.

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

   

   Módosítsa, így a következőképpen néz ki:

   

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

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

Mit csináltunk most?

A kód néhány Windows API-t használ egy beszédszintézis-objektum létrehozásához, majd szöveget ad neki. További információ a SpeechSynthesishasználatáról: System.Speech.Synthesis.

Az alkalmazás futtatása

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

1. Használja a Lejátszás gombot (amelyen a Helyi gépszöveg található), hogy elindítsa az alkalmazást a helyi gépen.

   

   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:

   

3. Válassza a Hello World gombot.

   A Windows 10-es vagy újabb rendszerű eszközöd szó szerint azt mondja, hogy „Hello, World!”

4. Az alkalmazás bezárásához válassza a Hibakeresés leállítása gombot az eszköztáron. Alternatívaként válassza a Hibakeresési>A hibakeresés leállítása lehetőséget a menüsávból, vagy nyomja le a Shift+F5billentyűket.

Kapcsolódó tartalom

• UWP áttekintése
• UWP-alkalmazásminták lekérése

Következő lépés

Gratulálunk az oktatóanyag elvégzéséhez! Reméljük, tanult néhány alapismeretet az UWP-ről és a Visual Studio IDE-ről. További információért folytassa az alábbi oktatóanyaggal:

Felhasználói felület létrehozása