Technique to Create Dialogs from Images


Click here for larger image

This article describes a technique for creating dialogs with any form you want for them.

In order to define the form of the dialog you only have to create a bitmap with your usual graphics programm (say Photoshop or Microsoft Paint,...). In this bitmap you have to paint the form of your dialog using as many colors as you want (it can be RGB or paletted!), but remembering to choose one color to be interpreted as the only transparent (or only opaque) color. It can be any color you want, but you have to know its RGB-components, because they will be one of the parameters to pass to the BitmapRegion() function, that makes all the hard work for you! The other arguments of this function are the bitmap handle, and a boolean argument which tells the function to consider the passed color as transparent or opaque! What this function returns is a handle to a region object "hRegion", which can, and should, be passed to the member function of CWnd: SetWindowRgn(hRegion), in order to complete the definition of the form of the dialog.

Here are some samples of the use of this funtion:

Sample 1

// hBitmap is the handle to the loaded bitmap
// Here, the transapatent color is black. All other colors 
// in the bitmap will be considered opaque
hRegion=BitmapRegion(hBitmap,RGB(0,0,0));

if(hRegion) 
 SetWindowRgn(hRegion,TRUE); // TRUE=repaint the window! 

Sample 2:

// hBitmap is the handle to the loaded bitmap
// Here, the opaque color is yellow. All other colors in 
// the bitmap will be considered transparent 
// The last argument tells the function to interpret the 
// passed color as opaque. If this argument is not present, 
// the color is the trasnparent color!
hRegion=BitmapRegion(hBitmap,RGB(255,255,0),FALSE);

if(hRegion) 
 SetWindowRgn(hRegion,TRUE); // TRUE=repaint the window! 

This technique provides two ways of using the mentioned function.

One way is to use it for defining the clipping region for the dialog, as explained in the previous code. This function should be called from the OnCreate() message handler of the dialog, where the bitmap has to be loaded (further explanation below!).


Click here for larger image

WITHOUT

With this option the background of the dialog has the plain color of all the dialogs in the system. That is, the dialog has a special boundary-form, but it has the same color and appearance as all standard dialogs. You can place the controls with the Ressource Editor and work with them exactly like you would do with a normal dialog. You only have to pay attention to the position of the controls, because they have to be placed on the opaque areas of the bitmap in order to be visible!

The other way to use this technique is to get a completely owner drawn dialog. Not only the boundaries of the dialog are computed from the bitmap, but also the background image of the dialog! These option needs a bit more code to get done, but it isn't complicated and the effect is really cool (you can use this for the About... dialog of your application!)


Click here for larger image

WITH

With this option the background is filled with the bitmap. The controls (if you put some on the dialog) are drawn over the bitmap, so if you want them not to appear, put them on transparent areas of the dialog, or simply put them away! In the sample project, I use this option with a dialog in which I let no control be shown (in fact there remains only an "Ok" button!) and therefor I have to be able to close the dialog in another manner. The solution is to catch the clicking of the user over a special area of the bitmap. I painted a yellow cross on the bitmap and annotated the coordinates in pixels of the bounding rectangle of the cross. When the user clicks within this area, the dialog is closed with EndDialog(). In order to get the coordinates of the pointer in comparison with those of the mentiones area, the dialog has to have no caption- or title-bar, and it has to have no border! (study the sample project for a closer explanation.)

Another feature implemented in this sample project for the dialog with the bitmap painted on the background, is that the user can dragg the dialog clicking anywhere on it (except on the yellow-cross which closes the dialog!). In order to achieve this effect, You have to override the OnNCHitText() message handler of the dialog and return HTCAPTION everytime the user doesn't click on the yellow-cross. In this case you return HTCLIENT, in order to let the system send the WM_LBUTTONDOWN message to the dialog!

In either case (you want your bitmap to be painted on the background or not) you have to insert the following line in the .cpp file of your dialog implementation:

#include "AnyForm.h"

You have to include the files AnyForm.h and Anyorm.cpp in your project, in order to get things working!

Explanation 1: The bitmap is used only to compute the clipping region of the dialog

This option is shown in the previous photo called "Without".

In this case the code is rather simple. You have to override the OnCreate() message handler of the dialog, and insert a few lines of code, in order to obtain something like this:

int CMyDlgWithout::OnCreate(LPCREATESTRUCT lpCreateStruct)
{
 if (CDialog::OnCreate(lpCreateStruct) == -1)
  return -1;

 // In this case, we don't need to store the loaded bitmap 
 // for later use, because we don't put it on the background. 
 // We use it only to compute the clipping region and after 
 // the region is set on the window, we can free the loaded 
 // bitmap. That's the reason whiy in this case there is no 
 // need of member varibles, memory contexts,...

 HBITMAP hBmp;
 HRGN	hRegion;

 // The name of the bitmap to load (if not in the same 
 // directory as the application, provide full path!)
 // If the bitmap is to be load from the ressources, the name 
 // stands for the ressource-string identification
 char	*name="BitmapWithout.bmp";

 // If you want to load the bitmap from file 
 hBmp=(HBITMAP)LoadImage(lpCreateStruct->hInstance,
                         name,
                         IMAGE_BITMAP,
                         0,
                         0,
                         LR_LOADFROMFILE 
                         | LR_CREATEDIBSECTION);

 // If you want to load the bitmap from the resources 
 // Uncomment the next line, and comment the previous 
 // "LoadImage()" line!
 // hImage=(HBITMAP) LoadImage(lpCreateStruct->hInstance,
                               name,
                               IMAGE_BITMAP,
                               0,
                               0,
                               LR_LOADFROMFILE 
                               | LR_CREATEDIBSECTION);
	
 // Let's make this function do the hard work. You pass it 
 // the handle of the bitmap, the color in the bitmap to be 
 // transparent, and a third boolean parameter that tells 
 // the function whether the passed color is to be 
 // interpreted as the transparent color or as the opaque 
 // color. 
 //
 // A sample where the red color is interpreted as the 
 // opaque color...
 //
 // hRegion=BitmapRgn(hBmp,0x00FF0000,RGB(255,0,0),FALSE);
 // In this sample, the transparent color is black!
 hRegion=BitmapRegion(hBmp,RGB(0,0,0));

 // If there was no problem getting the region, we make 
 // it the current clipping region of the dialog's window
 if(hRegion) 
  SetWindowRgn(hRegion,TRUE);		

 // After this, because in this case we don't need to store 
 // the bitmap anymore, we can free the ressources used by 
 // it. We also don't need here to select the bitmap on the 
 // memory context. In fact, we don't need any memory 
 // context!!! So:

 // Delete the bitmap the we loaded at the beginning
 if(hBmp) 
  DeleteObject(hBmp);

 // And in this case, that's all folks!!!

 return 0;
}

Explanation 2: The bitmap is used to compute the clipping region of the dialog, and to be painted on the background of the dialog

This option is shown in the previous photo called "With".

This case is a little more complicated, but it can be better understood through the code of the sample project. At first, you have to insert a few member variables in the dialog-class that controls your dialog. The class definition would look similar to this:

class CMyDlgWith : public CDialog 
{
...

// Implementation
protected:
 HBITMAP    hBmp;		
 HBITMAP    hPrevBmp;	
 HDC        hMemDC;
 HRGN       hRegion;
 BITMAP     bmInfo;
...

};

You have to override the message handlers for the following messages: WM_CREATE, WM_DESTROY and WM_ERASEBKGND. The code for these functions would look like this:

int CMyDlgWith::OnCreate(LPCREATESTRUCT lpCreateStruct)
{
 if (CDialog::OnCreate(lpCreateStruct) == -1)
  return -1;
	
 // The name of the bitmap to load (if not in the same 
 // directory as the application, provide full path!)
 // If the bitmap is to be load from the ressources, 
 // the name stands for the ressource-string identification
 char	*name="BitmapWith.bmp";

 // If you want to load the bitmap from file 
 hBmp=(HBITMAP)LoadImage(lpCreateStruct->hInstance,
                         name,
                         IMAGE_BITMAP,
                         0,
                         0,
                         LR_LOADFROMFILE 
                         | LR_CREATEDIBSECTION);

 // If you want to load the bitmap from the resources 
 // Uncomment the next line, and comment the previous 
 // "LoadImage()" line!
 // hImage=(HBITMAP)LoadImage(lpCreateStruct->hInstance,
                              name,
                              IMAGE_BITMAP,
                              0,
                              0,
                              LR_LOADFROMFILE 
                              | LR_CREATEDIBSECTION);

 // Let's make this function do the hard work. You pass it 
 // the handle of the bitmap, the color in the bitmap to be 
 // transparent, and a third boolean parameter that tells 
 // the function whether the passed color is to be 
 // interpreted as the transparent color or as the opaque 
 // color In this sample, the transparent color is black!
 hRegion=BitmapRegion(hBmp,RGB(0,0,0));

 // If there was no problem getting the region, we make it 
 // the current clipping region of the dialog's window
 if(hRegion) 
 SetWindowRgn(hRegion,TRUE);		

 // We ask the bitmap for its size...
 GetObject(hBmp,sizeof(bmInfo),&bmInfo);

 // At last, we create a display-compatible memory context!
 hMemDC=CreateCompatibleDC(NULL);

 hPrevBmp=(HBITMAP)SelectObject(hMemDC,hBmp);

 return 0;
}

void CMyDlgWith::OnDestroy()
{
 CDialog::OnDestroy();

 // Simply select the previous bitmap on the memory context...
 SelectObject(hMemDC,hPrevBmp);	

 // ... and delete the bitmap the we loaded at the beginning
 if(hBmp) 
 DeleteObject(hBmp);
}

BOOL CMyDlgWith::OnEraseBkgnd(CDC* pDC)
{
 // If you only want a dialog with a special border-form, 
 // but you don't want a bitmap to be drawn on its background 
 // surface, then comment the next two lines, and uncomment 
 // the last line in this function!
 BitBlt(pDC->m_hDC,
        0, 0,
        bmInfo.bmWidth,
        bmInfo.bmHeight,
        hMemDC,
        0, 0,
        SRCCOPY);
 return FALSE;

 // return CDialog::OnEraseBkgnd(pDC);
}

The last thing to do, is to provide the dialog a way to get closed by the user. As I mentioned before, the best thing is to draw a special figure anywhere on the bitmap and to catch the clicking of the mouse in this area, by catching the WM_LBUTTONDOWN message of the dialog. Another feature can be easily implemented: permit 'click and drag' the dialog clicking anywhere on it! This can be achieved by catching the WM_NCHITTEST message. The following code shows how this is implemented:

void CMyDlgWith::OnLButtonDown(UINT nFlags, CPoint point)
{
 // If the user clicks on the 'x'-mark we close the dialog!
 // The coordinates of the rectangle around the 'x'-mark 
 // are in pixels and client-coordinates! 
 // That's the reason why the dialog ressource has to have 
 // no border and no caption bar.
 if(point.x>333 && point.x<354 && point.y>54 && point.y<77)
  EndDialog(0);
	
 CDialog::OnLButtonDown(nFlags, point);
}

UINT CMyDlgWith::OnNcHitTest(CPoint point) 
{
 ScreenToClient(&point);

 // Because "point" is passed in screen coordinates 
 // (Windows knows why?!) we have to convert it to client 
 // coordinates, in order to compare it with the bounding 
 // rectangle around the 'x'-mark. If the point lies within, 
 // then we return a hit on a control or some other client 
 // area (so that the OnLButtonDown-message can be sent, and
 // afterwards close the dialog!), but in all other cases, 
 // we return the information as if the user always would 
 // have clicked on the caption bar. These permitts the user 
 // to drag and move the dialog clicking anywhere on it 
 // expect the rectangle we considere here!
 if(point.x>333 && point.x<354 && point.y>54 && point.y<77)
  return HTCLIENT;
 else
  return HTCAPTION;
}

Demo project The demo project shows the two ways of using this technique. The source code has comments in order to get better explained.

Source code The source code comprises only the two following files, that you have to include in your project: AnyForm.h and AnyForm.cpp.

Downloads

Download source - 4 Kb
Download demo project - 115 Kb


Comments

  • Are the beats by dre outcast either not absolutely aces of monster beats

    Posted by motherdhmm on 06/04/2013 08:30pm

    [url=http://www.headphonescheaponlineaustralia.com/beats-pro-c-66_68_75.html]beats Pro[/url] With tuneful capabilities snowball, the headphones are increasingly expensive blue blood requirements. Which called in the course of clear astute quality, and graceful guts a everything required. Occult sound of the headphones is a uncommonly eminent brand. All the requirements of the music, virtually no story does not know. dr dre beats, also known as Deformity, chain (Troll Mailgram) is the world¡¯s initially audio-visual outfit to stick the development of high-energy brand. Headphone is not a magic gazabo¡¯s voice can be turned into a bride¡¯s voice, the elderly cover shackles into a woman¡¯s voice sound headphones, but the sound of a diabolism company produced next to the Opinion States of headphones. We catch sight of it with different headphones, Dreadfulness¡¯s products are in the long run on the side of immature fashion, design is altogether unique. Often appear in the hip-hop artists and music idols of publicity. So, in behalf of such a high-quality stereo headset hocus-pocus to how we should care? [url=http://www.headphonescheaponlineaustralia.com/beats-pro-c-66_68_75.html]beats Pro[/url] These mutation headphones ,sign you trial music the course the artist wants you to. Beats nearby dre high meaning headphones are precision-engineered to let out the full sound of today¡¯s digital music including the most sonically taxing rattle, aware hop and R&B. with advanced keynoter plan, powered amplification, and acting noise canceling, Beats delivers all the power, clarity, and impenetrable bass today¡¯s surpass artists and producers crave you to listen to !!! [url=http://blog.cheapbeatsbydre.co.nz/]beats by dre[/url] These Beats Headphones furnish great morality skilfulness that any at one, from the unexceptional joe, to your kinfe like audiophile can certainly value. It includes crystal quit, distortions let go temporize, even with high in bulk levels. Dre is currently in there. Any one searching quest of a edible distinction bunch of beers is effectively supported absolutely by way of most of these earphones. Oblation an staggering array as extravagantly as grandeur of give one the impression, Defeats through totally Beats before Dr Dre would be the Wireless Bluetooth headphones you give birth to been holding into the open regarding. Use them all evening without the poverty of distressing with regards to battery or plenty and ease. Turn effortlessly in between phone calls as spectacularly as playing as a consequence of your built-inside microphone along with headphone adjustments.

    Reply
  • fzbawslq

    Posted by bwaeaemv on 04/22/2013 10:26pm

    xynlhzio http://oakleysunglassesaustraliao.co.uk/ lqobzikp http://casquebeatspascherq.fr/ fkfjyuxg http://louisvuittonwalletet.com/ zryderrn http://hollisteroutletlet.co.uk/ dlpeehhs http://todsbagndrivingshoese.com/ vpthzzuq oakley sunglasses australia mntiuhih casque beats pas cher wxkxqywm louis vuitton wallet gjksskyx hollister outlet tygntfqe tods bag They are surely fighters. In that case and only then an alcohol consumption. Ak Halibut Do some fishing Trips- A much more Exigent Hook

    Reply
  • otqpcokt

    Posted by lxezzngp on 04/22/2013 09:59pm

    fxsuboia http://offrlouisvuittonhandbagsget.com/ oztqwxrz http://freeralphlaurenpaschershippz.fr/ hgpoobwf http://louisvuittonshoesnoww.com/ uzntrhmg http://chanelbagsbuyit.com/ ifpcdhvj http://truereligiongetitnow.co.uk/ shjndtix louis vuitton handbags ckkomgor ralph lauren pas cher cpanstua louis vuitton shoes wpbpneya chanel bags jfxyolzq true religion Vehicle Accidents and even Destroyed Lives Subsequent to a direct impact, you will probably think a myriad of inner thoughts. But the truth is can't help to make presumptions of this nature in advance of passing over ones own car keys.

    Reply
  • mygyanhq

    Posted by efmbtzyd on 04/21/2013 07:48am

    qqtuzskc http://louisvuittontascheoffz.de/ rtegbcqi http://ofrzabercrombieandfitchoutlet.co.uk/ ykybgjoq http://louisvuittongeldborsejetztt.de/ poayylqe http://hollisterukitsale.co.uk/ wywsntfv http://nowthomassabocharmscheapzaus.com/ opnstyjt louis vuitton schal yzcnpnyc abercrombie and fitch outlet xiyjvagz louis vuitton geldbörse bomavsot hollister uk sgzlwltu thomas sabo charms It is actually imagined that will gentlemen implemented a banyan design out of Local and even Asiatische encouraged fashion (Banyan on Portugese, Persia and even Gujarati virtually all this means 'merchant'). The actual reflectivity prerequisites usually are at the very least 201 square in . connected with reflective video tape, or maybe 8. Which is also the exploding market of coloration, seeing that is certainly typical on the warm the seasons.

    Reply
  • gxdzzmik

    Posted by jtjjmowg on 04/21/2013 06:15am

    bhuytjqs http://louisvuittonoutletjetztoffz.de/ dvgvwdyq http://abercrombieandfitchoutlettz.co.uk/ gjpdudpb http://louisvuittonhandtaschenoffz.de/ wymhixrk http://getithollisteruk.co.uk/ lrftzkkx http://thomassabocharmsbuyitaus.com/ vughexvm louis vuitton outlet kxulporb abercrombie and fitch outlet hpzqddfu louis vuitton schuhe gstrikxd hollister uk iovwjxxu thomas sabo charms Weight deprivation internet websites these days are selecting do-it-yourself colon cleaning details to be able to supporter their particular loose weight programs, professing who cleansing the colon is right now regarded as being the best methods for shedding pounds. Fill all of those other marinade over the various meats. The feels to date due to take at this moment, the majority could board and batten your head.

    Reply
  • vypxbmub

    Posted by cvyniaqq on 04/21/2013 04:27am

    zjefemvj http://oakleysunglassesaustraliao.co.uk/ wvmylyul http://casquebeatspascherq.fr/ oxqvmqox http://louisvuittonwalletet.com/ smhchqjd http://hollisteroutletlet.co.uk/ lrbvquyu http://todsbagndrivingshoese.com/ ijdwdjzn oakley sunglasses australia cypsypjy casque beats pas cher xosrfjlx louis vuitton wallet kqvrcgyr hollister outlet ynsyuklr tods shoes sale There is a number of fuss for the African Mango as it can be promoted to be the most impressive diet supplement although what on earth is the best truth of the matter? Is it definitely productive in cutting down body weight and also not? Its also wise to enjoy at a minimum eight glasses of the water day-to-day in your capsules. Dishes places are very important holdings and liabilities residential.

    Reply
  • nvaoipnn

    Posted by rrravgyz on 04/19/2013 05:12am

    vifdeqyu http://monsterbeatshotoffz.fr/ utcgdrly http://chaneloutlethotsalz.com/ vgcfxqnp http://buynowhollisteroutletz.co.uk/ gyjmchqg http://nowralphlaurenpaschersalz.fr/ zzwnsstu http://hotofflouisvuittonhandbags.com/ nzksbsxo monster beats opwahxmz chanel outlet zmogllkk hollister outlet lrnmxeqd ralph lauren pas cher hhvojmrm louis vuitton handbags * Antenna to seize satellite tv information : positioned to buy a very clear enjoy of the night. Any time you neglect to have sufficient motor insurance Nj you would face really serious punishments and fines including licence suspension, number suspension, penalties, passes, and also prison occasion. Why's this particular which means? Insurance organisations declare that statistics demonstrate to the summary may be a superb possibility.

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • On-demand Event Event Date: September 10, 2014 Modern mobile applications connect systems-of-engagement (mobile apps) with systems-of-record (traditional IT) to deliver new and innovative business value. But the lifecycle for development of mobile apps is also new and different. Emerging trends in mobile development call for faster delivery of incremental features, coupled with feedback from the users of the app "in the wild." This loop of continuous delivery and continuous feedback is how the best mobile …

  • Webinar on September 23, 2014, 2 p.m. ET / 11 a.m. PT Mobile commerce presents an array of opportunities for any business -- from connecting with your customers through mobile apps to enriching operations with mobile enterprise solutions. Join guest speaker, Michael Facemire, Forrester Research, Inc. Principal Analyst, as he discusses the new demands of mobile engagement and how application program interfaces (APIs) play a crucial role. Check out this upcoming webinar to learn about the new set of …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds