Vyšperkujte si okénko.. - Builder.cz - Informacni server o programovani

2. října 2000, 00.00 | Tip pro Visual Basic. Umožněte uživatelům svých programů nastavit si vlastní design!

Jistě jste se již setkali s WinAMPem a líbila se Vám jeho možnost používat tzv. Skins ( uživatelsky příjemné okno s možností udělat si svůj vlastní design ). V tomto článku Vám ukáži, jak jednoduše a rychle vyšperkovat Váš prográmek o tuto možnost, aby si jeho uživatelé mohli dělat vlastní designy...

Zde je několik kroků, jak nato:

1. Základ.
   
   v nějakém editoru si nejprve rozvrhněte, jak bude okno vypadat. Kde budou jaké prvky, jak budou velké atd.
   
   
   


2. Návrh.
   
   Pak si nakreslíme, jak okno bude vypadat reálně. Je důležité dodržet všechny rozměry!!!
   
   
   


3. Šablona.
   
   Poté všechny prvky rozvrhneme na obrázek, aby s nimy šlo jednoduše pracovat.
   
   
   
   Je třeba si všechny prvky správně rozvrhnout a zapsat jejich pozice, aby se s dále dalo jednodušji a rychleji pracovat. Takovýto obrázek uložíme do souboru (nejlépe jako Bitmapu - *.BMP)
   


4. Práce ve Visual Basicu.
   
   Otevřeme si nový Projekt. Vložíme takový počet PictureBoxu jako je ovládacích prvku + jeden, který bude obsahovat předlohu (tudíž jich dle obrázku bude 6). Povrch Formu do toho nepočítám, jelikož se bude kreslit přímo na něj.
   
   Form – nastavíme        AutoRedraw = True
                                       BorderStyle = None
                                       Caption = ”co chceme”
                                       ShowInTaskbar = True
                                       ScaleMode = Pixel
   
   PictureBox                  Name = co potřebujeme
                                       Appearance = Flat
                                       BorderStyle = None
                                       AutoRedraw = True
   
   PictureBox, který bude obsahovat předlohu, stejně jako ostatní + navíc
   
                                       Picture = ”cesta k jednomu z obrázků návrhu”
                                       Visible = False
                                       AutoSize = True
   


5. Rozmístění prvků
   
   Uděláme si funkci, která rozmístí prvky na své místo, nastaví jejich velikost + pozadí. Pozadí se bude kopírovat z PictureBoxu, který obsahuje šablonu pomocí API funkce BitBlt, která překopíruje určenou část obrázku na druhý (podobně jako PaintPicture, ale rychleji)
   
   Část kódu:

   With picOK
      .Width = 71
      .Height = 30
      .Top = 161
      .Left = 220 
   
      BitBlt .hDC, 0, 0, .ScaleWidth, .ScaleHeight, picSkin.hDC, 
             104, 257, SRCCOPY
      .Refresh
   End With

   takto je třeba nastavit všechny PictureBoxy i Form



6. Tlačítka...
   
   Aby tlačítka při stisknutí vytvořila efekt stlačení, je třeba přidat kousek kódu na události MouseUp a MouseDown, který vždy změní obrázek.

   Private Sub picOK_MouseDown(Button As Integer, Shift As Integer,
                               x As Single, y As Single)
       
      With picOK
         BitBlt .hDC, 0, 0, .ScaleWidth, .ScaleHeight, picSkin.hDC,
                      104, 226, SRCCOPY
         .Refresh
      End With
   End Sub
   
   Private Sub picOK_MouseUp(Button As Integer, Shift As Integer,
                             x As Single, y As Single)
       
      With picOK
         BitBlt .hDC, 0, 0, .ScaleWidth, .ScaleHeight, picSkin.hDC,
                      104, 257, SRCCOPY
         .Refresh
      End With
   End Sub

   tak a máme to.
   


7. Pohybování oknem...
   
   Trochu přelstíme Windowsy, aby si myslely, že uživatel stiskl tlačítko na Caption pruhu. Pokud uživatel stiskne talčítko na PictureBoxu s Caption, začne se Form chovat, jako by uživatel stiskl tlačítko na Caption pruhu. (je třeba deklarovat funkce a konstanty, toto nejsou funkce VB)
   

   Private Sub picCaption_MouseDown(Button As Integer, Shift As Integer,
                        x As Single, y As Single)
   
      If Button = vbLeftButton Then
   
         Call ReleaseCapture
         Call SendMessage(Me.hwnd, WM_NCLBUTTONDOWN, HTCAPTION, ByVal 0&)
      End If
   End Sub



8. Další ovládací prvky...
   
   V příklade, který si mužete stáhnout zde, najdete i prvek OptionButton. Ten je opět se jedná o PictureBox, jehož rešení je velice jednoduché. Vytvoří se PictureBox(0.. kolik jich bude) a pokud na nej uživatel kliknul, tak se změní obrázek.
   
   Takto mužete vytvářet další a další typy svých ovládacích prvku.
   


9. Konec !!!
   
   
   
   Ted již záleží na Vaší fantazii, jaké si Vy a uživatelé Vašich programů budete vyrábět skinsy. Tento příklad může posloužit i jako jednoduchá předloha k aplikacím, které budou využívat Váš speciální interface (viz. programy z dílny Kaise Krausse... Bryce, Kai’s PowerTools, PhotoGoo...)
   
   Doufám, že Vás příspěvek inspiroval k tvorbě pritažlivejších uživatelských prostředí, než jakým disponují Windows... Zde si stáhněte příklad (cca 190kb)!!!