Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!
Zadejte Vaši e-mailovou adresu:
Kamarád fotí rád?
Přihlas ho k odběru fotomagazínu!
Zadejte e-mailovou adresu kamaráda:
Delphi
Speciální menu
delphi_extramenu
18. května 2001, 00.00 | Chcete ve své aplikaci ve Windows vytvořit zajímavé menu s obrázkem a mnoha možnostmi? Ukážeme vám jak na to!
Znáte menu z Windows XX ? Jakby ne, vždyť jej vidíte určitě několikrát za den. Proč se ptám ? Určitě jste si všimli, že vlevo od menu je obrázek, a ikony v menu jsou větší. A právě něco takového si dnes zkusíme udělat.
Komponenta MainMenu ani PopupMenu však žádnou vlastnost LeftImage a ItemHeight nemají. Máme sice ještě jednu možnost - stáhnout si nějakou komponentu z internetu. Ovšem, to bych nemusel psát dnešní článek, a vy byste se nedpzvěděli, jakže na takové hezké menu.
Nebudu vás dlouho napínat, a prozradím vám, že komponenta MainMenu má vlastnost OwnerDraw, která určuje, jestli si budeme položky kreslit sami, nebo jestli to necháme na windows. dáme si tedy jednu komponentu na formulář a nastavíme vlastnost OwnerDraw na true. Samozřejmě ještě musíme přidat nějaké ty položky, ale to nechám již na vás. Projekt si uložte a zkuste jej spustit. Výsledek by měl vypadat nějak takto:
Položky jsou tak trochu malé. To je proto, že windows nechali na nás, ať si určíme, jak je chceme velké, a jelikož jsme si ještě nic neurčili, jsou takto malé. Tímto tedy začneme. Vybereme nějakou položku, a vytvoříme k ní proceduru OnMeasureItem. Do ní vložíme následující kód, který nastaví velikost na 30x200 pixelů:
|
Nyní tuto proceduru přiřadíme všem položkám, a můžeme projekt znovu spustit. Jak bude vypadat ukazuje následující obrázek:
Velikost tedy máme, přistoupíme k vlastnímu kreslení. To zajistí procedura OnDrawItem, kterou opět vytvoříme, a následně přiřadíme ke všem položkám.
Nejprve musíme zjistit, kterou tu položku vlastně kreslíme, a podle toho přizpůbosit text, obrázek, klávesovou zkratku atd. Definujeme si tedy pár proměnných:
|
A hned si je nastavíme:
|
Nyní již víme i vlastnosti, zbývá nám jen položku nakreslit. Kreslit budeme na povrch ACanvas, a velikost povrchu je uložena v ARect. Jelikož však je mezi jednotlivými items mezera, nejprve si ARect funkci InflateRect zvětšíme, vyplníme šedou barvou a zase zmenšíme. Potom posuneme levý okraj ARectu o 30 pixelů doprava, abychom udělali místo pro náš modrý pruh. Následovat bude kreslení pozadí, buď oranžového pokud je položka vybraná, nebo šedého, pokud ne. Jestli je vybraná poznáme podle proměnné Selected. Zde je první část procedury, která toto celé zajistí:
|
Projekt můžeme znovu spustit. Je hned hezčí:
Ovšem text se nám nějak ztratil, proto si jej nyní nakreslíme. Nejprve si nastavíme Font.Name na 'Tahoma', nebo jiný font. Pokud však nyní zkusíme použít TextOut, zjistíme, že se nám napíše text např. &Item, nebo O&tevřít. To necheme, a proto tímto řádkem odfiltrujeme z proměnné Text znak &:
|
Já jsem si však vymyslel ještě jednu specialitku, a to zcela originální zobrazování hintu (nápovědy). Pokud není položka vybraná, je vidět pouze text Text, ale pokud nad ní najedete myší, Text se posune o trochu nahoru a pod ním se objeví text z proměnné Napoveda. Jak to vypadá se můžete podívat na obrázku úplně nahoře. Další problém je klávesová zkratka, kterou máme uloženou v proměnné Zkratka. Aby byla zobrazená zarovnaná doprava, musíme nejprve zjistit šířku textu Zkratka (přes TextWidth()) a poté toto číslo odečíst od šířky položky (200). Tím získáme x-ovou pozici textu a můžeme jej vypsat. Předtím však musíme převést zkratuk na string, funkcí ShortCutToText(). Zde je výpis zobrazení textu a klávesové zkratky:
|
Po těchto úpravách bude náš projekt vypadat nějak takto (pokud nevidíte klávesovou zkratku, nebo nápovědu, je to tím, že jste si u položky nanastavili vlastnost Shortcut a Hint):
Nyní přijde na řadu náš slibovaný levý pruh, který můžete samozřejmě jednoduše nahradit za obrázek. Jeho nakreslení je opravdu jednoduché, proto snad nepotřebuje dalších komentářů:
|
Chybí nám ještě obrázky. Dáme si na formulář komponentu ImageList, které nastavíme vlastnost width a height na rozměry našich obrázků (v mém případě 24x24). Jak vydíte, nejsme zde nijak omezeni :) Dále nastavíme u jednotlivých položek vlastnost ImageIndex na index chtěného obrázku a zbývá jen následující kód:
|
Tím je menu hotové v celé jeho kráse. Nakonec můžeme přidat ještě velice jednoduché podmenu např. pro položuk E-mail, kde bude na výběr ze dvou obrázků vedle sebe. To uděláme tak, že nastavíme Break (zalomení) na bmBreak. Vytvoříme si pro ně proceduru OnMeasureItem, ve které jim nastavíme velikost 50x50 pixelů. Také proceduru OnDrawItem musíme vytvořit znovu, ale jelikož kreslíme pouze obrázek, ne žádný text, je to otázka chvilky. zde vidíte menu s celé své kráse.
A to je pro dnešek vše. Doufám, že se vám menu líbí, protože používat stále stejné je opravdu nudné, a jinak vám aplikaci nezkrášlí :)
Download
ZDE si můžete stáhnout dnes vytvořený program a jeho zdrojáky (172 kB)
Diskuse k článku
-
25. listopadu 2012
-
30. srpna 2002
-
10. října 2002
-
4. listopadu 2002
-
12. září 2002
-
25. listopadu 2012
-
28. července 1998
-
31. července 1998
-
28. srpna 1998
-
6. prosince 2000
-
27. prosince 2007
-
4. května 2007