C# - GroupBox webkontrol készítése

forráskód letöltése
Windows-os alkalmazásban jól ismert a GroupBox. Ennek megfelelően készítjük el új webkontrolunkat, mely kinézetre egyezik Windows-os GroupBox-al, annyi extrával, hogy a mi kontrolunk esetén a keret szín tetszőleges lehet.
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());
    }