Use the free DSkinLite Library to skin your Application UI

Introduction  

DSkinLite is a powerful library to help you develop the user interface program. It uses the xml to configure the appearance of user interface, it is suitable for ui developer. Please feel free to contact us with any questions you may have. You can also discuss anything about dskinlite or report bug, or suggest new feature at the forum http://forum.uieasy.com  

Background

We have worked at UI development for several years, so we always want  a library to release us from the bored paint. We have a lot of experience of ui development in projects, so we think dskinlite is more suitable for developer. And we also use dskinlite in our project currently,  we will optimize it continually.   We also hope it will be a useful library for you. 

The key features:    

• It is a "lite" library, because it doesn't use the hook and just replace the window procedure like the SubclassWindow in MFC. So it has less influence to your application. And It will keep "lite" .    

• DSkinLite has own optimized image library to process image. And the image library is more suitable for drawing, transparent and alpha blend. At the same time, DSkinLite focus on the speed and the method of drawing, this also improves the efficiency. It also supports the png image format, you can use it make more fancy interface.  

• DSkinLite uses the xml file to define the gdi resource and describe how to skin a window, so you can construct more ui styles of control very easy. So it separates the interface from the program logic, you can change the skin of application easily. The elements in  painting are abstracted to line, text, rectangle, and image. You can use those items to"configure" a window's appearance in the xml.  

• The DSkinLite is writen by C++, and  bases on win 32 APIs, so it doesn't depend on any framework. You can use it in MFC, ATL, WTL or Win32 application conveniently. Once there is a window handle, you can use DSkinLite to skin it, even it is not a standard control.  

• The adjustment of the hue and saturation. The You can adjust the skin's color smoothly.

• Support change skin at runtime, you can also use different style to skin the control at runtime.

• Support Unicode.  

• Support the transparent control fully, it support all control include a child dialog to be transparent.

Using the code

    Using dskinlite in your application is very simple. Recommend you to read the sample code before using dskinlite in your application. The following tutorial sample is a mfc application. 

Step1: Load the .dll file.

    You can use the dskinlite dll by linking the import library, and also you can use the Win32 API LoadLibrary to load the .dll dynamically.In the following description, Use the first method to load the dll.

Step2: Include the dskinlite.h

    Suggest you to include the file dskin.h and dskindef.h in the stdafx.h, so the whole workspace can see the definition of dskinlite.

   #include "dskindll.h"
   #define DSKINDLL_API extern "C" __declspec(dllimport)
   #include "..\include\dskindll.h"
   #include "..\include\dskindef.h"

Step3: Init the dskinlite

    You can write the initial code in CxxApp::InitInstance(), and write the exit code in the CXXApp::ExitInstance().

  
      BOOL CDskinliteTestApp::InitInstance() 
       { 
          .......
          dsLoadskin(_T("skin"));
          .........
       }

      int CDskinliteTestApp::ExitInstance() 
      {
        dsExitSkin(); 
        return CWinApp::ExitInstance();
      } 

   The parameter is the skin directory , It is a relative path to the application exe module.

Step5: Write the XML file.

   You can refer to the xml file in the sample directory, or review the help document about How to Write the xml file ?

   For example:  

  
 <window name="MailButton" type="button">
    <property  bclipwindow="true" tooltips="#default"   clipcolor="RGB(255,0,255)"/>
    <buttoninfo  subtype="push" width="69" height="21"/>
    <image  state = "normal" picfile="#stardard.button.nor" />
    <image state = "over"  picfile="#stardard.button.hot"  />
    <image state = "down"  picfile="#stardard.button.down"  /> 
    <image state = "disable" picfile="#stardard.button.dis" />
    <text state="all" font="#default" horzalign="center" vertalign="" textcolor="RGB(0,0,0)"/>
  </window>         

   The label named "MailButton" describes one way to skin the control button.

Step6: Use the dskinlite to skin your window 

   You must call the function dsSkinWindow to skin your window.

  BOOL CDlgTest::OnInitDialog() 
  { 
    CDialog::OnInitDialog(); 
    dsSkinWindow( GetSafeHwnd(), SKIN_TYPE_DIALOG, NULL, TRUE);
    return TRUE; // return TRUE unless you set the focus to a control
  } 

   This program will use the default label to skin the dialog, and also enumerates the child control of the dialog, then skin the child.

  BOOL CDlgButton::OnInitDialog()
  { 
    CDialog::OnInitDialog(); 
    SET_NOSKIN( 0, GetDlgItem( IDC_BUTTON6)); 
    dsSkinWindow( GetSafeHwnd(), SKIN_TYPE_DIALOG, NULL, TRUE); 
    dsSkinWindow( GetDlgItem( IDC_BUTTON6)->GetSafeHwnd(), 
    SKIN_TYPE_BUTTON,_T("MailButton"), FALSE);
    return TRUE;
  } <a href="DSkinLite/DSkinLiteDemo.zip"></a>

   This program will skin the dialog and all of its children use the default label except the button which id is IDC_BUTTON6. The program will use the label "MailButton" to skin the button IDC_BUTTON6. 

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