Grafika hozzáadása egy C# Windows űrlapalkalmazáshoz

A Windows Forms egy keretrendszer, amely lehetővé teszi asztali alkalmazások készítését. Az összetevőket, például a gombokat, rákattinthat és ráhúzhat a vizuális felhasználói felületre. Segít a kódon belüli különféle alakzatok manuális létrehozásában is.

Ez a cikk bemutatja, hogyan adhat hozzá vonalakat, alakzatokat és képeket az alkalmazáshoz. Ez az oktatóanyag a Visual Studio 2019 Community Edition alkalmazást használja a példák bemutatásához.

Melyek a beépített osztályok a rajzoláshoz?

A Windows Forms a C# programozási nyelv. Beépített osztályai és metódusai lehetővé teszik, hogy különféle alakzatokat rajzoljon egy Windows Form vászonra. Ide tartoznak a Grafika, Toll, Szín és Ecset osztályok.

A fenti oktatóanyag futó példájának forráskódjának megtekintéséhez keresse fel a GitHub adattár. Kipróbálhatja a következő példákat, ha már végzett létrehozott egy Winforms alkalmazást.

Festék hozzáadása az űrlapbetöltési eseménykezelőhöz

Először is adjon hozzá egy eseménykezelőt az alakzatok rajzolásához a vászon betöltésekor.

1. Adjon hozzá egy Paint funkciót az űrlaphoz.

   private void Form1_Paint (objektum küldő, PaintEventArgs e)
   {
    // A kód ide kerül
   }

2. Lépjen a Tervező nézet lapra.
3. A Tulajdonságok ablakban válassza ki a villám ikont az „Események” lap megnyitásához.
4. A „Paint” „Appearance” alatt válassza ki a Form1_Paint funkciót. Ez végrehajtja a funkciót az alkalmazás futtatásakor.

Hogyan rajzoljunk vonalakat egy Windows űrlapvászonra

A Color, Pen és a DrawLine() metódus segítségével vonalakat rajzolhat a vászonra.

1. A Form1_Paint() függvényen belül hozzon létre egy Color objektumot a vonal színének megfelelő színnel. Ezután hozzon létre egy tollobjektumot, amellyel meghúzhatja a vonalat.

   Szín fekete = Szín. FromArgb (255, 0, 0, 0);
   Pen blackPen = új toll (fekete);
   

2. A Graphics osztály DrawLine() metódusa a tollal rajzol egy vonalat. Ezzel megkezdődik egy vonal rajzolása egy x, y pozícióból egy másik x, y pozícióba.

   e. Grafika. DrawLine (blackPen, 300, 200, 800, 200);
   

3. Módosíthatja a tollobjektum tulajdonságait, hogy módosítsa a szélességét, a kötőjel stílusát, valamint a kezdő- vagy végsapkát.

   blackPen. Szélesség = 20;
   blackPen. DashStyle = Rendszer. Rajz. Drawing2D.DashStyle. Gondolatjel;
   blackPen. StartCap = Rendszer. Rajz. Rajz2D.LineCap. ArrowAnchor;
   e. Grafika. DrawLine (blackPen, 300, 200, 800, 200);
   

4. Nyomja meg a zöld lejátszás gombot a Visual Studio tetején a változások megtekintéséhez.

Hogyan rajzoljunk alakzatokat, például téglalapokat és köröket

Használhatja az alakzatosztályokat különböző alakzatokhoz, vagy kézzel rajzolhat alakzatokat a vászonra.

1. Hozzon létre egy Color and Pen objektumot az előző lépések szerint. Ezután használja a DrawRectangle() metódust a téglalap létrehozásához. Az argumentumok a téglalap bal felső részének x és y koordinátái, valamint a szélessége és magassága.

   Szín piros = Szín. FromArgb (255, 255, 0, 0);
   Pen redPen = új toll (piros);
   piros toll. Szélesség = 5;
   e. Grafika. DrawRectangle (piros toll, 100, 100, 500, 200);
   

2. A Téglalap osztály használatával is létrehozhat téglalapot. Először hozzon létre egy Téglalap objektumot. Az argumentumok egyben a bal felső sarok, a szélesség és a magasság x és y koordinátái is.

   Téglalap téglalap = új Téglalap (100, 350, 500, 200);
   

3. Használja a DrawRectangle() függvényt a téglalap megrajzolásához. Az x, y, szélesség és magasság átadása helyett, mint korábban, használhatja a Rectangle objektumot.

   e. Grafika. DrawRectangle (pirosPen, téglalap);
   

4. Nyomja meg a zöld lejátszás gombot a Visual Studio tetején a változások megtekintéséhez.
5. Más alakzatok rajzolásához lépjen vissza a kódhoz. Használja a DrawEllipse() függvényt egy kör rajzolásához.

   Szín zöld = szín. FromArgb (255, 0, 255, 0);
   Toll zöldPen = új toll (zöld);
   greenPen. Szélesség = 5;
   e. Grafika. DrawEllipse (zöld toll, 400, 150, 400, 400);

   Amikor kört rajzol, az x és y koordináták (x=400, y=150) a kör bal felső sarkára vonatkoznak, nem a kör középpontjára.
6. Más alakzatok, például háromszögek vagy hatszögek rajzolásához használja a DrawPolygon() metódust. Itt megadhatja az alakzat pontjait ábrázoló koordináták listáját.

   Szín kék = szín. FromArgb (255, 0, 0, 255);
   Pen bluePen = új toll (kék);
   bluePen. Szélesség = 5;
   PontF[] koordinátákTriangle = new PointF[] {
    új pontF(400, 150),
    új pontF(300, 300),
    új pontF(500; 300)
   };
   e. Grafika. Draw Polygon (kék toll, háromszög koordinátái);
   

   A DrawPolygon() metódus vonalakat húz a megadott pontok közé. ​​​​​​

Az ecsetosztály használata a formák színekkel való kitöltésére

A FillRectangle(), a FillEllipses() vagy a FillTriangle() metódusokkal egyszínű alakzatokat hozhat létre.

1. Először hozzon létre egy ecset objektumot.

   Szín lila = Szín. FromArgb (255, 128, 0, 0);
   SolidBrush solidBrush = új SolidBrush (lila);

2. Használja a FillRectangle(), a FillEllipses() vagy a FillTriangle() metódusokat. Ugyanúgy működnek, mint a fenti rajzolási funkciók, azzal a különbséggel, hogy toll helyett ecsetobjektumot használnak.

   e. Grafika. FillRectangle (solidBrush, 50, 50, 200, 250);
   e. Grafika. FillEllipse (solidBrush, 300, 50, 200, 200);
   e. Grafika. FillPolygon (solidBrush, new PointF[] { new PointF(700, 150), new PointF(600, 300), new PointF(800, 300) });

3. A koordináták megadása helyett közvetlenül is megadhat egy alakzatobjektumot.

   Téglalap téglalap = új Téglalap (100, 350, 500, 200);
   e. Grafika. FillRectangle (solidBrush, rectangle);

4. A HatchBrush segítségével töltse ki az alakzatot más kitöltési stílussal, például vízszintes vagy függőleges mintával.

   Szín kék = szín. FromArgb (255, 0, 0, 255);
   Szín zöld = szín. FromArgb (255, 0, 255, 0);
   HatchBrush hatchBrush = új HatchBrush (HatchStyle. Vízszintes, zöld, kék);
   e. Grafika. FillRectangle (hatchBrush, 50, 50, 200, 250);

5. A TextureBrush segítségével kitöltheti az alakzatot kép segítségével. Itt hozzon létre egy bittérképet egy képfájlra mutatva. Ahelyett, hogy szín használatával ecsetet hozna létre, készítse el a kép segítségével.

   Bitmap kép = (Bittérkép) Kép. FromFile(@"C:\Users\Sharl\Desktop\flag.bmp", igaz);
   TextureBrush textureBrush = új TextureBrush (kép);
   e. Grafika. FillRectangle (textureBrush, 100, 100, 500, 400);

Hogyan lehet képeket renderelni az űrlapon

Kép megjelenítéséhez hozzon létre egy PictureBox vezérlőobjektumot, és adja hozzá az űrlaphoz.

1. Hozzon létre egy PictureBox vezérlőobjektumot képfájl segítségével.

   PictureBox kép = new PictureBox();
   kép. ImageLocation = @"C:\Users\Sharl\Desktop\flagLarge.bmp";
   

2. Állítsa be a kép méretét, és adja hozzá az űrlaphoz, hogy megjelenjen.

   kép. SizeMode = PictureBoxSizeMode. Automatikus méret;
   ez. Vezérlők. Hozzáadás (kép);

3. Nyomja meg a zöld start gombot felül a kép megtekintéséhez.

További alakzatok hozzáadása a Windows űrlapjához

Most már meg kell értenie, hogyan adhat hozzá vonalakat, alakzatokat és képeket a Windows űrlapjához. Az alakzatokat kombinálhatja új alakzatok létrehozásához. A beépített funkciókkal bonyolultabb formákat is létrehozhat.

A szerzőről

Sharlene Von Drehnen (7 cikk megjelent)

Sharlene a MUO műszaki írója, és teljes munkaidőben szoftverfejlesztéssel foglalkozik. Bachelor of IT-vel rendelkezik, és korábbi tapasztalata van a minőségbiztosítás és az egyetemi oktatás terén. Sharlene szeret játszani és zongorázni.

Továbbiak Sharlene Von Drehnentől