A mellékelt példa futtatása előtt a Library könyvtárban található GradientControlLibrary projektet fordítsa le. Ebben található a program futásához szükséges GradientControl kontrol.
Nézzük miként is jött létre e kontrol, mely a GradientControl.cs-ben található.
A GradientControl osztályban szükségünk lesz három adat tárolására és az ezekhez való hozzáférés biztosítására property-ken keresztül. A színátmenethez kell két Color típusú property, valamint a színátmenet irányát meghatározó int típusú property. Ez utóbbinál 0 jelenti majd a függőleges, míg az 1 érték a vízszintes irányt.
[DefaultProperty("StartColor"), ToolboxData("<{0}:GradientControl runat=server></{0}:GradientControl>")]
public class GradientControl: System.Web.UI.WebControls.WebControl
{
private Color startColor = Color.Red;
private Color endColor = Color.Yellow;
private int gradientType = 0;
A változókhoz a property-ket a szokásos módon hozzuk létre.
[Bindable(true), Category("Gradient")]
public Color StartColor
{
get{ return startColor;}
set{ startColor = value; }
}
A színátmenet képzéséhez egy ún. filter-t kell felhasználjunk, melynek segítségével egy adott HTML objektum hátterét egy általunk megadott színátmenet fogja kitölteni. Ennek megvalósítása úgy néz ki, hogy az adott objektum stílusához kell felvennünk egy újat, megfelelően paraméterezve.
Nincs más teendőnk, tehát a kontrol HTML kódját előállító Render függvényben, mint egy új, filter nevű stílus felvétele. Ehhez a HtmlTextWriter osztály AddStyleAttribute függvényét használhatjuk, mely hozzáad egy új stílust a már meglévőkhöz. A függvény első paraméterében a stílus nevét, másodikban annak értékét kell megadnunk.
protected override void Render(HtmlTextWriter output)
{
output.AddStyleAttribute("filter", "progid:DXImageTransform.Microsoft.Gradient (GradientType="+GradientType.ToString()+", StartColorStr='"+ColorToHexString(startColor)+"', EndColorStr='"+ColorToHexString(endColor)+"')");
RenderBeginTag(output);
output.Write(" ");
RenderEndTag(output);
}
Ha a kontrolt elhelyeztük az ASP.NET web lapon, akkor valami ilyesmit láthatunk annak forrásában:
<cc1:GradientControl id="GradientControl1" style="Z-INDEX: 101; LEFT: 56px; POSITION: absolute; TOP: 64px" runat="server" Width="352px" Height="48px" StartColor="White" EndColor="DodgerBlue"></cc1:GradientControl>
Ha futtatjuk a programot, akkor pedig ez lesz belőle:
<span id="GradientControl1" style="filter: progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#FFFFFFFF', EndColorStr='#FF1E90FF'); height:48px; width:352px; Z-INDEX: 101; LEFT: 56px; POSITION: absolute; TOP: 64px"> </span>