Százalék kijelző grafikai kontrol

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);
    }