Dialog with HTML skin using CDHtmlDialog and SetWindowRgn

Figure. 1 The demo dialog with HTML skin

Introduction

This program demonstrates how to use CDHtmlDialog and 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:

1. Content of the external HTML file _Html_Skin.htm.
2. The GIF mask images.
3. The handlers for HTML events in the file HtmlSkinDlg.cpp.

Features

1. Non-rectangular skinned dialog.
2. Three skins in one external HTML page.
3. 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.
4. You will be dragging the whole window if you drag anywhere in the UI, except the scroll bar and inside edit controls.
5. In Win2000, rectangular dragging outline always fits the current size of the whole window.
6. In Win2000/XP/2003, with 16 bits or higher colors, window can be set transparent.
7. 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.

Defects

1. The very HTML page I use in my sample needs IE5.5+.
2. The "WinClassic" skin only fits the Windows Classic theme of the system.
3. This sample supports external page only. If you want to put the HTML page and images into resource, please refer to my other article: CDHtmlDialog with CSS, JavaScript and images.
4. 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

1. Dropping target can mess up the page.

   In the dialog's OnInitDialog() member, I have banned the dropping file action like this:

   //refuse dragging file into this dialog
   m_pBrowserApp->put_RegisterAsDropTarget(VARIANT_FALSE);

   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:

   <STYLE type=text/css>
   ...
   BODY {
     ...
     MARGIN-BOTTOM: 0px;
     MARGIN-RIGHT: 0px;
     ...
   }
   ...
   </STYLE>

2. 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)
   {
     CString sUrl=szUrl;
     sUrl.MakeLower();
     if( sUrl != _sDestUrl )
     {
       //OnDocumentComplete for built-in resource or other URLs,
       //not for your external page
       //...
     }
     else
     {
       //OnDocumentComplete for your external page
       //...
     }
   }

History

25 Oct 2004

Version 1.0.0.2

• [Article] Images, text and zip files are all updated.
• [Source code] Added a macro DHTML_EVENT_TAG_ALL.
• [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 1.0.0.1, initial release.