Figure. 1 The demo dialog with HTML skin
This program demonstrates how to use
SetWindowRgn functions to give a dialog non-rectangular HTML skins. If you are familiar with HTML, it will be faster than other ways to deal with beautiful skins. The idea comes from the article, "Gimme Some Skin... VideoSkins", but I use
CDHtmlDialog instead. There was an article, "Create Skins from Ordinary Web Pages", on CodeProject from the same author, but I can not reach it now.
Hope it is useful to you. I have tested my sample under Win98/Win2000/Win2003, with IE6 SP1.
Using the code
You need to change the following items to make the dialog into your own:
- Content of the external HTML file _Html_Skin.htm.
- The GIF mask images.
- The handlers for HTML events in the file HtmlSkinDlg.cpp.
- Non-rectangular skinned dialog.
- Three skins in one external HTML page.
- Some unwanted behaviors of the browser control are banned.
- Context menu is available only in edit control.
- Text selection is available only in edit control.
- Dropping file is not available. But you can drag and drop text between edit controls.
- All the function keys F1-F12 and Escape key do not work.
- Ctrl-P for printing is banned.
- User can not press Ctrl-N to open a new browser window for the current URL.
- You will be dragging the whole window if you drag anywhere in the UI, except the scroll bar and inside edit controls.
- In Win2000, rectangular dragging outline always fits the current size of the whole window.
- In Win2000/XP/2003, with 16 bits or higher colors, window can be set transparent.
- Layout almost does not change when the system's theme is changed.
Compare between Figures 2a and 2b, Figures 3a and 3b, you can notice that the width of the scroll bar is the only minor difference of the same skin under two different themes.
Figure. 2a Luna skin, Windows classic theme.
Figure. 2b Luna skin, theme with super big font.
Figure. 3a WebFX skin, Windows classic theme.
Figure. 3b WebFX skin, theme with super big font.
- The very HTML page I use in my sample needs IE5.5+.
- The "WinClassic" skin only fits the Windows Classic theme of the system.
- Loading a HTML page with beautiful images and layout may take a long time, so maybe you can add a splash screen before your skin page is loaded. Refer to this article: CSplashScreenEx.
Points of Interest
- Dropping target can mess up the page.
In the dialog's
OnInitDialog() member, I have banned the dropping file action like this:
But when I attempt to drop a file into the dialog, the content is messed up when mouse pointer is passing across the border. I notice that the key is the margin of the HTML body. In the HTML page, the following must be added to avoid the mess:
- First entrance of
OnDocumentComplete is not for your external HTML page.
The first one is for the internal HTML page in the program resource, so you may check this as follows:
void CHtmlSkinDlg::OnDocumentComplete(LPDISPATCH , LPCTSTR szUrl)
if( sUrl != _sDestUrl )
25 Oct 2004
- [Article] Images, text and zip files are all updated.
- [Source code] Added a macro
- [Source code] Killed some defects on banning accelerators. Behavior inside edit control is normal now.
- [Source code] Used class
CLayeredWindowHelperST to make window transparent.
- [Source code] Used GIFs instead of BMPs for small size of files.
20 Oct 2004
Version 22.214.171.124, initial release.
By the way
This is my second article on CodeProject. Welcome to my page iTreeSoft.