Megosztás a következőn keresztül:


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.

    Képernyőkép a Visual Studio 2019 kezdőablakáról az

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

    Képernyőkép az

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

    Képernyőkép a Visual Studióban az

  5. A További információk ablakban a .NET Core 3.1 már ki legyen választva a célkeret számára. Ha nem, válassza .NET Core 3.1. Ezután válassza a létrehozása lehetőséget.

    Képernyőkép a Visual Studióban a További információ ablakról, amelyen a .NET Core 3.1 van kiválasztva az új projekthez.

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.

Képernyőkép a projektről és a megoldásról, amelyen a Megoldáskezelő, valamint a MainWindow.xaml XAML és tervező nézetei láthatók.

Jegyzet

Az XAML-ről további információt a WPF oldal XAML-áttekintésében talál.

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. Az alkalmazásokban megjelenítheti és módosíthatja a projektelemek, vezérlők és egyéb elemek beállításait.

A Megoldáskezelő ablak képernyőképe a Tulajdonságok, hivatkozások és fájlok a HelloWPF alkalmazásban.

  1. Nyissa meg a Visual Studiót.

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

    Képernyőkép a Visual Studio 2022 indítási ablakáról az

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

    Képernyőkép az

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

    Képernyőkép, amelyen az

  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.

    Képernyőkép a További információ ablakról, amelyen a .NET 8.0 van kiválasztva az új projekt célkereteként.

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 az egyik vagy a másik nézetből többet vagy kevesebbet jeleníthet meg. Dönthet úgy, hogy csak a vizualizációs nézetet vagy csak az XAML nézetet látja.

Képernyőkép a projektről és a megoldásról a Megoldáskezelőben, valamint a MainWindow.xaml XAML- és tervezőnézetei.

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.

Képernyőkép a Tulajdonságok ablakról, amelyen a HelloWPFApp projekt megoldástulajdonságainak Misc szakasza látható.

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.

    Az Eszközkészlet ablak képernyőképe a Közös WPF-vezérlők listájában kijelölt TextBlock vezérlővel.

  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. A Visual Studio 2019-ben és újabb verzióiban az irányelveket követve központosítheti a vezérlőt.

    Az ablaknak az alábbi ábrához kell hasonlítania:

    Képernyőkép a MainWindow űrlap tervezőfelületén található TextBlock vezérlőről.

    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>
    
  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özkészlet lehetőséget.

  2. Bontsa ki a Eszközkészletés a Közös WPF-vezérlők csomópontját a TextBlock vezérlő megtekintéséhez.

    Az Eszközkészlet ablak képernyőképe a Közös WPF-vezérlők listájában kijelölt TextBlock vezérlővel.

  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:

    Képernyőkép a TextBlock vezérlőről a tervezőfelületen. Útmutatások jelennek meg a vezérlő elhelyezéséhez és átméretezéséhez.

    Az XAML-jelölőnyelvnek így kellene 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és például így néz ki:

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

    Képernyőkép az Eszközkészlet ablakról a Közös WPF-vezérlők listájában kijelölt RadioButton vezérlővel.

  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. A vezérlők igazításához használja az irányelveket.

    Az ablaknak így kell kinéznie:

    Képernyőkép a MainWindow.xaml tervezőablakáról, amelyen egy TextBlock és két RadioButton vezérlő látható a tervezőfelületen.

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

    Képernyőkép a RadioButton vezérlőelem Tulajdonságok ablakáról, amelyen a Név tulajdonság értéke HelloButton értékre módosult.

  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.

  1. A eszközkészlet-ben keresse meg a rádiógomb vezérlőt.

    Képernyőkép az Eszközkészlet ablakról a Közös WPF-vezérlők listájában kijelölt RadioButton vezérlővel.

  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:

    Képernyőkép a Greetings.xaml tervezőablakáról egy TextBlock és két RadioButton vezérlővel a tervezőfelületen.

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

    Képernyőkép a RadioButton vezérlőelem Tulajdonságok ablakáról, amelyen a Név tulajdonság értéke HelloButton értékre módosult.

  4. A Tulajdonságok ablakában módosítsa a jobb oldali választógomb Név tulajdonságát GoodbyeButtonértékre, 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 a következő 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 útmutató segítséget nyújt 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 ehhez az ábrához kell hasonlítania.

    A Tervezés ablak képernyőképe TextBlock, Hello és Goodbye RadioButton vezérlőkkel és Megjelenítés gombbal.

    A XAML jelölésnyelv most az alábbi példához hasonló módon kell, hogy kinézzen:

    <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>
    
  1. Az eszközkészlet-ben keresse meg a gombvezé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:

    Képernyőkép a Tervezés ablakról TextBlock, Hello és Goodbye RadioButton vezérlőkkel, valamint egy Megjelenítés feliratú gombbal.

    Az XAML-jelölésnek most a következő példára kell hasonlítania.

    <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)
    {
    
    }
    
  2. A kapcsos zárójelek 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 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 kell hasonlítania:

    <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 törésmód ablak. A Kimeneti ablak azt jelzi, hogy IOException lépett fel: Nem sikerült megtalálni az erőforrást: mainwindow.xaml.

    Képernyőkép a Kimenet ablakról, amelyen egy System.IO.IOException üzenet látható: 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.xamlGreetings.xamlnévre, de a kód továbbra is MainWindow.xaml hivatkozik az alkalmazás indítási URI-jaként, így a projekt nem indítható el.

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

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

    Képernyőkép a Kimenet ablakról, amelyen egy System.IO.IOException üzenet látható: 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.

Képernyőkép az Üdvözlések ablakról, amelyen a TextBlock, a RadioButtons és a Button vezérlő látható, és a

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.

    Hibakeresési munkamenet képernyőképe, amelyen a kódablak azt mutatja, hogy a végrehajtás leállt egy töréspontnál, sárga színnel kiemelve.

  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.

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

  2. Töréspontot adhat hozzá a menüből a Hibakereséskiválasztásával, majd a Töréspont bekapcsolása/kioldásaopcióval.

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

  3. Jelölje 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 Helló opciót, majd kattintson a Megjelenítés gombra.

    A MessageBox.Show("Hello.") vonal sárga színnel van kiemelve. Az IDE alján az Autos, a Locals és a Watch ablakok együtt vannak rögzítve a bal oldalon. 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.

    Hibakeresési munkamenet képernyőképe, amelyen a kódablak azt mutatja, hogy a végrehajtás leállt egy töréspontnál, sárga színnel kiemelve.

  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 gombot annak 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 az OK lehetőséget az üzenetmező bezárásához.

  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.

Élő vizualizációfa ablak képernyőképe, amelyen a lap vizualizációelemeinek fája látható futás közben.

Élő vizualizációfa ablak képernyőképe, amelyen a vizualizáció elemeinek fája látható HelloWPFApp.exe futás közben.

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

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.