A konkrét feladatunk az lesz, hogy helyezzünk el 12 db Button kontrolt kör alakban a web lapon úgy, hogy minden nyomógomb megfeleljen egy-egy órának. Bármely gomb lenyomásakor jelenjen meg egy Label-en az adott gombhoz tartozó „óra” értéke.
A gombokat a Page osztály Load eseménynél fogjuk létrehozni, melyben egy ciklust készítünk, mely -60 foktól 300 fokig megy 30 fokos lépésenként. Ezekre a logikátlannak tűnő értékhatárokra azért van szükség, mert így a gombok sorrendje egyezni fog az órák sorrendjével, vagyis az első Button lesz az 1 óra, a második a 2, és így tovább.
private void Page_Load(object sender, System.EventArgs e)
{
Button b;
int x;
int y;
int h = 1;
for (int i=-60; i<300; i+=30)
{
A gomb létrehozása előtt ki kell számítanunk annak koordinátáját, melyet az x, y változóba fogunk tárolni. Ehhez a ciklusváltozót, mint az aktuális szöget vesszük figyelembe, majd némi szinusz, koszinusz után megkapjuk a szükséges értékeket. A 100-al történő szorzás a kör sugarát adja, így ezzel tudjuk szabályozni, hogy mekkora területen helyezkedjenek el a gombok. A 100 hozzáadása pedig azért történik a koordinátákhoz, mert ezzel biztosítjuk azt, hogy mindig pozitív számok jönnek létre és erre a későbbiekben szükségünk lesz. Mivel 100 a sugár, így a kör koordinátái -100 és 100 közötti értéken mozognak. A hozzáadás segítségével ezt eltoltuk a 0 és 200 közötti érték tartományba.
x=Convert.ToInt32(Math.Cos(i*Math.PI/180)*100+100);
y=Convert.ToInt32(Math.Sin(i*Math.PI/180)*100+100);
Most már létrehozhatunk egy új Button kontrolt, melynek beállítjuk a szükséges property-jeit.
b = new Button();
b.Text=h.ToString();
b.Style.Add("left", x.ToString());
b.Style.Add("top", y.ToString());
b.Style.Add("position", "absolute");
b.Width=32;
b.Height=32;
A CommandArgument property-be tároljuk el azt, hogy az adott gomb hányadik órának felel meg. Erre majd a Command eseménynél lesz szükségünk, mely akkor jön létre, ha a felhasználó az adott gombra kattint.
b.CommandArgument=h.ToString();
A Command eseményhez minden gomb esetében ugyanazt a Button_Command nevű eseménykezelő függvényünket rendeljük, így mind a 12 gombnál ez az egy függvény kezeli majd a Command eseményt.
b.Command+=new CommandEventHandler(Button_Command);
A Button osztály létrehozása és a szükséges property-k feltöltése még nem elegendő ahhoz, hogy a kontrol meg is jelenjen a web lapon. Ehhez még a Controls tömb Add függvényét is meg kell hívnunk, paraméterként átadva azt a kontrolt, melyet fel szeretnénk venni a többi közé.
Controls property, minden olyan kontrolnak van, mely a Control osztályból származik. Ilyen például a Page osztály is, mely a web oldalunkat képviseli. Mégsem ajánlott közvetlenül ezt használni kontrol felvételhez, mert bizonyos kontrolok és ilyen a Button is, ezt nem veszik jó néven. Így például a this.Controls.Add(b) utasítás - bár látszólag hibátlan - itt hibát okozna.
Megoldásként célszerű mindig egy szülőkontrolt felvenni és erre helyezni programból az új kontrolokat. Ilyen lehet például egy Panel elhelyezése mely, ha úgy kívánjuk nem is lesz látható az eredmény web oldalon, hiszen ebből csak egy <div></div> címke lesz. Ha tehát adott egy Panel, akkor erre már felvehetjük az új nyomógombokat.
Panel1.Controls.Add(b);
h++;
}
}
Fontos tudnunk, hogy a kontrol elhelyezkedése a Panel-en, annak a bal felső sarkához igazodik. Ha tehát a Panel szélességét, magasságát beállítjuk úgy, hogy az pontosan lefedje a majdan megjelenő kontrolok teljes területét, akkor könnyedén tervezhetjük a web lapunkat, hiszen ahová ezt a Panel-t mozgatjuk annak a területén lesznek a nyomógombok is. Fontos tudnunk, hogy ha a Panel mérete kisebb lenne, mint amekkora hely a nyomógombokhoz kell, akkor azok minden további nélkül ki fognak lógni a Panel területéről!
Tudjuk, hogy a kör sugara 100 pixel. Tudjuk, hogy egy nyomógomb szélessége, magassága 32 pixel, mivel ekkorára állítottuk. Ezek alapján tudhatjuk, hogy a Panel magasságát, szélességét 100 * 2 + 32 = 232 pixel méretűre kell állítanunk ahhoz, hogy megkapjuk azt a területet, melyet a nyomógombok majd teljesen lefednek.
Ha a nyomógomb koordináták számításánál nem adtuk volna a koordinátákhoz a sugarat, a 100 pixelt, akkor a Panel bal felső sarka a kör középpontja lenne és a nyomógombok nem a Panel területén helyezkednének el. Ezért volt szükség a tartomány eltolására 0 és 200 közé.