C# - Property létrehozása egyedi grafikával

forráskód letöltése
Ha a Properties ablakban megnézünk egy ForeColor, BackColor property-t, akkor nem csak egy feliratot láthatunk, hogy mi is az adott property aktuális értéke, hanem e felirat előtt egy kis téglalapban meg is jelenik a kiválasztott szín.
Saját osztályaink, kontroljaink létrehozásakor bármelyik property-nkhez mi is hozzárendelhetünk egy tetszőleges grafikát, mely a felirat előtti kis téglalapban jelenhet meg.
Legyen a következő a feladat: készítsünk egy olyan kontrolt, mellyel százalékos formában kijelezhetünk egy folyamatot, hogy az éppen hol tart. A megjelenítés ne csak szöveges legyen, hanem színezzük a hátteret is balról jobbra indulva olyan mértékig, amíg a megadott százalékos érték előírja.
A színezéskor a színt a ForeColor property adja meg, míg a százalékos értékhez létrehozunk egy új property-t Percent névvel, mely nulla és száz közötti szám tárolására lesz alkalmas. Ennél a property-nél fogjuk létrehozni azt a speciális megjelenítést, mely lehetővé teszi, hogy a Properties ablakba rajzoljunk is a property-nk aktuális értéke mellé.
Létrehozunk tehát egy új UserControl-t, melynek neve UserControl1 lesz.

Az új property létrehozásakor meg kell adnunk egy speciális szerkesztő osztályt, melyben a rajzolás elvégezhető. Ehhez egy Editor attribútumot kell megadnunk a property létrehozásánál. Ezen belül meg kell adnunk a property szerkesztő osztályunk típusát, valamint annak ősének típusát.
    [Editor(typeof(PercentEditor), typeof(UITypeEditor))]      
    public int Percent
    {
      get
      {
        return percent;
      }
      set
      {
        if (value>=0 && value<=100)
        {
          percent=value;
          Invalidate();
        }
      }
    }
A property szerkesztő osztály létrehozásánál két függvényt kell felülírnunk a kívánt hatás érdekében. Az első a GetPaintValueSupported. Ennél csak annyi a teendőnk, hogy a függvény visszatérési értékét igazra állítjuk. Ezzel jelezzük, hogy grafikát is kívánunk létrehozni a property értéke mellé. Ettől kezdve amikor a grafika kirajzolására lesz szükség, meghívásra kerül a másik felülírt függvény, a PaintValue.
  public class PercentEditor: UITypeEditor
  {
    public override bool GetPaintValueSupported(ITypeDescriptorContext context) 
    {
      return true;
    }
Amikor a PaintValue függvény meghívásra kerül, akkor kell elvégeznünk az egyedi grafikánk megjelenítését. Paraméterként kapunk egy PaintValueEventArgs típusú változót. Ebben rendelkezésünkre áll az összes olyan információ, melyre a rajzoláshoz szükségünk lesz. Így például a Context paraméter Instance property-én keresztül elérhetjük azt a kontrolt, melyhez a rajzolást végezzük. Ezt eltároljuk most egy UserControl1 típusú változóba, hogy későbbiek folyamán elérhessük a ForeColor property-t a rajzolási szín meghatározásához.
    public override void PaintValue(PaintValueEventArgs pe) 
    {
      UserControl1 uc = (UserControl1)pe.Context.Instance;
A rajzolási területet a Bounds property tartalmazza. Ennek szélességét csökkentenünk kell, attól függően, hogy a property aktuálisan milyen értéket tartalmaz. A property aktuális értéke a Value property-n keresztül kérdezhető le.
      Rectangle r = pe.Bounds;
      r.Width = pe.Bounds.Width*(int)pe.Value/100;
      pe.Graphics.FillRectangle(new SolidBrush(uc.ForeColor), r);
    }
  }
Ezzel készen is vagyunk. Ha lefordítjuk az EXE-t, akkor az új kontrol felvehető a Toolbox-ra: jobb gomb - Customize Toolbox - .NET Framework components - Browse, majd keressük elő a lefordított EXE-t.
Ha most felteszünk a Form-ra az új kontrolból és állítjuk annak Percent property-jét, akkor nem csak a kontrolon lesz követhető a változás, hanem rögtön a property értéke mellett látható kis téglalapban is.