C# - Százalék kijelző grafikai kontrol

forráskód letöltése
E példánkban most egy összetett grafikai kontrolt készítünk ASP.NET-es alkalmazásokhoz. A kontrol képes lesz arra, hogy egy minimum és maximum határ közötti aktuális értéket jelenítsen meg százalékosan számként kiírva, majd a háttérben ezt az értéket grafikusan is megjeleníti egy téglalap területén oly módon, hogy azt két tetszőlegesen választott szín közötti színátmenettel tölti fel.
Mellékelt példa megnyitása előtt szükséges egy PercentLabel nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez nyissa meg a mellékelt mappa Tulajdonság ablakát és itt a Webmegosztás lapon engedélyezze a mappa megosztását olvasási és parancsfájlok futtatási jogával.
A mellékelt PercentLibrary mappában lévő projekt lefordítása után a ToolBox-ra felvehető egy PercentLabelControl nevű kontrol, mely ezt követően bármely web-es alkalmazásban felhasználható.
A kontrol használatához a Min property-be állítsuk be a lehetséges minimum értéket, míg a Max property-be a maximálist. E kettő között adhatunk meg egy számot a Value property-ben. A kontrol e három szám alapján számítja ki a megjelenítendő százalékos értéket.
A színátmenet kezdő színét a StartColor property-ben adhatjuk meg, míg a befejezőt az EndColor-ban.
Megvalósításhoz a létrehozott új osztály Render függvényét írjuk felül. Itt kell megadnunk a kontrol által generálandó HTML kódot. Első lépésként kiszámítjuk a százalékos értéket és tároljuk a d változóba.
    protected override void Render(HtmlTextWriter output)
    {
      double d = max - min;
      d = value / d;
Majd létrehozunk egy Panel kontrolt, ezen fogjuk tárolni az összes létrehozandó további kontrolunkat.
      Panel p = new Panel();
      p.Width = 122;
      p.Height = 36;
      p.Style.Add("position", "relative");
A grafikai megjelenítéshez további két Panel kontrolra lesz szükségünk. Az első Panel kontrol jeleníti meg a színátmenetes téglalapot olyan szélességben, mely megfelel az imént számított százalékos értéknek. A Panel szélességét úgy számítjuk ki, hogy a kapott százalékos értéket szorozzuk a maximális lehetséges szélességgel, mely 120 pixel.
      Panel p1 = new Panel();
      p1.Width = Unit.Pixel(Convert.ToInt32(d*120));
      p1.Height = Unit.Pixel(6);
Színátmenet létrehozásához egy Filter stílust adunk a kontrolhoz.
      p1.Style.Add("filter", "progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='"+ColorToHexString(startColor)+"', EndColorStr='"+ColorToHexString(endColor)+"')");
Bár a Panel szöveget nem jelenít meg, ennek ellenére a Font méretet egy igen kis értékre kell választanunk. Ennek megértéséhez tudnunk kell, hogy a Panel egy <DIV> HTML kódot generál, melynek magassága nem lehet kisebb mint az aktuális betűmérettel elférő szöveg magassága. Vagyis, ha a betűméretet nem választjuk kicsire, akkor hiába állítjuk be a Panel Height property-jét 6 pixelre, az ennél magasabb lesz.
      p1.Style.Add("font-size", "1");
      p1.Style.Add("left", "1");
      p1.Style.Add("top", "13");
      p1.Style.Add("position", "absolute");     
Másodikként létrehozott Panel kontrol arra szolgál, hogy az előbbi köré kirajzoljunk egy keretet. Ez a keret mindig fix szélességű lesz, függetlenül az aktuális százalékos értéktől.
      Panel p2 = new Panel();
      p2.Width = Unit.Pixel(122);
      p2.Height = Unit.Pixel(8);
      p2.Style.Add("font-size", "1");
      p2.Style.Add("left", "0");
      p2.Style.Add("top", "12");
      p2.Style.Add("position", "absolute");     
      p2.Style.Add("border", "gray 1 solid");
Szükségünk lesz még egy Label kontrolra is, ennek segítségével jelenítjük meg a már kiszámított százalékos értéket a színátmenetes téglalap felett.
      Label l = new Label();
      l.Style.Add("left", "0");
      l.Style.Add("top", "0");
      l.Style.Add("position", "absolute");
      l.Text = Convert.ToInt32(d*100).ToString() + "%";
      l.Font.Size = 18;  
      l.Font.Name = "Tahoma";
      l.Font.Bold = true;
Végső lépésként az elsőként létrehozott Panel kontrolon elhelyezzük az imént létrehozott kontrolokat.
      p.Controls.Add(p2);      
      p.Controls.Add(p1);      
      p.Controls.Add(l);
Kontrolok ezzel elkészültek, most már csak a HTML kódok előállítása van vissza. Itt első lépésként meghívjuk a RenderBeginTag függvényt, majd a generálás végén a RenderEndTag függvényt. Ezek biztosítják, hogy a létrejött kontrolunk tetszőleges helyre pozícionálható a web oldalon belül. E két függvény között kell gondoskodnunk a Panel kontrol HTML kódjának generálásáról. Ehhez csak annyi a teendőnk, hogy meghívjuk a kontrol RenderControl függvényét. Mivel a Panel kontrol, mint szülő tartalmazza a többi kontrolt, így a generálás folyamán az összes kontrol HTML kódja előállt.
      RenderBeginTag(output);
      p.RenderControl(output);
      RenderEndTag(output);
    }