Basic Step To Walk Into Skinned Window

Intro Hi there , I'm puppysss who surf gamedev in the internet. even though I have lacks of programming skills about many things , I must help people who suffered from searching how to skin a window for kicking stresses ! I recently started learning wxWidgets and skining project. I'll represents abstract structure with some wx's codes for people using other frameworks . Fundamental Idea All of OS uses their native gui framework . Windows have own custom-drawing method called "Theme" so you can change themes and make your look-and-feel . but each drawing method between OS is very different . Lets get a button example . Basic steps are these ... 1. Make your own button window class and get members . ( lbuttonon() , lbuttonoff() , draw() ) 2. Code members with own drawing method . ( bitmap , device context drawing ... ) 3. Handle own event function . class mybuttonclass : wxWindow { public : mybuttonclass ( wxWindow *Parent , wxString Name , wxPoint Pos , wxSize WH ) : wxWindow ( Parent , wxID_ANY , Pos , WH , wxBORDER_NONE , wxT( "" ) ) { // setting member data BorderSize = 1 ; ButtonName = Name ; LButton = 0 ; BCSrc = wxColour( 0 , 0 , 0 ) ; BCDest = wxColour( 80 , 80 , 80 ) ; BCTex = wxColour( 100 , 100 , 100 ) ; // get rect ButtonRect.x = 0 ; ButtonRect.y = 0 ; ButtonRect.width = WH.GetWidth( ) ; ButtonRect.height = WH.GetHeight( ) ; ButtonGradRect.x = BorderSize ; ButtonGradRect.y = BorderSize ; ButtonGradRect.width = ButtonRect.width - BorderSize * 2 ; ButtonGradRect.height = ButtonRect.height - BorderSize * 2 ; // setting button Connect( wxEVT_LEFT_DOWN , wxMouseEventHandler( mybuttonclass::lbuttonon ) ) ; Connect( wxEVT_LEFT_UP , wxMouseEventHandler( mybuttonclass::lbuttonoff ) ) ; Connect( wxEVT_PAINT , wxPaintEventHandler( mybuttonclass::draw ) ) ; Connect( wxEVT_ERASE_BACKGROUND , wxEraseEventHandler( mybuttonclass::erasebk ) ) ; } ~mybuttonclass ( ) { Destroy( ) ; } protected : void lbuttonon( wxMouseEvent &Event ) { // save state LButton = 1 ; // erase prior drawing Refresh( ) ; } void lbuttonoff( wxMouseEvent &Event ) { // save state LButton = 0 ; // erase prior drawing Refresh( ) ; } void draw( wxPaintEvent &Event ) { // get dc wxPaintDC DC ( this ) ; // setting mode DC.SetPen( wxPen( BCSrc , 0 , wxPENSTYLE_TRANSPARENT ) ) ; DC.SetBrush( wxBrush( BCDest , wxBRUSHSTYLE_SOLID ) ) ; DC.SetTextForeground( BCTex ) ; // drawing DC.DrawRectangle( ButtonRect ) ; // drawing state gradient if( !LButton ) DC.GradientFillLinear( ButtonGradRect , BCSrc , BCDest , wxBOTTOM ) ; // drawing text DC.DrawLabel( ButtonName , ButtonRect , wxALIGN_CENTRE ) ; } void erasebk( wxEraseEvent &Event ) { // this is for non flickering view } private : wxRect ButtonRect , ButtonGradRect ; wxString ButtonName ; wxColour BCSrc , BCDest , BCTex ; bool LButton ; int BorderSize ; } ; Most types of windows have almost same methods . so you can makes your own drawing windows even weird controller window ! some talking ... skinning solution have only one point that you have to calculate drawing methods fit your own controll . I hope this helps your projects . Conclusion Skinning window is very sick ... but I could learn how they operate more. If you avoid time consuming , I recommend some frameworks that run own drawing routine without native framework. It allows you to change basic themes to your own themes .