A cool skin GUI with shadow border

• Download source code - 2.73 MB
• Download demo - 3.02 MB

Introduction

This is a code to program a great GUI. We can load an image to a combobox, button, or a dialog. It uses the CxImage library to load an image, so it can support all formats of images.

In this code, we also use a shadow border for the dialog, which I got from here. You can also make a special effect on the dialog when it is displayed, which I got from here.

Using the code

How to display a background image on a dialog

First, include FXDialog.h/.cpp. Then, create a dialog like CFXGUIDlg and inherit CFXDialog. You must go to the resource of the dialog, and set the properties of the dialog: border = none, so this dialog will be removed the title bar, and you must implement a code to do this; see Move dialog by mouse.

Add code as below:

OnInitDialog 
{
    ....

    SetImage(PATH_IMAGE_GALLERY_MEDIA_MAIN_BG); // Set background image
    SetSizeFollowImage(this); // Update size

    ...
}

BOOL CFXGUIDlg::OnEraseBkgnd(CDC* pDC)
{
    CFXDialog::OnEraseBkgnd(pDC);
    return TRUE;          
}

To create a dialog of any shape, set the region of dialog as below. You must create a template image which has two colors, like black and white (black color is a transparent part of the dialog, the white color the visible part of the dialog). This SetRgn function will make this transparent dialog at an area with the back color of the template image. You need to include the region.hpp/.cpp files. The BitmapToRegion function will be based on a template image to create any region for the dialog.

OnInitDialog 
{
    ...
    SetRgn(PATH_IMAGE_GALLERY_MEDIA_MAIN_TEMPLATE, this, false);
    // Set region of dialog 
    ...
}

To move the dialog by mouse:

#define CY_TITLEBAR 35
void CFXGUIDlg::OnLButtonDown(UINT nFlags, CPoint point) 
{
    // TODO: Add your message handler code here and/or call default
    if(point.y > CY_TITLEBAR)
        return;
    // This code to move window when press left button any where on dialog
    PostMessage(WM_NCLBUTTONDOWN, HTCAPTION, MAKELPARAM(point.x, point.y));

    CDialog::OnLButtonDown(nFlags, point);
}

Create a shadow for the dialog:

BOOL CFXGUIApp::InitInstance()
{
    ...
    CWndShadow::Initialize(AfxGetInstanceHandle());
    ...
}

OnInitDialog 
{
    ...
    CreateShadow(GetSafeHwnd());
    ...
}

void OnShowWindow(BOOL bShow, UINT nStatus) 
{
    CDialog::OnShowWindow(bShow, nStatus);
    
    // TODO: Add your message handler code here    
    static bool bFirstTime = true;
    if (bFirstTime)
    {
        bFirstTime = false;
        AnimationWindow(m_hWnd, 1200, AW_BLEND);
        UpdateShadow();        
    }
}

To use the button and combobox, we can use the FXButton and FXComboBox classes. You must go to the resources and check the style of the button to "Owner draw".

CFXGUIDlg::CFXGUIDlg(CWnd* pParent /*=NULL*/)
    : CDialog(CFXGUIDlg::IDD, pParent)
    , CFXDialog()
    , m_cBtnClose(PATH_IMAGE_GALLERY_MEDIA_BTN_CLOSE, 
                  PATH_IMAGE_GALLERY_MEDIA_BTN_CLOSE_OVER)
    , m_cBtnBrowser(PATH_IMAGE_GALLERY_MEDIA_BTN_BROWSER_NORMAL, 
                    PATH_IMAGE_GALLERY_MEDIA_BTN_BROWSER_OVER, true)
    , m_cCmbPath(PATH_IMAGE_GALLERY_MEDIA_CMB_PATH_PULL_NORMAL)
    , m_cCmbViewStype(PATH_IMAGE_GALLERY_MEDIA_CMB_PATH_PULL_NORMAL)
{
    ...
}

To use a listbox, we can use the FXListBox class, and we also use FXExplorer to imitate Windows Explorer. It is really cool to integrate this control to manage files/folders into your project.

History

• Updated CxImage 6.00.

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)