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
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.
Jegyzet
Ehhez az oktatóanyaghoz Üres alkalmazás (Univerzális Windows) projektsablonra van szükség. A telepítés során válassza ki a univerzális Windows-platform fejlesztési számítási feladatát:
Ha már telepítve van a Visual Studio, és hozzá kell adnia, a menüben válassza az Eszközök>Eszközök és szolgáltatások lekéréselehető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.
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!
Nyissa meg a Visual Studiót, és a kezdési ablakban válassza az Új projekt létrehozásalehetőséget.
Az Új projekt létrehozása képernyőn írja be Univerzális Windows keresőmezőbe, válassza Üres alkalmazás (Univerzális Windows)C#-sablonját, majd válassza Továbblehetőséget.
Adjon nevet a projektnek, HelloWorld, és válassza a Createparancsot.
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 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.
Nyissa meg a Visual Studiót, és a kezdési ablakban válassza az Új projekt létrehozásalehetőséget.
Az Új projekt létrehozása képernyőn írja be Univerzális Windows keresőmezőbe, válassza Üres alkalmazás (Univerzális Windows)C#-sablonját, majd válassza Továbblehetőséget.
Adjon nevet a projektnek, HelloWorld, és válassza a létrehozása lehetőséget.
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
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.
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.
Az eszközkészlet ablakának rögzítéséhez válassza a Rögzítés ikont.
Jelölje ki a gombot vezérlőt, majd húzza a tervezővászonra.
Ha a XAML-szerkesztőkódot tekinti meg, láthatja, hogy a gomb is megjelenik:
A Megoldáskezelő-ban 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.
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.
Az eszközkészlet ablakának rögzítéséhez válassza a Pin ikont.
Jelölje ki a gombot és a 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
A XAML-szerkesztőmódosítsa
Button Content
értékét a gomb értékéről Hello World!Figyelje meg, hogy a XAML Designer gombja is változik.
A XAML-szerkesztőmódosítsa
Button Content
értékét a gomb értékéről Hello World!Figyelje meg, hogy a XAML Designerben a gomb is megvá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.
Kattintson duplán a tervezővászon gombvezérlőjére.
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(); }
Kattintson duplán a tervezővászon gombvezérlőjére.
Szerkessze az eseménykezelő kódját a háttérben lévő oldalon: MainPage.xaml.cs.
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 SpeechSynthesis
haszná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.
A Lejátszás gombbal indítsa el az alkalmazást a helyi gépen. Ez a szöveg Helyi gép.
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.
Tekintse meg az alkalmazást, amely nem sokkal a kezdőképernyő eltűnésekor jelenik meg. Az alkalmazásnak az alábbi ábrához hasonlóan kell kinéznie:
Válassza a Hello World gombot.
A Windows 10-es vagy újabb rendszerű eszközöd szó szerint azt mondja, hogy „Hello, World!”
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.
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. Íme, hogyan.
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.
Alternatívaként a menüsávon válassza a Hibakeresés>A hibakeresés indítása lehetőséget, vagy az alkalmazás futtatásához nyomja le a F5 gombot.
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:
Válassza a Hello World gombot.
A Windows 10-es vagy újabb rendszerű eszközöd szó szerint ezt mondja: "Hello, World!"
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 ki a Hibakeresés>A hibakeresés leállítása lehetőséget a menüsávon, vagy nyomja le Shift+F5.
Kapcsolódó tartalom
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: