Oktatóanyag: WPF-alkalmazás létrehozása a Visual Basic használatával

Ebben az oktatóanyagban létrehoz egy alkalmazást a Visual Basic használatával a Visual Studio integrált fejlesztési környezetében (IDE). A program a Windows Presentation Foundation (WPF) felhasználói felületi keretrendszerét fogja használni. Ebben az oktatóanyagban megismerkedhet a Visual Studióban használható számos eszközzel, párbeszédpanellel és tervező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?

A WPF vagy a Windows Presentation Foundation egy felhasználói felületi 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, ezért ha korábban már készített alkalmazásokat a .NET-tel ASP.NET vagy Windows Forms használatával, a programozási felületnek ismerősnek kell lennie. A 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ót a WPF .NET áttekintésében talál.

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.

A projekt létrehozása

Amikor létrehoz egy alkalmazást a Visual Studióban, először létrehoz egy projektet. Ebben az oktatóanyagban hozzon létre egy Windows Presentation Foundation-projektet.

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 ablakban keressen rá a "WPF" kifejezésre, és válassza a Visual Basic lehetőséget a Minden nyelv legördülő listában. Válassza a WPF-alkalmazás (.NET-keretrendszer) lehetőséget, majd a Tovább gombot.

   

4. Adja meg a projektnek a HelloWPFApp nevet, és válassza a Létrehozás 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 osztott nézetben jeleníti meg a MainWindow.xaml tervező nézetét és XAML nézetét.

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őben nyissa meg a MainWindow.xaml fájlt.

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 Eszközkészlet lapot. Ha nem látja, válassza >Eszközkészlet megtekintése lehetőséget a menüsávon, vagy Ctrl+Alt+X.

4. Bontsa ki a Közös WPF-vezérlőket , vagy írja be a szöveget a keresősávba a TextBlock megkereséséhez.

   

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.

   

   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 igazítsd középre 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ájl>Az összes mentése lehetőséget a menüsávon, vagy nyomja le Ctrl+Shift+Sbillentyű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 fog hozzáadni. 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á.

   

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 HelloButton és GoodbyeButton értékéről "Hello" és "Goodbye" é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. Az Eszközkészletben keresse meg a Gomb vezérlőt, majd 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 Content="Button" értékét a következőreContent="Display".

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

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

   

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

   MainWindow.xaml.vb megnyílik, és a kurzor az Button_Click 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 fog végezni 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őben kattintson a jobb gombbal a MainWindow.xaml elemre, és válassza az Átnevezés 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.

   

3. A hibakereső leállításához válassza Hibakeresés>A 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őben nyissa meg az Application.xaml fájlt.

5. Váltás StartupUri="MainWindow.xaml"-ról StartupUri="Greetings.xaml"-re

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

   

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 (WPF) létrehozása és WPF-hibakeresése.

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: MessageBox.Show("Hello.")

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: MessageBox.Show("Goodbye.").

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 MessageBox.Show("Hello.") 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és>Kilé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 MessageBox.Show("Goodbye.") 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és>Az összes töréspont letiltásalehetőséget.

Kiadási verzió létrehozása

Most, hogy 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 Build>Clean 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ések

A következő cikkből megtudhatja, hogyan hozhat létre Windows Forms-alkalmazásokat a Visual Studióban a Visual Basic használatával.

Windows Forms-alkalmazás létrehozása

Kapcsolódó hivatkozások

A Visual Studióval kapcsolatos további információkért tekintse meg az alábbi forrásokat:

• Hatékonysági tippek