Oktatóanyag: Vezérlők hozzáadása a képmegjelenítő windowsos űrlapalkalmazásához (.NET-keretrendszer)

Ebben a három oktatóanyagból álló sorozatban létrehoz egy Windows Forms-alkalmazást, amely betölt egy képet, és megjeleníti azt. A Visual Studio integrált tervezési környezet (IDE) biztosítja az alkalmazás létrehozásához szükséges eszközöket.

Ez a program egy képmezőt, egy jelölőnégyzetet és több gombot is használ, amelyekkel vezérelheti az alkalmazást. Ez az oktatóanyag bemutatja, hogyan veheti fel ezeket a vezérlőket.

Ebben a második oktatóanyagban megtanulhatja, hogyan:

• Vezérlők hozzáadása az alkalmazáshoz
• Gombok hozzáadása elrendezéspanelen
• Vezérlőnevek és -helyek módosítása
• Párbeszédpanel-összetevők hozzáadása

Ha új Windows Forms-alkalmazást szeretne létrehozni a .NET-tel, kövesse az oktatóanyagot: Hozzon létre egy Windows Forms alkalmazást a .NET-tel. További információt a Windows Forms .NET asztali útmutatójában talál.

Előfeltételek

• Ez az oktatóanyag az előző oktatóanyagra épül, Képmegjelenítő alkalmazás létrehozása. Először végezze el ezt a elemet, és kezdje az oktatóanyaghoz létrehozott projekttel.

Vezérlők hozzáadása az alkalmazáshoz

A Képmegjelenítő alkalmazás egy PictureBox vezérlővel jeleníti meg a képet. Egy jelölőnégyzetet és több gombot használ a kép és a háttér kezeléséhez, valamint az alkalmazás bezárásához. A Visual Studio IDE eszközkészletéből adja hozzá a PictureBoxot és a jelölőnégyzetet.

1. Nyissa meg a Visual Studiót. A képnézegető projekted a Legutóbbi megnyitásokalatt jelenik meg.

2. A Windows Forms Designer-ban válassza ki az előző oktatóanyagban hozzáadott TableLayoutPanelt. Ellenőrizze, hogy tableLayoutPanel1 megjelenik-e a Tulajdonságok ablakban.

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. Az eszközkészletben bontsa ki Közös vezérlők.

4. Kattintson duplán a PictureBox vezérlőre, hogy hozzáadjon egy PictureBox vezérlőt az űrlaphoz. A Visual Studio hozzáadja a PictureBox vezérlőt a TableLayoutPanel első üres cellájába.

5. Jelölje ki az új PictureBox vezérlőt, majd az új PictureBox vezérlő fekete háromszögét választva jelenítse meg a feladatlistáját.

   

6. Válassza a Dockot a Szülőtárolóban, amely a PictureBox Dock tulajdonságot Kitöltésértékre állítja. Ezt az értéket a Tulajdonságok ablakban tekintheti meg.

7. A PictureBox Tulajdonságok ablakában állítsa a ColumnSpan tulajdonságot 2 értékre. A Képmező mostantól mindkét oszlopot kitölti.

8. Állítsa a BorderStyle tulajdonságot Rögzített3D.

9. A Windows Forms Designerbenválassza ki a TableLayoutPanellehetőséget. Ezután a eszközkészlet-ben duplán kattintson a Jelölőnégyzet elemre új jelölőnégyzet vezérlőelem hozzáadásához. A PictureBox a TableLayoutPanel első két celláját veszi fel, így a jelölőnégyzet vezérlőelem a bal alsó cellához lesz hozzáadva.

10. Válassza ki a Szöveg tulajdonságot, és adja meg Stretch.

    

Gombok hozzáadása elrendezéspanelen

Eddig vezérlőket adott hozzá a TableLayoutPanelhez. Ezek a lépések bemutatják, hogyan adhat hozzá négy gombot egy új elrendezési panelhez a TableLayoutPanelben.

1. Válassza ki az űrlap TableLayoutPanel elemét. Nyissa meg a eszközkészletet, és válassza Tárolóklehetőséget. Kattintson duplán FlowLayoutPanel új vezérlőelem hozzáadásához a TableLayoutPanel utolsó cellájába.

2. Állítsa be a FlowLayoutPanel Dock tulajdonságát a Fillértékre. Ezt a tulajdonságot a fekete háromszög kiválasztásával, majd a szülőtárolóban Dockkiválasztásával állíthatja be.

   A FlowLayoutPanel olyan tároló, amely egymás után rendezi a többi vezérlőt.

3. Válassza ki az új FlowLayoutPanelt, majd nyissa meg a eszközkészletet, majd válassza Közös vezérlőklehetőséget. Kattintson duplán a Gomb elemre egy gomb1nevű gombvezérlő hozzáadásához.

4. Kattintson duplán ismét a gombra egy másik gomb hozzáadásához. Az IDE a következőt nevezi gomb2.

5. Így további két gombot adhat hozzá. Egy másik lehetőség az gomb2kiválasztása. Ezután válassza a Szerkesztés>Másolás vagy a Ctrl+Clehetőséget. Ezután válassza Szerkesztés>Beillesztés parancsot a menüsávon, vagy nyomja le Ctrl+V billentyűkombinációt a gomb egy másolatának beillesztéséhez. Most illessze be újra. Az IDE hozzáadja gomb3 és gomb4 a FlowLayoutPanelhez.

6. Jelölje ki az első gombot, és állítsa be a szöveg tulajdonságát úgy, hogy Megjelenít egy képet.

7. A következő három gomb Szöveg tulajdonságait állítsa be a következőkre: Kép törlése, Háttérszín beállítása, és Bezárás.

8. A gombok méretének és elrendezésének megadásához válassza a FlowLayoutPanelt. Állítsa a FlowDirection tulajdonságot jobbról balra.

   A gomboknak a cella jobb oldalához kell igazodniuk, és megfordítani a sorrendjüket, hogy a Kép megjelenítése gomb a cella jobb oldalán legyen. A FlowLayoutPanel körüli gombok húzásával tetszőleges sorrendbe rendezheti őket.

9. Válassza a Bezárás gombot a kiválasztáshoz. Ezután a többi gomb egyidejű kijelöléséhez nyomja le és tartsa lenyomva a Ctrl billentyűt, és válassza ki őket is.

10. A Tulajdonságok ablakban állítsa a Automatikus méretezés tulajdonságot a True értékre. A gombok a szövegükhöz igazodva méreteződnek át.

    

A program futtatásával megtekintheti a vezérlők megjelenését. Válassza az F5 kulcsot, válassza Hibakeresés>Hibakeresés indítása, vagy válassza a Start gombot. A hozzáadott gombok még nem tesznek semmit.

Vezérlőnevek módosítása

Az űrlapon négy gomb található, a neve gomb1, gomb2, gomb3, és gomb4 a C#-ban. A Visual Basicben a vezérlőnevek alapértelmezett első betűje nagybetűs, így a gombok neve Button1, Button2, Button3és Button4. Ezekkel a lépésekkel informatívabb neveket adhat nekik.

1. Az űrlapon válassza a Bezárás gombot. Ha továbbra is az összes gomb ki van jelölve, a kijelölés megszakításához válassza Esc lehetőséget.

2. A Tulajdonságok ablakban keresse meg a (Név). Módosítsa a nevet closeButton.

   

   Az IDE nem fogadja el a szóközöket tartalmazó neveket.

3. Nevezze át a másik három gombot backgroundButton, clearButton, és showButton. A neveket a vezérlőválasztó legördülő listára kattintva ellenőrizheti a Tulajdonságok ablakban. Megjelennek az új gombnevek.

Bármely vezérlő nevét módosíthatja, például a TableLayoutPanelt vagy a Jelölőnégyzetet.

Párbeszédpanel-összetevők hozzáadása

Az alkalmazás képes megnyitni a képfájlokat, és összetevők használatával háttérszínt választani. Az összetevők olyanok, mint egy vezérlő. Az toolbox használatával adhat hozzá egy összetevőt az űrlaphoz. A tulajdonságokat a Tulajdonságok ablakban állíthatja be.

A vezérlőktől eltérően az összetevő űrlaphoz való hozzáadása nem ad hozzá látható elemet. Ehelyett bizonyos viselkedéseket biztosít, amelyeket kóddal aktiválhat. Ez például egy összetevő, amely megnyitja a Fájl megnyitása párbeszédpanelt.

Ebben a szakaszban egy OpenFileDialog összetevőt és egy ColorDialog összetevőt ad hozzá az űrlaphoz.

1. Válassza a Windows Forms Designer (Form1.cs [Tervezés]). Ezután nyissa meg a eszközkészletet, és válassza a Párbeszédpanelek csoportot.

2. Kattintson duplán a következőre: OpenFileDialog, hogy hozzáadjon egy openFileDialog1 nevű összetevőt az űrlaphoz.

3. Kattintson duplán ColorDialog elemre egy colorDialog1nevű összetevő hozzáadásához. Az összetevők ikonként jelennek meg Windows Forms Designer alján.

   

4. Válassza az openFileDialog1 ikont, és állítson be két tulajdonságot:

   • Állítsa a Szűrő tulajdonságot a következő értékre:

     JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*
     

   • Állítsa a Cím tulajdonságot a következő értékre: Képfájl kijelölése.

   A Szűrő tulajdonság beállításai határozzák meg, hogy milyen típusok jelenjenek meg a Kép kijelölése párbeszédpanelen.

Következő lépés

Lépjen tovább a következő oktatóanyagra, amelyből megtudhatja, hogyan adhat hozzá kódot az alkalmazáshoz.

oktatóanyag 3. része: Kód hozzáadása a Képmegjelenítőhöz