 |
Desktop Development »
Miscellaneous »
General
Intermediate
License: The Code Project Open License (CPOL)
"Skinned" UI control library (VC++)By bigb_602This article demonstrates how to leverage the power of images and inheritance to achieve a "skinned" look for your Windows applications |
VC6Win2K, WinXP, MFC, GDI, Dev
|
||||||||||
|
Advanced Search Add to IE Search |
|
|
|
||||||||||||||||
The library promises to achieve (with minor modifications - to make it very generic) a non-windows UI look-n-feel for those who want to develop a customized UI (curves et al), by leveraging the power of images, GDI, composition, and multiple inheritance.
Few years back, when I first saw the cool skins on Winamp (MP3 player), I felt excited and challenged to write a library to use in all my future developments that would shock people with belief that slick UI is only feasible in web applications and Flash applications!
The library is composed of following classes:
The idea was to store as much common functionalities as possible in one class (CSkinControl) and then consume the same, through inheritance, in concrete control classes. The base class holds references to 4 different images (ids), one for normal state, one for disabled state, one for hover state, and one for pressed state. The function that stores the same is SetImageResources(normal, hover, pressed, disabled). The base class also contains functionality for:
SetCoordinates(left, top)
SetDimensions(width, height)
GetLeft()
GetTop()
GetWidth()
GetHeight()
GetCurrentBackgroundColor()
GetTextColor()
GetBackgroundColor(state)
SetBackgroundColor(state, color)
SetForegroundColor(color)
SetTextColor(color)
SetFontName(name)
SetFontStyle(style)
SetFontSize(size)
GetFontName()
GetFontStyle()
GetFontSize()
Most important is UpdateMemoryDC() which takes care of drawing and updating the visual of each control on screen, whether in default state or triggered by some user-action (mouse events).
// This function attempts to load image resources from a DLL and renders the same on the screen int CSkinControl::UpdateMemoryDC() { HBITMAP hBitmap = NULL; BITMAP bmpTemp; // If gifs are the preferred resources, use conversion #ifdef USE_GIF_IMAGES hBitmap = LoadGIF(GetDllInstance((LPCTSTR)m_csDLLFileName),MAKEINTRESOURCE(GetID())); #else hBitmap = LoadBitmap(GetDllInstance((LPTSTR)(LPCTSTR)m_csDLLFileName), MAKEINTRESOURCE(GetID())); #endif if(hBitmap != NULL) { ::GetObject(hBitmap, sizeof(BITMAP), &bmpTemp); m_lImageWidth = bmpTemp.bmWidth; m_lImageHeight = bmpTemp.bmHeight; ::SelectObject(m_dcMemory.GetSafeHdc(),hBitmap); } // If the object is of text type (edit) else if(m_nPressedID == -1 && m_nUnPressedID == -1 && m_nHoverID == -1) { m_dcMemory.SetTextColor(m_crTextColor); m_dcMemory.DrawText(m_csText, CRect(0, 0, m_nWidth, m_nHeight), DT_CENTER); } return 0; }
Concrete classes provide functionalities that are required by their standard counterparts. For example, CSkinnedEdit supports text selection, insertion, deletion (no copy-paste implemented - sorry!!), and other customized features like "read-only", "decimal point validation", etc. Similarly, CSkinnedScrollBar provides functionality to set minimum range, maximum range, retrieve position of scroll bar button, and so on. The code and function names are quite self-explanatory. I apologize for not providing many inline code comments, for which you can always contact me.
All the controls are created dynamically. Each one of them has a function CreateSkinControl(name, rect, parent, id, flags) that takes parameters as mentioned. The last one (flags) is an interesting parameter that holds any "extra" information required (as you'll see in different controls) for creation. As an example, mentioned below is the creation code for CSkinnedButton control.
BOOL CSkinnedButton::CreateSkinControl(LPCTSTR lpszWindowName, LPRECT lpRect, CWnd *pParentWnd, UINT nControlID, long lFlags) { // Set windows name, location, size, parent, and control id m_csText = lpszWindowName; m_nLeft = lpRect->left; m_nTop = lpRect->top; m_nWidth = lpRect->right - lpRect->left; m_nHeight = lpRect->bottom - lpRect->top; m_pParentWnd = pParentWnd; m_nControlID = nControlID; // Assign a default font and defaut colors m_csFontName = "Arial"; m_nFontSize = 16; m_nFontStyle = FONT_NORMAL; m_crBackgroundColorHover = RGB(255,255,255); m_crBackgroundColorPressed = RGB(255,255,255); m_crBackgroundColorUnPressed = RGB(255,255,255); m_crForegroundColor = RGB(0,0,0); // Store special button information m_lButtonType = lFlags; // If the control is already created, return false if(m_hWnd != NULL) { return FALSE; } // Create the control using CWnd::Create() and bring it to the top // Notice the flag WS_CLIPSIBLINGS; this is necessary for proper rendering of composite controls if(CWnd::Create(NULL, m_csText, WS_CHILD|WS_VISIBLE|WS_CLIPSIBLINGS, *lpRect, pParentWnd, nControlID, NULL)) { CWnd::BringWindowToTop(); return TRUE; } return FALSE; }
CSkinnedButton* m_pOkButton;
OnCreate() or OnInitDialog(), insert the creation logic of the button, after few initializations of creating a memory DC for background painting.
int CMyDialog::OnCreate(LPCREATESTRUCT lpCreateStruct) { if(CDialog::OnCreate(lpCreateStruct) == -1) { return -1; } CClientDC dc(this); m_memDC.CreateCompatibleDC(&dc); m_memBmp.CreateCompatibleBitmap(&dc, 1024, 768); m_memDC.SelectObject(&m_memBmp); // Other code ... // Create button m_pOkButton = new CSkinnedButton; // Assign 4 image ids m_pOkButton.SetImageResource(ID_NORMAL, ID_HOVER, ID_PRESSED, ID_DISABLED); // This flag (true) suggests that the button is an irregular shaped, which will be drawn using a transparency algorithm to achieve the desired result m_pOkButton.SetShapedFlag(TRUE); // Other code ... }Custom code for button creation and button rendering is implemented in the CSkinnedButton class as shown:
int CSkinnedButton::OnCreate(LPCREATESTRUCT lpCreateStruct) { if (CWnd::OnCreate(lpCreateStruct) == -1) return -1; CClientDC dc(this); CBitmap bmpTemp; m_dcMemory.CreateCompatibleDC(&dc); if(bmpTemp.CreateCompatibleBitmap(&dc, m_nWidth, m_nHeight) != 0) { m_dcMemory.SelectObject(&bmpTemp); if(PrepareFont()) { } UpdateMemoryDC(); // Create region if irregular shaped if(m_bShape) { m_hRgn = CreateRectRgn(0,0,0,0); if(m_hRgn != NULL) { if(GetWindowRgn(m_hRgn) == ERROR) { m_hRgn = NULL; return -1; } } else { return -1; } } } return 0; } int CSkinnedButton::UpdateMemoryDC() { BITMAP bmpTemp; memset(&bmpTemp, 0, sizeof(BITMAP)); if(m_dcMemory == NULL) { return -1; } #ifdef USE_GIF_IMAGES if(m_hBitmap != NULL && m_hBitmap == GetCurrentStateBitmap()) { return -1; } m_hBitmap = GetCurrentStateBitmap(); #else hBitmap = GetCurrentStateBitmap(); #endif if(m_hBitmap != NULL) { ::GetObject(m_hBitmap, sizeof(BITMAP), &bmpTemp); m_lImageWidth = bmpTemp.bmWidth; m_lImageHeight = bmpTemp.bmHeight; ::SelectObject(m_dcMemory.GetSafeHdc(),m_hBitmap); } else if(m_nPressedID == -1 && m_nUnPressedID == -1 && m_nHoverID == -1) { CClientDC dc(this); m_dcMemory.SetMapMode(dc.GetMapMode()); m_dcMemory.SetWindowExt(dc.GetWindowExt()); m_dcMemory.SetViewportExt(dc.GetViewportExt()); m_dcMemory.SetWindowOrg(0, 0); CBitmap cbmpTemp; cbmpTemp.CreateCompatibleBitmap(&dc, m_nWidth, m_nHeight); if(m_dcMemory.SelectObject(&cbmpTemp) != NULL) { m_dcMemory.FillSolidRect(0, 0, m_nWidth, m_nHeight, GetCurrentBackgroundColor()); } } // This is most important section of code for irregular shapes if(m_bShape != -1 && m_bFindEdges) { m_bFindEdges = FALSE; FindControlEdge(this, &m_dcMemory, COLOR_MAGENTA, m_hRgnWindow); } return 0; }
FindControlEdge() (not a very intuitive name!) implements the transparency algorithm, using a Magenta color mask, traversing through the image, and cutting out a region. You might argue that why not use the GDI function TransparentBlt() to achieve the same. Good point! However, when I tried to implement using TransparentBlt it failed to run in Windows 98 SE (although MS claims to have supported in that version of Windows!). Anyways, may be I didnt have the correct patch of Windows or SDK at the time. I decided to write my own. You have a choice of using TransparentBlt which would promise an optimized performance over my technique for sure ;)
Also, my technique introduces a strick requirement of having all images bounded by a 4 pixel magenta background!!!!!!!
Example:
For those who might face a similar problem of TransparentBlt() are free to use the algorithm placed here or of your own.
News 
Joke 
Rant 
Admin