Oktatóanyag: WPF alkalmazás létrehozása a Visual Basic segítségével

Ebben az oktatóanyagban egy alkalmazást hoz létre Visual Basic használatával az Visual Studio integrált fejlesztési környezetben (IDE). A program a Windows megjelenítési alaprendszer (WPF) felhasználói felületi keretrendszert fogja használni. Ebben az oktatóanyagban megismerkedhet a Visual Studio használható eszközök, párbeszédpanelek és tervezők számos lehetőségével.

Ebben az oktatóanyagban a következőket sajátíthatja el:

• A projekt létrehozása
• Ablak konfigurálása és szöveg hozzáadása
• Gombok és kód hozzáadása
• Az alkalmazás hibakeresése és tesztelése
• Hibakeresés töréspontokkal
• Kiadási verzió létrehozása

Mi az a WPF?

WPF vagy Windows megjelenítési alaprendszer egy felhasználói felületi (UI) keretrendszer, amely asztali ügyfélalkalmazásokat hoz létre. A WPF fejlesztési platform számos alkalmazásfejlesztési funkciót támogat, többek között a következőket:

• Alkalmazásmodell
• Resources
• Vezérlők
• Graphics
• Elrendezés
• Adatkötés
• Documents
• Biztonság

WPF .NET része. Ha korábban .NET ASP.NET vagy Windows Forms használatával hozott létre alkalmazásokat, a programozási élménynek ismerősnek kell lennie. WPF az Extensible Application Markup Language XAML használatával deklaratív modellt biztosít az alkalmazás programozásához. További információ: WPF .NET áttekintés.

Előfeltételek

Az oktatóanyag elvégzéséhez Visual Studio kell. Az ingyenes verzióért lásd: Visual Studio letöltések.

A projekt létrehozása

Amikor létrehoz egy alkalmazást Visual Studio, először létrehoz egy projektet. Ebben az oktatóanyagban hozzon létre egy Windows megjelenítési alaprendszer projektet.

1. Nyissa meg a Visual Studio.

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

   

3. A Új projekt létrehozása ablakban keresse meg a WPFVisual Basic lehetőséget a Nyelvek listában. Válassza a WPF App (.NET Framework), majd a Next lehetőséget.

   

4. Adja meg a projektnek a HelloWPFApp nevet, és válassza a Létrehozás lehetőséget.

   Visual Studio létrehozza a HelloWPFApp projektet és -megoldást. Megoldáskezelő megjeleníti a különböző fájlokat.

   

A WPF Tervező a MainWindow.xaml tervező nézetét és XAML nézetét jeleníti meg osztott nézetben.

Megjegyzés:

Az Extensible Application Markup Language (XAML) nyelvről további információt a WPF XAML áttekintésében talál.

Ablak konfigurálása és szöveg hozzáadása

A Tulajdonságok ablakban megjelenítheti és módosíthatja a projektelemek, vezérlők és egyéb elemek beállításait.

1. A Megoldáskezelő nyissa meg a MainWindow.xaml.

2. XAML nézetben módosítsa a Window.Title tulajdonság értékét Title="MainWindow" értékről Title="Greetings" értékre.

3. A Visual Studio IDE bal oldalán válassza a Toolbox lapot. Ha nem látja, válassza a View>Toolbox lehetőséget a menüsávon vagy a Ctrl+Alt+X.

4. Bontsa ki a Common WPF Vezérlők vagy írja be a Szöveg kifejezést a keresősávba a TextBlock megkereséséhez.

   Képernyőkép az Eszközkészlet ablakáról, ahol a Közös WPF vezérlők listájában kiemelve látható a TextBlock vezérlő.

5. Jelölje ki a TextBlock elemet, és húzza a tervezőfelület ablakára. A TextBlock vezérlőt húzással áthelyezheti. A vezérlő elhelyezéséhez használja az irányelveket.

   Képernyőkép az Üdvözlések űrlapon elhelyezett TextBlock vezérlőről, amelyen az irányelvek láthatók.

   Az XAML-jelölésnek a következő példához hasonlóan kell kinéznie:

   <TextBlock HorizontalAlignment="Left" Margin="381,100,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
   

6. XAML nézetben keresse meg a TextBlock korrektúrát, és módosítsa a Text attribútumot:

   Text="Select a message option and then choose the Display button."
   

   Szükség esetén középre igazítja a TextBlockot.

7. Mentse az alkalmazást az Összes mentése eszköztár gombra kattintva. Másik lehetőségként az alkalmazás mentéséhez válassza FájlAz összes mentése lehetőséget a menüsávon, vagy nyomja le CtrlShiftSbillentyűkombinációt. Ajánlott eljárás a korai és gyakori mentés.

Gombok és kód hozzáadása

Az alkalmazás két választógombot és egy gombot használ. Kövesse az alábbi lépéseket, hogy hozzáadja őket. A gombhoz Visual Basic kódot is hozzáadhat. Ez a kód a választógomb kiválasztási lehetőségére utal.

1. Az Eszközkészletben keresse meg a RadioButtont.

   

2. Adjon hozzá két RadioButton-vezérlőt a tervezőfelülethez a RadioButton elem kiválasztásával és a tervezőfelületre húzásával. A gombok áthelyezéséhez jelölje ki őket, és használja a nyílbillentyűket. Helyezze a gombokat egymás mellett a TextBlock vezérlő alá.

   Képernyőkép a Greetings űrlapról egy TextBlock vezérlővel és két választógombpal.

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

   

4. A Jobb oldali RadioButton vezérlőelem Tulajdonságok ablakában módosítsa a Név tulajdonságot GoodbyeButtonra.

5. Frissítse a Content attribútumot az és értékéről és értékre az XAML-ben.

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

6. XAML nézetben keresse meg a HelloButton jelölőjét, és adjon hozzá egy IsChecked attribútumot :

   IsChecked="True"
   

   A IsChecked attribútum az Igaz értékkel azt jelenti, hogy a HelloButton alapértelmezés szerint be van jelölve. Ez a beállítás azt jelenti, hogy a választógomb mindig be van jelölve, még akkor is, ha a program elindul.

7. Keresse meg az eszköztárbana gomb vezérlőt. Ezután húzzon egy gombot a tervezőfelületre a RadioButton vezérlők alatt.

8. XAML nézetben módosítsa a Gomb vezérlőelem értékét a következőre.

   <Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="215,204,0,0"/>
   

   Az ablaknak az alábbi képhez kell hasonlítania.

   Képernyőkép a Köszöntések űrlapról, amelyen a TextBlock, a "Hello" és a "Goodbye" feliratú választógombok, valamint a "Display" feliratú gomb vezérlőelem mind el vannak helyezve az űrlapon.

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

   MainWindow.xaml.vb megnyílik, és a kurzor az eseményben van.

   Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
   
   End Sub
   

10. Adja hozzá a következő kódot:

    If HelloButton.IsChecked = True Then
        MessageBox.Show("Hello.")
    ElseIf GoodbyeButton.IsChecked = True Then
        MessageBox.Show("Goodbye.")
    End If
    

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. A folyamat működésének megtekintéséhez az első lépés szándékosan hibát vezet be a programba.

1. A Megoldáskezelő kattintson a jobb gombbal a MainWindow.xaml elemre, és válassza a Rename lehetőséget. Nevezze át a fájlt Greetings.xamlnévre.

2. Indítsa el a hibakeresőt az F5 billentyű lenyomásával, vagy válassza a Hibakeresés lehetőséget, majd indítsa el a hibakeresést.

   Megjelenik egy törésmódú ablak, és a Kimeneti ablak azt jelzi, hogy kivétel történt.

   Képernyőkép a "Kivétel nem kezelt" ablakról egy System.IO.Exception üzenettel, amely a következőt olvassa: "Nem található erőforrás mainwindow.xaml".

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

   A MainWindow.xaml nevet a szakasz elején a Greetings.xaml névre változtatta. A kód továbbra is a MainWindow.xaml-ra hivatkozik az alkalmazás indítási URI-jaként, így a projekt nem indítható el.

4. A Megoldáskezelő fájlban nyissa meg a Application.xaml fájlt.

5. Változtassa meg -t -re.

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

   Képernyőkép a Megszólítások ablakról, amelyen látható a TextBlock, a RadioButtons és a Button vezérlő. A "Hello" választógomb ki van jelölve.

7. Válassza a Hello és a Megjelenítés gombot, majd a Viszlát és a Megjelenítés gombot. A hibakeresés leállításához használja a jobb felső sarokban található bezárás ikont.

További információ: WPF alkalmazás fordítása és WPF hibakeresés.

Hibakeresés töréspontokkal

A hibakeresés során tesztelheti a kódot néhány töréspont hozzáadásával.

1. Nyissa meg a Greetings.xaml.vb, és válassza a következő sort:

2. Töréspont hozzáadásához nyomja le az F9 billentyűt, vagy válassza a Hibakeresés, majd a Töréspont váltása lehetőséget.

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

3. Válassza ki a következő sort: .

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

5. A Üdvözlések ablakban válassza a Hello gombot, majd a Megjelenítés lehetőséget.

   A vonal sárga színnel van kiemelve. Az IDE alján az Autos, a Locals és a Watch ablak a bal oldalon van 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ésKilépéslehetőséget.

   Az alkalmazás újra elindul. Megjelenik egy párbeszédpanel a "Hello" szóval.

7. A párbeszédpanel bezárásához kattintson az OK gombra.

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

   A vonal sárga színnel van kiemelve.

9. A hibakeresés folytatásához válassza az F5 kulcsot. Amikor megjelenik a párbeszédpanel, az OK gombra kattintva zárja be a párbeszédpanelt.

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

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

Kiadási verzió 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. Válassza a BuildClean megoldás lehetőséget az előző buildek során létrehozott köztes fájlok és kimeneti fájlok törléséhez.

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.

3. Válassza a Build Solution (Buildmegoldás létrehozása)lehetőséget.

Gratulálunk az oktatóanyag elvégzéséhez! A .exe megtalálja az Ön megoldása és projektkönyvtára alatt (...\HelloWPFApp\bin\Release).

Következő lépés

Lépjen tovább a következő cikkre, hogy megtanulja, hogyan hozhat létre Windows Forms alkalmazást a Visual Studio és Visual Basic segítségével.

A Windows Forms alkalmazás létrehozása

A Visual Studio kapcsolatos további információkért lásd:

• Hatékonysági tippek