How to change UI in windowless framework?

Question

0.00/5 (No votes)

See more:

I tried to develop my program in windowless framework,I want to change the UI(more clearly,just like switch to the next page) when clicked a button(button is a click area),all the control based on hdc,so it is not available to switch the page like window.
Let me introduce my code.

C++

typedef void (DRAWPANEL)(HWND, HDC);
typedef int RUNFUN;
void CreatePanel(HWND h, HDC hdc, DRAWPANEL DrawFun)
        {
            HDC         hMemDC;
            HBITMAP     hBmpMem;
            HBITMAP     hPreBmp;
            RECT rc;
            GetClientRect(h, &rc);
            hMemDC = CreateCompatibleDC(hdc);

            hBmpMem = CreateCompatibleBitmap(hdc, rc.right - rc.left, rc.bottom - rc.top);

            hPreBmp = (HBITMAP)SelectObject(hMemDC, hBmpMem);
            //On hMemDC.
            DrawFun(h, hMemDC);

            BitBlt(hdc, 0, 0, rc.right - rc.left, rc.bottom - rc.top, hMemDC, 0, 0, SRCCOPY);


            SelectObject(hMemDC, hPreBmp);


            DeleteObject(hBmpMem);

            DeleteDC(hMemDC);
        }
int ClickArea(HWND hWnd, int x, int y, int sizex, int sizey, LPARAM lParam, RUNFUN function())
        {
            POINT pt;
            wchar_t txt[80];
            pt.x = LOWORD(lParam);
            pt.y = HIWORD(lParam);
            wsprintf(txt, L"x=%d;y=%d\n", LOWORD(lParam), HIWORD(lParam));
            OutputDebugString(txt);
            RECT rect;
            GetClientRect(hWnd, &rect);
            RECT  rc = { x,y,x + sizex,y + sizey };
            if (PtInRect(&rc, pt))
            {
                function();
                return -1;
            }
            return -1;
        }

void Panel1(HWND hWnd,HDC hdc)
{
    //CreateFillArea(hWnd, hdc, RGB(255, 255, 255));
    //CreateRect(hWnd, hdc, 20, 20, 100, 40, RGB(16, 141, 218));
    //CreateSimpleButton(hWnd, hdc, 20, 20, 100, 40, L"test");
}
void Panel2(HWND hWnd, HDC hdc)
{
    //CreateFillArea(hWnd, hdc, RGB(20,20,20));
    //CreateRect(hWnd, hdc, 20, 20, 100, 40, RGB(16, 141, 218));
    //CreateSimpleButton(hWnd, hdc, 20, 20, 100, 40, L"test2");
}
RUNFUN test()
{
    //MessageBox(0, L"TEST", L"TEST", 0);
    //The event of button
    return 0;
}

Finally,Draw it.

case WM_PAINT:
{
    PAINTSTRUCT ps;
    HDC hdc = BeginPaint(hWnd, &ps);
    // TODO: 在此处添加使用 hdc 的任何绘图代码...
    CreatePanel(hWnd, hdc, Panel1);
    EndPaint(hWnd, &ps);
    break;
}
case WM_LBUTTONUP:
{
    ClickArea(hWnd, 20, 20, 100, 40,lParam,test);
    break;
}

you can see "Panel2" in my code.
I just wanted to change the UI from Panel1 to Panel2 when click the button.
Images of two panels:
https://db.vertexstudio.xyz/lnk/PanelPic/1.png
https://db.vertexstudio.xyz/lnk/PanelPic/2.png

What I have tried:

I created a new function:

void SwitchPanel(DRAWPANEL p)
{

}

I wanted to switch the panel by this.
Any idea?
Thank you for helping!

Posted 24-Sep-21 15:32pm

EnderMo233

Updated 24-Sep-21 22:54pm

v4

Add a Solution

Comments

Richard MacCutchan 25-Sep-21 3:38am

Your button click handler should set the parameters for which panel to pain, and call InvalidateRect to force the repaint. The WM_PAINT handler should then use the stored parameters to build whichever panel has been requested.

EnderMo233 25-Sep-21 4:20am

I still don't know how to realize it.Could you just give an example?Thank you!

Richard MacCutchan 25-Sep-21 4:30am

Example of what? In your WM_PAINT handler you just need to build the content according to which panel has been chosen. I have no idea what these panels are or what they are supposed to look like.

EnderMo233 25-Sep-21 4:52am

https://db.vertexstudio.xyz/lnk/PanelPic/1.png
https://db.vertexstudio.xyz/lnk/PanelPic/2.png
Here I add two images.
The page with "Create Panel2"button is the initial panel,and the page with dark background is the panel after click the button"Create Panel2":
void Panel1(HWND hWnd,HDC hdc)
{
CreateFillArea(hWnd, hdc, RGB(255, 255, 255));
//CreateRect(hWnd, hdc, 20, 20, 100, 40, RGB(16, 141, 218));
CreateSimpleButton(hWnd, hdc, 20, 20, 140, 40, L"Create Panel2");
}
void Panel2(HWND hWnd, HDC hdc)
{
CreateFillArea(hWnd, hdc, VERTEXUI_DARKEN);
//CreateRect(hWnd, hdc, 20, 20, 100, 40, RGB(16, 141, 218));
CreateSimpleButton(hWnd, hdc, 20, 20, 140, 40, L"Close Panel2");
}
however,I wanted to use this to change panel:
void SwitchPanel(DRAWPANEL p)
{
//
}
So it can use SwitchPanel(Panel2) to change the panel of the program,and more convenient,I want to find a way to realize this.

Richard MacCutchan 25-Sep-21 4:57am

Then do what I already suggested. But you must paint the screen inside your WM_PAINT handler, you cannot do it at any other time.

EnderMo233 25-Sep-21 5:27am

I try to give each panel an ID,it works.
RUNFUN test()
{
RECT rc;
HDC hdc = GetDC(GhWnd);
GetClientRect(GhWnd, &rc);
PanelID = 1;
InvalidateRect(GhWnd, &rc, 1);

return 0;
}
case WM_PAINT:
{
PAINTSTRUCT ps;
HDC hdc = BeginPaint(hWnd, &ps);
// TODO: 在此处添加使用 hdc 的任何绘图代码...
if (PanelID == 0)
{
CreatePanel(hWnd, hdc, Panel1);
}
if (PanelID == 1)
{
CreatePanel(hWnd, hdc, Panel2);
}
EndPaint(hWnd, &ps);
break;
}
but when click a button,it not only respond on RUNFUN(),I also need to respond it in WM_PAINT.
Now I just wanted to ask an idea of SwitchPanel().
Like I can use SwitchPanel(Panel2)to switch to panel2.

Richard MacCutchan 25-Sep-21 6:11am

When you want to switch from one panel to the other, you should pass the panel id to your test function:

RUNFUN test(int panelid)
{
RECT rc;
HDC hdc = GetDC(GhWnd);
GetClientRect(GhWnd, &rc);
PanelID = panelid;
InvalidateRect(GhWnd, &rc, 1);

return 0;
}

Then in your switch function you check which panel you want and call test with the id.

EnderMo233 26-Sep-21 8:23am

Thanks for you help.
Here's another question.you can see ClickArea() function in my code,here cause a problem.
Here is a new button created on the panel,so there will be two click area in the window.
I only wanted to use ClickArea() instead of create two function like ClickAreaA/ClickAreaB.
RUNFUN test()
{
//MessageBox(0, L"TEST", L"TEST", 0);
//The event of button
return 0;
}
RUNFUN test2()
{
MessageBox(0, L"TEST", L"TEST2", 0);
//The event of button
return 0;
}
case WM_LBUTTONUP:
{
ClickArea(hWnd, 20, 20, 140, 40, lParam, test)
ClickArea(hWnd, rc.right - 160, rc.bottom - 60, 140, 40, lParam, test2)
return 0;
}
but only the last function works.
Any idea to slove it?
thank you very much!

Richard MacCutchan 26-Sep-21 12:18pm

When a click event occurs it should give you a HWND to the active window. So you can use that to check which panel is active. Alternatively just save a flag somewhere that tells you which panel is showing.

EnderMo233 27-Sep-21 1:14am

Okay,I will have a try.Thank you!

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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