Oktatóanyag: WPF-alkalmazás létrehozása C használatával#

Ebben az oktatóanyagban megismerkedhet azokkal az eszközökkel, párbeszédpanelekkel és tervezőkkel, amelyeket a Visual Studióval való alkalmazások fejlesztésekor használhat. Létrehoz egy "Hello, World" alkalmazást, megtervezi a felhasználói felületet, kódot ad hozzá, és hibákat keres. Ugyanakkor megismerheti a Visual Studio integrált fejlesztési környezetében (IDE) végzett munkát.

• Az IDE konfigurálása
• Projekt létrehozása
• A felhasználói felület tervezése
• Az alkalmazás hibakeresése és tesztelése

Előfeltételek

• Ha nem rendelkezik Visual Studióval, nyissa meg a Visual Studio letöltések oldalát az ingyenes telepítéshez.
• Győződjön meg arról, hogy az .NET asztali fejlesztési számítási feladat telepítve van. Ezt a konfigurációt a Visual Studio Installerben ellenőrizheti.
• Ehhez az oktatóanyaghoz használhatja a .NET-keretrendszert vagy a .NET Core-t. A .NET Core az újabb, modernebb keretrendszer. A .NET Core használatához a Visual Studio 2019 16.3-s vagy újabb verziója szükséges.

Mi az a Windows Presentation Foundation?

A Windows Presentation Foundation (WPF) egy felhasználói felületi (UI) keretrendszer, amely asztali ügyfélalkalmazásokat hoz létre. A WPF fejlesztői platform számos alkalmazásfejlesztési funkciót támogat, beleértve az alkalmazásmodellt, az erőforrásokat, a vezérlőket, a grafikus elemeket, az elrendezést, az adatkötést, a dokumentumokat és a biztonságot.

A WPF a .NET része. Ha korábban .NET-alkalmazásokat készített ASP.NET vagy Windows Forms használatával, a programozási élménynek ismerősnek kell lennie. A WPF az Bővíthető alkalmazásjelölési nyelv (XAML) használatával deklaratív modellt biztosít az alkalmazásprogramozáshoz. További információ: Asztali útmutató (WPF .NET).

Az IDE konfigurálása

A Visual Studio indításakor megnyílik a kezdőablak. A fejlesztési környezet megnyitásához válassza a Kód nélkül folytatás lehetőséget. Megjelenik az eszközablakok, a menük és az eszköztárak, valamint a főablak területe. Az eszközablakok az alkalmazásablak oldalára vannak rögzítve. A keresőmező, a menüsáv és a szokásos eszköztár a tetején található. Megoldás vagy projekt betöltésekor a szerkesztők és a tervezők megjelennek az alkalmazásablak központi területén. Alkalmazás fejlesztésekor az idő nagy részét ezen a központi területen tölti.

A projekt létrehozása

Amikor létrehoz egy alkalmazást a Visual Studióban, először létrehoz egy projektet és egy megoldást. Ebben a példában egy Windows Presentation Foundation (WPF) projektet hoz létre.

1. Nyissa meg a Visual Studiót.

2. A kezdési ablakban válassza az Új projekt létrehozásalehetőséget.

   

3. Az Új projekt létrehozása képernyőn keresse meg WPF. Válassza WPF-alkalmazás, majd a Továbblehetőséget.

   

4. A következő képernyőn adjon nevet a projektnek, HelloWPFApp, és válassza Következőlehetőséget.

   

5. A További információk ablakban ellenőrizze, hogy .NET 8.0 van-e kiválasztva a célkerethez. Ezután válassza a létrehozása lehetőséget.

   

A Visual Studio létrehozza a HelloWPFApp projektet és -megoldást. Megoldáskezelő megjeleníti a különböző fájlokat. A WPF Designer a MainWindow.xaml tervező nézetét és XAML nézetét jeleníti meg osztott nézetben. Az elválasztó csúsztatásával növelheti vagy csökkentheti az egyes nézetek látható részét. Dönthet úgy, hogy csak a vizualizációs nézetet vagy csak az XAML nézetet látja.

Jegyzet

További információkat az XAML (Extensible Application Markup Language) című dokumentumban talál, lásd a XAML áttekintése a WPF-hez.

A projekt létrehozása után testre szabhatja. Ehhez válassza Tulajdonságok ablak lehetőséget a Nézet menüből, vagy nyomja le F4. Ezután megjelenítheti és módosíthatja az alkalmazás projektelemeinek, vezérlőinek és egyéb elemeinek beállításait.

A felhasználói felület tervezése

Ha a tervező nincs megnyitva, válassza a MainWindow.xaml lehetőséget, és válassza Shift+F7 lehetőséget a tervező megnyitásához.

Ebben az oktatóanyagban három vezérlőtípust ad hozzá az alkalmazáshoz: egy TextBlock vezérlőt, két RadioButton vezérlőt és egy Button vezérlőt.

TextBlock-vezérlő hozzáadása

TextBlock hozzáadásához kövesse az alábbi lépéseket.

1. Válassza a Ctrl+Q billentyűkombinációt a keresőmező aktiválásához, és írja be Eszközkészlet. Válassza az eredménylistából a Nézet > Eszközök lehetőséget.

2. Az Eszközkészletbontsa ki a Közös WPF-vezérlők csomópontot a TextBlock vezérlő megtekintéséhez.

   

3. TextBlock-vezérlő hozzáadása a tervezőfelülethez. Válassza ki a TextBlock elemet, és húzza a tervezőfelület ablakára. A vezérlő középre állítása az ablak tetején. Az irányelveket használva középre helyezheti a vezérlőt.

   Az ablaknak a következő képhez kell hasonlítania:

   

   Az XAML-jelölésnek így kell kinéznie, mint ez a példa:

   <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
   </Grid>
   

Szöveg testreszabása a szövegblokkban

Módosíthatja, hogy a TextBlock milyen szöveget jelenít meg.

1. XAML nézetben keresse meg a TextBlock jelölést, és módosítsa a Szöveg attribútumot TextBlock-ről Select a message option and then choose the Display button.-re.

   Az XAML-jelölésnek így kell kinéznie, mint ez a példa:

   <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="387,60,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
   </Grid>
   

2. Középre állítsa ismét a TextBlockot, majd mentse a módosításokat a Ctrl+S vagy a Fájl menüelem használatával.

Választógombok hozzáadása

Ezután vegyen fel két RadioButton vezérlőt az űrlapra.

1. A eszközkészlet-ban keresse meg a RadioButton vezérlőt.

   

2. Adjon hozzá két RadioButton-vezérlőt a tervezőfelülethez. Válassza ki a RadioButton elemet, és húzza a tervezőfelület ablakára. A gombok áthelyezéséhez jelölje ki őket, és használja a nyílbillentyűket. Rendezze őket úgy, hogy a gombok egymás mellett jelenjenek meg a TextBlock vezérlő alatt. Az irányelvekkel igazíthatja a vezérlőket.

   Az ablaknak így kell kinéznie:

   

3. A bal oldali RadioButton vezérlőelem Tulajdonságok ablakának tetején módosítsa a Név tulajdonságot HelloButton.

   

4. A Tulajdonságok ablakában a jobb oldali rádiógomb vezérlőelemhez változtassa a Név tulajdonságot GoodbyeButton-ra, majd mentse a módosításokat.

Megjelenítendő szöveg hozzáadása az egyes választógombokhoz

Ezután adjon hozzá megjelenítendő szöveget az egyes RadioButton-vezérlőkhöz. Az alábbi eljárás frissíti a RadioButton-vezérlő Content tulajdonságát.

• Frissítse a Content attribútumot a két választógombon, HelloButton-en és GoodbyeButton-on "Hello"-re és "Goodbye"-re az XAML-ben. Az XAML-jelölésnek most az alábbi példához hasonlóan kell kinéznie:

  <Grid>
       <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
       <RadioButton x:Name="HelloButton" Content="Hello" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
       <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
  </Grid>
  

Választógomb beállítása alapértelmezés szerint bejelölve

Ebben a lépésben alapértelmezés szerint állítsa be, hogy a HelloButton választógomb legyen kijelölve, hogy a két rádiógomb egyike mindig ki legyen választva.

1. XAML nézetben keresse meg a HelloButton jelölést.

2. Adjon hozzá egy IsChecked attribútumot, és állítsa Igazértékre. Konkretizálva, adja hozzá a IsChecked="True".

   Az XAML-jelölésnek most az alábbi példához hasonlóan kell kinéznie:

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
   </Grid>
   

Gombvezérlő hozzáadása

A hozzáadott utolsó felhasználói felületi elem egy gomb vezérlőelem.

1. Keresse meg az eszköztárbana gomb vezérlőt. Adja hozzá a tervezőfelülethez a RadioButton vezérlők alatt úgy, hogy a tervező nézetben az űrlapra húzza. Az irányelvek segíthetnek a vezérlő középre igazításában.

2. XAML nézetben módosítsa a gombvezérlő Tartalom értékét Content="Button" értékről Content="Display"értékre, majd mentse a módosításokat.

   Az ablaknak a következő képernyőképhez kell hasonlítania:

   

   Az XAML-jelölésnek most az alábbi példához hasonlóan kell kinéznie:

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
        <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75"/>
   </Grid>
   

Kód hozzáadása a megjelenítési gombhoz

Az alkalmazás futtatásakor megjelenik egy üzenetmező, miután a felhasználó választógombot választ, majd a Megjelenítés gombot választja. Egy üzenetmező jelenik meg a Hello, egy másik pedig a Goodbye (Búcsú) mezőben. Ennek a viselkedésnek a létrehozásához kódot kell hozzáadnia a Button_Click eseményhez MainWindow.xaml.cs.

1. A tervezőfelületen kattintson duplán a Megjelenítés gombra.

   MainWindow.xaml.cs megnyílik, és a kurzor a Button_Click eseményben jelenik meg.

   private void Button_Click(object sender, RoutedEventArgs e)
   {
   
   }
   

   Amikor duplán kattint a Megjelenítés gombra, Click="Button_Click" hozzáadódik az XAML-hez.

   Az XAML-jelölésnek most az alábbi példához hasonlóan kell kinéznie:

   <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="252,47,0,0" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Top"/>
        <RadioButton x:Name="HelloButton" Content="Hello" IsChecked="True" HorizontalAlignment="Left" Margin="297,161,0,0" VerticalAlignment="Top"/>
        <RadioButton x:Name="GoodbyeButton" Content="Goodbye" HorizontalAlignment="Left" Margin="488,161,0,0" VerticalAlignment="Top"/>
        <Button Content="Display" HorizontalAlignment="Left" Margin="377,270,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
   </Grid>
   

2. Az Button_Click kapcsos zárójel között adja hozzá a következő kódot:

   if (HelloButton.IsChecked == true)
   {
        MessageBox.Show("Hello.");
   }
   else if (GoodbyeButton.IsChecked == true)
   {
       MessageBox.Show("Goodbye.");
   }
   

3. Mentse az alkalmazást.

Az alkalmazás hibakeresése és tesztelése

Ezután hibakeresést végezhet az alkalmazáson, hogy hibákat keressen, és ellenőrizze, hogy mindkét üzenetmező helyesen jelenik-e meg. Az alábbi utasítások bemutatja, hogyan hozhatja létre és indíthatja el a hibakeresőt. További információ: WPF-alkalmazás (WPF) létrehozása és WPF-hibakeresése.

A MainWindow.xaml nevének módosítása

Adjon egy pontosabb nevet a MainWindow-nak. A Megoldáskezelőbenkattintson a jobb egérgombbal a MainWindow.xaml elemre, és válassza az Átnevezésparancsot. Nevezze át a fájlt Greetings.xamlnévre. Ebben a példában ez a módosítás egy hibát hoz létre, amelyet később használnak a hibakeresés bemutatásához.

Hibák keresése és javítása

Ebben a lépésben megtalálja a korábban a MainWindow.xaml fájl nevének módosításával okozott hibát.

Hibakeresés indítása és a hiba megkeresése

1. Indítsd el a hibakeresőt az F5 kiválasztásával vagy az Hibakereséskiválasztásával, majd Hibakeresés indítása.

   Megjelenik egy Break Mode ablak, és a Kimeneti ablak jelzi, hogy IOException történt: Nem található az erőforrás mainwindow.xaml.

   

2. A hibakereső leállításához válassza Hibakeresés>A hibakeresés leállítása.

Átnevezte MainWindow.xaml-t Greetings.xaml-re, de a kód továbbra is MainWindow.xaml-re hivatkozik az alkalmazás indítási URI-jaként, ezért a projekt nem tud elindulni.

A Greetings.xaml megadása indítási URI-ként

1. A megoldáskezelő-ben nyissa meg a App.xaml fájlt.

2. Módosítsa StartupUri="MainWindow.xaml"StartupUri="Greetings.xaml", és mentse a módosításokat.

Választható lépésként elkerülheti a félreértést, ha az alkalmazásablak címét az új névnek megfelelően módosítja.

1. A Megoldáskezelő-ben nyissa meg az imént átnevezett Greetings.xaml fájlt.

2. Módosítsa a Window.Title tulajdonság értékét Title="MainWindow" értékről Title="Greetings"értékre, és mentse a módosításokat.

Indítsa újra a hibakeresőt (nyomja le F5). Ekkor megjelenik az alkalmazás Üdvözlet ablaka.

A hibakeresés leállításához zárja be az alkalmazásablakot

Hibakeresés töréspontokkal

A hibakeresés során tesztelheti a kódot néhány töréspont hozzáadásával. Töréspontok hozzáadásához válassza Hibakeresés>Töréspontváltása lehetőséget, kattintson a szerkesztő bal margójára a kódsor mellett, ahol a törést el szeretné végezni, vagy nyomja le F9.

Töréspontok hozzáadása

1. Nyissa meg a Greetings.xaml.cs, és válassza ki ezt a sort: MessageBox.Show("Hello.")

2. Töréspont hozzáadása a menüből a Hibakereséskiválasztásával, majd a Töréspont kapcsolásalehetőséggel.

   A szerkesztőablak bal szélső margóján egy piros kör jelenik meg a kódsor mellett.

3. Válassza ki ezt a sort: MessageBox.Show("Goodbye.").

4. Töréspont hozzáadásához nyomja le az F9 billentyűt, majd válassza F5 a hibakeresés megkezdéséhez.

5. Az Üdvözlet ablakban válassza a Hello választógombot, majd válassza a Megjelenítés gombot.

   A MessageBox.Show("Hello.") vonal sárga színnel van kiemelve. Az IDE alján az Autos, Locals és Watch ablakok a bal oldalon vannak rögzítve. A hívási verem, töréspontok, kivételbeállítások, parancs, Azonnaliés Kimeneti ablakok a jobb oldalon vannak rögzítve.

   

6. A menüsávon válassza a Hibakeresés>Kilépéslehetőséget.

   Az alkalmazás folytatja a végrehajtást, és megjelenik egy üzenetmező a "Hello" szóval.

7. Válassza az üzenetmezőben az OK lehetőséget a bezárásához.

8. Az Üdvözlet ablakban válassza a Búcsú választógombot, majd válassza a Megjelenítés gombot.

   A MessageBox.Show("Goodbye.") vonal sárga színnel van kiemelve.

9. A hibakeresés folytatásához válassza az F5 kulcsot. Amikor megjelenik az üzenetmező, válassza ki az üzenetmezőben az OK lehetőséget, hogy bezárja azt.

10. A hibakeresés leállításához zárja be az alkalmazásablakot.

11. A menüsávon válassza Hibakeresés>Az összes töréspont letiltásalehetőséget.

A felhasználói felület elemeinek megjelenítése

A futó alkalmazásban egy widgetnek kell megjelennie az ablak tetején. A widget egy futtatókörnyezeti segéd, amely gyors hozzáférést biztosít néhány hasznos hibakeresési funkcióhoz. Válassza az első gombot, Ugrás az élő vizualizációs fa. Látnia kell egy fát tartalmazó ablakot, amely a lap összes vizuális elemét tartalmazza. Bontsa ki a csomópontokat a hozzáadott gombok megkereséséhez.

Az alkalmazás kiadási verziójának létrehozása

Miután ellenőrizte, hogy minden működik-e, előkészítheti az alkalmazás kiadási buildjének elkészítését.

1. A főmenüben válassza a Build>Tiszta megoldás lehetőséget a korábbi buildek során létrehozott köztes fájlok és kimeneti fájlok törléséhez. Ez a lépés nem szükséges, de megtisztítja a hibakeresési buildkimeneteket.

2. Módosítsa a HelloWPFApp buildkonfigurációját Hibakeresési-ről Release-ra az eszköztár legördülő vezérlőjének használatával. Azt mondja Hibakeresés jelenleg.

3. A megoldás létrehozásához válassza a Build>Build Solution.

Gratulálunk az oktatóanyag elvégzéséhez! A .exe-t, amit létrehozott, megtalálhatja a megoldás és a projektkönyvtár alatt (...\HelloWPFApp\HelloWPFApp\bin\Release).

Kapcsolódó tartalom

• Hatékonysági tippek

Következő lépés

Gratulálunk az oktatóanyag elvégzéséhez! Ha még többet szeretne megtudni, folytassa az alábbi oktatóanyagokkal.

Folytatás további WPF-oktatóanyagokkal