Egy `szót átszínezni` a `C# listboxban`? Egyszerűbb, mint gondolnád!

Amikor fejlesztői pályafutásunk során felhasználói felületek (UI) megalkotására kerül sor, gyakran találkozunk olyan egyszerű, alapvető vezérlőkkel, mint a C# ListBox. Első pillantásra a ListBox egy puritán, egyfunkciós eszköznek tűnhet, mely kizárólag szöveges elemek listázására szolgál. Sokan azonnal RichTextBoxhoz vagy más, komplexebb komponensekhez nyúlnak, ha vizuális kiemelésre, formázásra vágynak, ám valójában a ListBox is rejteget egy igazi kincset, amivel sokkal többre képes, mint azt elsőre hinnénk. Pontosan arról van szó, hogy egy adott szót vagy kifejezést átszínezni, kiemelni a lista elemein belül – mindezt meglepően egyszerűen.

De miért is foglalkoznánk ezzel? Miért ne használnánk egyből a RichTextBoxot, ha már a formázásról beszélünk? Nos, a válasz gyakran a teljesítményben, a memóriahasználatban és a szükséges funkcionalitás minimalizálásában rejlik. Egy RichTextBox sokkal erőforrás-igényesebb, mint egy ListBox, és ha csupán annyira van szükségünk, hogy egy-egy szót megkülönböztessünk a többitől, akkor az OwnerDraw technika alkalmazása a ListBox-ban egy elegáns és hatékony megoldást kínál.

A ListBox alapvető korlátai és az elvárások

A standard ListBox vezérlő a .NET keretrendszerben alapértelmezetten nem támogatja a beépített rich text formázást. Ez azt jelenti, hogy ha hozzáadunk egy stringet, az pont úgy fog megjelenni, ahogy megadtuk, egységes betűtípussal, mérettel és színnel. Nincs lehetőség arra, hogy a szöveg egy részét félkövérré tegyük, aláhúzzuk, vagy épp pirosra színezzük. Ez a korlát sok fejlesztőt elriaszt, és arra késztet, hogy bonyolultabb alternatívák után nézzen. Pedig a megoldás kulcsa a ListBox egyedi rajzolási képességében, az úgynevezett OwnerDraw módban rejlik. 💡 Ez a funkció lehetővé teszi, hogy mi magunk szabályozzuk, hogyan jelenjenek meg a lista elemei.

Képzeljünk el egy szcenáriót: egy log fájl megjelenítő alkalmazást fejlesztünk, ahol a figyelmeztető üzeneteket sárgával, a hibaüzeneteket pirossal, míg a kritikus hibákat élénkpirossal szeretnénk kiemelni, pusztán egy-egy kulcsszó alapján. Vagy gondoljunk egy feladatkezelőre, ahol a „SÜRGŐS” szó más színnel jelenik meg a feladat leírásában. Ezekben az esetekben a ListBox OwnerDraw funkciója a tökéletes, könnyűsúlyú és erőforrás-takarékos válasz.

Az OwnerDraw Technika lényege: Kézi rajzolás a ListBoxban

Az OwnerDraw technika alapvetően azt jelenti, hogy a ListBox nem saját maga rajzolja ki az elemeit, hanem átadja a felelősséget nekünk, a fejlesztőknek. Ezt a `DrawMode` tulajdonság beállításával érhetjük el. Két fő opció áll rendelkezésünkre:

• OwnerDrawFixed: Ebben az esetben minden lista elem azonos magasságú lesz. A vezérlő megjegyzi az első elem magasságát, és az összes többi elem számára is ezt a magasságot használja.
• OwnerDrawVariable: Ez a mód rugalmasabb, lehetővé téve, hogy az egyes lista elemek eltérő magasságúak legyenek. Ha ezt választjuk, a `MeasureItem` eseményt is kezelnünk kell, hogy megadjuk az egyes elemek magasságát a ListBoxnak.

A legtöbb esetben az OwnerDrawFixed elegendő, ha csak szavakat színezünk át, és nem változtatjuk az elemek magasságát. Ha viszont több soros szövegeket is kezelnénk, ahol a magasság dinamikusan változik, akkor a `OwnerDrawVariable` a megfelelő választás.

Miután beállítottuk a `DrawMode` tulajdonságot, a ListBox aktiválni fogja a DrawItem eseményt minden alkalommal, amikor egy elemet meg kell jelenítenie a képernyőn. Ez az a pont, ahol mi beavatkozhatunk, és megrajzolhatjuk az elemet pontosan úgy, ahogy szeretnénk.

Lépésről lépésre: Szó kiemelése a ListBoxban

Nézzük meg, hogyan valósíthatjuk meg ezt a gyakorlatban. Tegyük fel, hogy van egy ListBoxunk, és szeretnénk, ha a „hiba” szó piros színnel jelenne meg az összes olyan listaelemben, amelyik tartalmazza ezt a szót.

1. A ListBox inicializálása

Először is, hozzunk létre egy ListBox vezérlőt a formunkon (vagy a kódban), és állítsuk be a `DrawMode` tulajdonságát `OwnerDrawFixed` értékre. Ezt megtehetjük a Visual Studio Designerben, vagy kódból:

this.myListBox.DrawMode = DrawMode.OwnerDrawFixed;
this.myListBox.DrawItem += new DrawItemEventHandler(this.myListBox_DrawItem);

Fontos, hogy feliratkozzunk a DrawItem eseményre, hiszen ezen keresztül kapunk lehetőséget a rajzolásra.

2. A DrawItem esemény kezelése

Ez a kulcsfontosságú lépés. A DrawItem eseménykezelő kap egy DrawItemEventArgs objektumot, amely rengeteg hasznos információt tartalmaz:

• `e.Graphics`: Ez a grafikus felület, amire rajzolnunk kell.
• `e.Bounds`: Az a téglalap alakú terület, ahová az aktuális elemet rajzolnunk kell.
• `e.Index`: Az aktuálisan rajzolandó elem indexe a listában.
• `e.State`: Az elem aktuális állapota (pl. kiválasztott, fókuszált).

Az eseménykezelőnk struktúrája valahogy így néz ki:

private void myListBox_DrawItem(object sender, DrawItemEventArgs e)
{
    // Ellenőrizzük, hogy érvényes-e az index
    if (e.Index < 0 || e.Index >= myListBox.Items.Count)
    {
        return;
    }

    // 1. Az elem szövegének lekérése
    string itemText = myListBox.Items[e.Index].ToString();

    // 2. Háttér rajzolása (kiemelés és alap háttér)
    e.DrawBackground(); // Ez rajzolja ki az alapértelmezett hátteret (pl. kék, ha ki van választva)

    // Ha az elem ki van választva vagy fókuszált, az alapértelmezett háttérrel együtt
    // rajzoljuk a szöveget, különben a saját hátterünkkel.
    Brush textBrush;
    if ((e.State & DrawItemState.Selected) == DrawItemState.Selected)
    {
        textBrush = SystemBrushes.HighlightText; // Fehér, ha ki van választva
    }
    else
    {
        textBrush = new SolidBrush(e.ForeColor); // Alapértelmezett ListBox szövegszín
    }

    // 3. A szó megtalálása és kiemelése
    string keresettSzo = "hiba";
    int indexKeresettSzo = itemText.IndexOf(keresettSzo, StringComparison.OrdinalIgnoreCase);

    if (indexKeresettSzo != -1)
    {
        // Ha megtaláltuk a szót, akkor több részre bontjuk a szöveget
        string elsoResz = itemText.Substring(0, indexKeresettSzo);
        string kiemeltResz = itemText.Substring(indexKeresettSzo, keresettSzo.Length);
        string harmadikResz = itemText.Substring(indexKeresettSzo + keresettSzo.Length);

        // Kiszámoljuk a szövegrészek méretét
        SizeF sizeElsoResz = e.Graphics.MeasureString(elsoResz, e.Font);
        SizeF sizeKiemeltResz = e.Graphics.MeasureString(kiemeltResz, e.Font);

        // Rajzoljuk az első részt
        e.Graphics.DrawString(elsoResz, e.Font, textBrush, e.Bounds.Location);

        // Rajzoljuk a kiemelt részt, másik színnel
        RectangleF kiemeltRect = new RectangleF(
            e.Bounds.X + sizeElsoResz.Width,
            e.Bounds.Y,
            sizeKiemeltResz.Width,
            e.Bounds.Height
        );
        using (Brush kiemeltBrush = new SolidBrush(Color.Red)) // A kiemelt szó színe
        {
            e.Graphics.DrawString(kiemeltResz, e.Font, kiemeltBrush, kiemeltRect);
        }

        // Rajzoljuk a harmadik részt
        RectangleF harmadikRect = new RectangleF(
            kiemeltRect.X + kiemeltRect.Width,
            e.Bounds.Y,
            e.Bounds.Width - (sizeElsoResz.Width + sizeKiemeltResz.Width),
            e.Bounds.Height
        );
        e.Graphics.DrawString(harmadikResz, e.Font, textBrush, harmadikRect);
    }
    else
    {
        // Ha nem találtuk meg a szót, egyszerűen rajzoljuk ki az egész szöveget
        e.Graphics.DrawString(itemText, e.Font, textBrush, e.Bounds.Location);
    }

    // Rajzoljuk a fókuszt, ha az elem fókuszált
    e.DrawFocusRectangle();
}

Nézzük meg részletesebben a kód egyes részeit:

• Index ellenőrzés: Mindig jó gyakorlat ellenőrizni az `e.Index` érvényességét, hogy elkerüljük a `RangeOutOfRangeException` hibákat, különösen, ha az elemeket dinamikusan adjuk hozzá vagy töröljük.
• Háttér rajzolása: Az `e.DrawBackground()` meghívása gondoskodik arról, hogy az alapértelmezett ListBox háttér (beleértve a kiválasztott elem kék hátterét is) megrajzolódjon. Ez megkönnyíti a dolgunkat, mert nem kell magunknak kezelnünk a kiválasztott és nem kiválasztott állapotok háttérszíneit.
• Szövegkefe (Brush): Dinamikusan választjuk ki a szöveg színét attól függően, hogy az elem ki van-e választva. Ha igen, akkor `SystemBrushes.HighlightText` (általában fehér) ecsetet használunk, ha nem, akkor az alapértelmezett előtérszínt (általában fekete).
• Szó keresése és felosztása: Az `itemText.IndexOf()` metódussal keressük meg a kiemelendő szót. Ha megtaláltuk, három részre osztjuk a stringet: a szó előtti részre, magára a szóra, és a szó utáni részre.
• Szövegrészek méretezése: Az `e.Graphics.MeasureString()` metódus elengedhetetlen ahhoz, hogy tudjuk, mennyi helyet foglal el az egyes szövegrészek, így pontosan tudjuk pozícionálni őket egymás után.
• Rajzolás: Az `e.Graphics.DrawString()` metódust használva rajzoljuk ki az egyes szövegrészeket. A kiemelt részhez egy `Color.Red` ecsetet használunk.
• Fókusztéglalap: Az `e.DrawFocusRectangle()` meghívása biztosítja, hogy a billentyűzettel navigált elem körül megjelenjen a fókusz téglalap, ami fontos az akadálymentesítés szempontjából.

Ez a módszer rendkívül rugalmas. Nem csupán egy szót emelhetünk ki, hanem akár többet is, különböző színekkel. A logika kiterjeszthető, hogy reguláris kifejezésekkel keressünk mintákat, vagy több feltétel alapján formázzunk.

Fejlesztői vélemény 🚀

Mint fejlesztő, aki már számos Windows Forms alkalmazáson dolgozott, sokszor szembesültem azzal a dilemmával, hogy egy ListBox „kevés”, de egy RichTextBox „túl sok”.

„Egy korábbi, valós idejű szerver log elemző projektemben alapvető fontosságú volt a ListBoxban megjelenített log bejegyzések vizuális rendszerezése. A kritikus hibák piros, a figyelmeztetések narancssárga, az információk szürke színnel történő megjelenítése nélkülözhetetlen volt a gyors diagnózishoz. A RichTextBox használata azzal járt volna, hogy több ezer, néha több tízezer log bejegyzés esetén jelentősen lassabbá és memóriazabálóbbá vált volna az alkalmazás. Az OwnerDraw technika viszont lehetővé tette számunkra, hogy ugyanazt a vizuális élményt nyújtsuk, miközben a memóriahasználatot és a renderelési időt a minimálisra csökkentettük. Ez egy olyan rejtett gyöngyszem, amit minden C# WinForms fejlesztőnek ismernie kellene.”

Ez a tapasztalat is alátámasztja, hogy nem mindig a legkomplexebb eszköz a legjobb választás. Sokszor a beépített, kevésbé ismert funkciók kínálják a leghatékonyabb megoldást, ha pontosan tudjuk, mire van szükségünk. Az OwnerDraw módszer pontosan ilyen: egy kifinomult, de mégis egyszerű út a ListBoxok vizuális testreszabásához.

További tippek és finomítások 🤔

• Több szó kiemelése: Ha több kulcsszót szeretnénk kiemelni, ismételjük meg a keresést és a rajzolási logikát az `itemText` maradék részén. Egy `List>` segítségével tárolhatjuk a kiemelendő részek kezdőpozícióját, hosszát és színét, majd egy ciklussal végigrajzolhatjuk őket.
• Betűtípus változtatása: Nem csak a színt, hanem a betűtípust is megváltoztathatjuk. Például a `new Font(e.Font, FontStyle.Bold)` segítségével félkövérré tehetjük a kiemelt szót.
• OwnerDrawVariable és MeasureItem: Ha az elemek magassága változó, ne felejtsük el beállítani a `DrawMode` tulajdonságot `OwnerDrawVariable` értékre, és implementálni a `MeasureItem` eseményt. Itt adhatjuk meg az `e.ItemHeight` értékét a megfelelő számítás után.

private void myListBox_MeasureItem(object sender, MeasureItemEventArgs e)
{
    // Itt számolhatjuk ki az elem magasságát a szöveg alapján
    // Például:
    // string itemText = myListBox.Items[e.Index].ToString();
    // SizeF stringSize = e.Graphics.MeasureString(itemText, myListBox.Font, myListBox.Width);
    // e.ItemHeight = (int)stringSize.Height + 2; // +2 pixel padding
}
    

• Optimalizáció: Nagyon hosszú listák esetén érdemes optimalizálni a string műveleteket és a `MeasureString` hívásokat, esetleg cache-elni bizonyos eredményeket. Ugyanakkor a Windows Forms GUI-elemek a háttérben már sok optimalizációt elvégeznek, így a legtöbb esetben ez nem jelent problémát.
• Akadálymentesítés: Ügyeljünk a megfelelő kontrasztra a háttér és a szöveg színe között, különösen a kiemelt szavaknál. Ez nem csak a vizuális élményt javítja, hanem az akadálymentesítési elvárásoknak is megfelel.

Összefoglalás és végszó ✅

Ahogy láthatjuk, egy egyszerű C# ListBox korántsem olyan korlátozott, mint amilyennek elsőre tűnik. Az OwnerDraw technika megnyitja az utat a vizuális testreszabás előtt, lehetővé téve, hogy olyan finom részleteket is kezeljünk, mint egy adott szó átszínezése vagy kiemelése. Ez a módszer nemcsak egyszerűbb és hatékonyabb lehet, mint a bonyolultabb komponensek használata hasonló feladatokra, hanem a ListBox könnyűsúlyú természetét is megőrzi. A fejlesztés során gyakran érdemes mélyebben beleásni magunkat a beépített vezérlők képességeibe, mielőtt azonnal bonyolultabb alternatívákhoz nyúlnánk. A ListBox OwnerDraw módja egy remek példa arra, hogyan lehet kreatívan és erőforrás-takarékosan megoldani összetett UI kihívásokat. Ne féljünk kísérletezni, és fedezzük fel a .NET keretrendszer rejtett lehetőségeit! 🚀