Mellékelt példa megnyitása előtt szükséges egy GroupBox 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 kontrol használatához a Text property-ben adja meg a GroupBox feliratát, majd a BorderImage egy olyan kép URL-jét, mely 1 x 1 pixeles és tetszőleges színű. E képpel lesz megrajzolva a GroupBox kerete.
Annak érdekében, hogy a kontrol már szerkesztési időben is a valós képét mutassa, így e két property értékének változásakor gondoskodnunk kell arról, hogy a kontrol már az új tartalommal jelenjen meg. Ezért van szükség a ChildControlsCreated property értékének hamisra állítására, mivel ekkor a CreateChildControls függvény újra lefut, így a kontrol tartalma ismételten előállításra kerül.
public string BorderImage
{
get
{
return borderImage;
}
set
{
borderImage = value;
ChildControlsCreated = false;
}
}
A készítendő GroupBox kontrol annyiban eltér a Windows-os verziótól, hogy Drag and Drop-al nem helyezhető el rajta újabb kontrol. További kontrolok a CreateChildControls függvényen keresztül hozhatók létre a GroupBox-ban.
A CreateChildControls-ban négy Image kontrolt és egy Label kontrol-t hozunk létre. A négy Image-t úgy pozícionáljuk, hogy a keret megfelelően kirajzolásra kerüljön.
protected override void CreateChildControls()
{
image1 = new System.Web.UI.WebControls.Image();
image1.ImageUrl = borderImage;
image1.Height = 1;
image1.Style.Add("left", "0");
image1.Style.Add("top", "8");
image1.Style.Add("position", "absolute");
Controls.Add(image1);
...
E keretre helyezzük rá a Label-t, melynél a Padding stílus segítségével a szöveg előtt és utána némi üres helyet is nyerünk a szebb megjelenés érdekében.
l = new Label();
l.BackColor = Color.White;
l.Style.Add("left", "16");
l.Style.Add("top", "0");
l.Style.Add("position", "absolute");
l.Style.Add("padding-left", "8");
l.Style.Add("padding-right", "8");
l.Text = text;
Controls.Add(l);
}
A Render függvényben az Image kontrolok néhány tulajdonságát állítanunk kell a kontrol aktuális méretétől függően. Erre azért van szükség, mert ha a kontrol mérete változik - akár már szerkesztési időben is - a képek méretét, pozícióit ennek megfelelően át kell állítanunk.
protected override void Render(HtmlTextWriter writer)
{
EnsureChildControls();
image1.Width = Width;
image2.Height = (int)Height.Value - 16;
image2.Style.Add("left", (Width.Value-1).ToString());
image3.Width = Width;
image3.Style.Add("top", (Height.Value-8).ToString());
image4.Height = (int)Height.Value - 16;
base.Render(writer);
Style.Add("width", Width.ToString());
Style.Add("height", Height.ToString());
}