分类：
2008-10-14 14:56:15
让你的软件界面更漂亮(一)
作者：
我们使用过很多的软件， 给我们留下印象很深的是那些界面漂亮且迷人的软件， 国外的软件象QuickTime,国产的象金山词霸等，它们的软件界面设计风格都有独特之处。本人跟据自已的经验和大家探讨一下软件的漂亮界面实现的原理并提供DEMO程序。本人经验不多，经常从VCKBASE.COM吸取知识，共同学习，如有不足之处，请指正！也欢迎和我联系。下面就开始吧！
一、漂亮界面实现的原理
用图象元素自绘窗口标题样栏，边框，系统按钮（最大化、最小化、关闭按钮）还有按窗口中的控件。图象当然是美工画的，但要你教美工怎么去画，是不是不能理解? ，呆会我会告诉你你如何去教美工画.请先仔细看下图。
明白了吧，被红线包括的部分都是要画的图象。画得好不好会直接影响你的软件界面。
二、原理说玩了，来说一下实现的基本知识
1、VC软件绘图技术：
CBitmap* pBitmap = new CBitmap; BITMAP BmpInfo; CBitmap* pOldBitmap; CDC* pDisplayMemDC=new CDC; pDisplayMemDC->CreateCompatibleDC(pDC); pBitmap->LoadBitmap(IDB_TITLE_LEFT); pOldBitmap=(CBitmap*)pDisplayMemDC->SelectObject(pBitmap); pBitmap->GetBitmap(&BmpInfo); // x,y为绘图位置 ，必要时此语句要有For（..；..；..）控制 pDC->BitBlt(x,y, BmpInfo.bmWidth, BmpInfo.bmHeight, pDisplayMemDC, 0, 0, SRCCOPY); pDisplayMemDC->SelectObject(pOldBitmap); pBitmap->DeleteObject(); ReleaseDC(pDisplayMemDC);//记得执行以下的语句 delete pDisplayMemDC; delete pBitmap;2、坐标的概念：点、窗口坐标和屏幕坐标及转换，很重要！如不清楚请先复习相关知识。
void OnNcLButtonDown(UINT nHitTest, CPoint point);//单击标题栏时是响应
void OnNcMouseMove(UINT nHitTest, CPoint point);//Mous 在标题移动时响应
LRESULT DefWindowProc(UINT message, WPARAM wParam, LPARAM lParam)②、添加关键成员函数为：BOOL DrawTitleBar(CDC *pDC)
void CTitleBarDlg::OnNcMouseMove(UINT nHitTest, CPoint point)
{
CDC* pDC = GetWindowDC();
CDC* pDisplayMemDC=new CDC;
pDisplayMemDC->CreateCompatibleDC(pDC);
CBitmap* pBitmap = new CBitmap;
CBitmap* pOldBitmap;
CRect rtWnd, rtButton;
if (pDC)
{
CString StrTemp = "";
GetWindowRect(&rtWnd);
//mouse坐标转化为本窗口坐标 重要
point.x = point.x - rtWnd.left;
point.y = point.y - rtWnd.top;
//判断mouse是否移到系统按钮上
if (m_rtButtExit.PtInRect(point))
{
pBitmap->LoadBitmap(IDB_EXIT_FOCUS);
StrTemp = _T("关闭");
}
else
{
if(m_rtButtMin.PtInRect(point))
{
pBitmap->LoadBitmap(IDB_MIN_FOCUS);
StrTemp = _T("最小化窗口");
}
else
{
if(m_rtButtMax.PtInRect(point))
{
pBitmap->LoadBitmap(IDB_MAX_FOCUS);
if(IsZoomed())
{
StrTemp = _T("还原窗口");
}
else
{
StrTemp = _T("最化大窗口");
}
}
else
{
pBitmap->LoadBitmap(IDB_NORMAL);
}
}
}
rtButton = m_rtButtMin;
BITMAP BmpInfo;
pBitmap->GetBitmap(&BmpInfo);
pOldBitmap=(CBitmap*)pDisplayMemDC->SelectObject(pBitmap);
pDC->BitBlt(rtButton.left-6,
rtButton.top-2,
BmpInfo.bmWidth,
BmpInfo.bmHeight,
pDisplayMemDC,
0,
0,
SRCCOPY);
pDisplayMemDC->SelectObject(pOldBitmap);
pBitmap->DeleteObject();
CRect ShowTipRec;
ShowTipRec = m_rtButtMin;
if(!StrTemp.IsEmpty())
{
// ScreenToClient(&ShowTipRec);
// m_ToolTip.AddToolTip(IDD_TITLEBAR_DIALOG,&ShowTipRec,StrTemp);
// m_ToolTip.SetDelayTime(200);
}
}
ReleaseDC(pDisplayMemDC);
ReleaseDC(pDC);
delete pDisplayMemDC;
delete pBitmap;
CDialog::OnNcMouseMove(nHitTest, point);
}
//此为关键函数
void CTitleBarDlg::DrawTitleBar(CDC *pDC)
{
if (m_hWnd)
{
CBrush Brush(RGB(0,100,255));
CBrush* pOldBrush = pDC->SelectObject(&Brush);
CRect rtWnd, rtTitle, rtButtons;
GetWindowRect(&rtWnd);
//取得标题栏的位置
rtTitle.left = GetSystemMetrics(SM_CXFRAME);
rtTitle.top = GetSystemMetrics(SM_CYFRAME);
rtTitle.right = rtWnd.right - rtWnd.left - GetSystemMetrics(SM_CXFRAME);
rtTitle.bottom = rtTitle.top + GetSystemMetrics(SM_CYSIZE);
//计算最小化按钮的位置，位图大小为15X15
rtButtons.left = rtTitle.right-60;
rtButtons.top= rtTitle.top+2;
rtButtons.right = rtTitle.right-42;
rtButtons.bottom = rtTitle.top+20;
m_rtButtMin = rtButtons;
//计算最大化按钮的位置，位图大小为15X15
m_rtButtMax.left = m_rtButtMin.left + 18;
m_rtButtMax.top = m_rtButtMin.top;
m_rtButtMax.right = m_rtButtMin.right + 16;
m_rtButtMax.bottom = m_rtButtMin.bottom;
m_rtButtExit.left = m_rtButtMax.left + 18;
m_rtButtExit.top = m_rtButtMax.top;
m_rtButtExit.right = m_rtButtMax.right + 16;
m_rtButtExit.bottom = m_rtButtMax.bottom;
//准备
CBitmap* pBitmap = new CBitmap;
BITMAP BmpInfo;
CBitmap* pOldBitmap;
CDC* pDisplayMemDC=new CDC;
pDisplayMemDC->CreateCompatibleDC(pDC);
//重画Caption
POINT DrawPonit;
DrawPonit.x = rtTitle.left-4;
DrawPonit.y = rtTitle.top-4;
pBitmap->LoadBitmap(IDB_TITLE_LEFT);
pOldBitmap=(CBitmap*)pDisplayMemDC->SelectObject(pBitmap);
pBitmap->GetBitmap(&BmpInfo);
pDC->BitBlt(rtTitle.left-4,
rtTitle.top-4,
BmpInfo.bmWidth,
BmpInfo.bmHeight,
pDisplayMemDC,
0,
0,
SRCCOPY);
DrawPonit.x = DrawPonit.x + BmpInfo.bmWidth;
pDisplayMemDC->SelectObject(pOldBitmap);
pBitmap->DeleteObject();
pBitmap->LoadBitmap(IDB_TOP);
pOldBitmap=(CBitmap*)pDisplayMemDC->SelectObject(pBitmap);
pBitmap->GetBitmap(&BmpInfo);
while(DrawPonit.x<= m_rtButtMin.left-66)
{
pDC->BitBlt(DrawPonit.x,
DrawPonit.y,
BmpInfo.bmWidth,
BmpInfo.bmHeight,
pDisplayMemDC,
0,
0,
SRCCOPY);
DrawPonit.x = DrawPonit.x + BmpInfo.bmWidth;
}
pDisplayMemDC->SelectObject(pOldBitmap);
pBitmap->DeleteObject();
pBitmap->LoadBitmap(IDB_TITLE_RIGHT);
pOldBitmap=(CBitmap*)pDisplayMemDC->SelectObject(pBitmap);
pBitmap->GetBitmap(&BmpInfo);
pDC->BitBlt(DrawPonit.x,
DrawPonit.y,
BmpInfo.bmWidth,
BmpInfo.bmHeight,
pDisplayMemDC,
0,
0,
SRCCOPY);
pDisplayMemDC->SelectObject(pOldBitmap);
pBitmap->DeleteObject();
//重画最小化button
rtButtons = m_rtButtMin;
pBitmap->LoadBitmap(IDB_NORMAL);
pBitmap->GetBitmap(&BmpInfo);
pOldBitmap=(CBitmap*)pDisplayMemDC->SelectObject(pBitmap);
pDC->BitBlt(rtButtons.left-6,
rtButtons.top-2,
BmpInfo.bmWidth,
BmpInfo.bmHeight,
pDisplayMemDC,
0,
0,
SRCCOPY);
pDisplayMemDC->SelectObject(pOldBitmap);
pBitmap->DeleteObject();
int nOldMode = pDC->SetBkMode(TRANSPARENT);
COLORREF clOldText=pDC->GetTextColor();
CFont titleFont;
titleFont.CreateFont( 12, // nHeight
8, // nWidth
0, // nEscapement文本行逆时针旋转角度
0, // nOrientation字体角度
FW_BOLD, // nWeight字体粗细程度
FALSE, // bItalic
FALSE, // bUnderline
0, // cStrikeOut 删除线
ANSI_CHARSET, // nCharSet
OUT_DEFAULT_PRECIS, // nOutPrecision
CLIP_DEFAULT_PRECIS, // nClipPrecision
DEFAULT_QUALITY, // nQuality
DEFAULT_PITCH | FF_SWISS, // nPitchAndFamily
_T("隶书"));// lpszFac pDC->SelectStockObject(SYSTEM_FIXED_FONT);
CFont *OldFont;
OldFont = pDC->SelectObject(&titleFont);
CString m_StrTitle;
GetWindowText(m_StrTitle);
pDC->SetTextColor(RGB(80,255,25));
if(m_ShowTitle)
{
pDC->TextOut(65,10,m_StrTitle);
}
else
{
m_StrTitle = m_StrTitle.Left(6);
m_StrTitle += "...";
pDC->TextOut(30,10,m_StrTitle);
}
pDC->SetBkMode(nOldMode);
pDC->SetTextColor(clOldText);
pDC->SelectObject(OldFont);
//pDC->TextOut(60,60,m_StrTitle);
//重画左边框
pBitmap->LoadBitmap(IDB_LEFTDOWN);
pBitmap->GetBitmap(&BmpInfo);
pOldBitmap=(CBitmap*)pDisplayMemDC->SelectObject(pBitmap);
int i ;
for (i= 20;i<=rtWnd.bottom;i=i+BmpInfo.bmHeight-3)
{
pDC->BitBlt(0, rtButtons.top+i,
BmpInfo.bmWidth,
BmpInfo.bmHeight,
pDisplayMemDC,
0,
0,
SRCCOPY);
}
pDisplayMemDC->SelectObject(pOldBitmap);
pBitmap->DeleteObject();
//重画右边框
pBitmap->LoadBitmap(IDB_RIGHTDOWN);
pBitmap->GetBitmap(&BmpInfo);
pOldBitmap=(CBitmap*)pDisplayMemDC->SelectObject(pBitmap);
GetClientRect(&rtWnd);
for (i= 25;i<=rtWnd.bottom+27;i=i+BmpInfo.bmHeight-3)
{
pDC->BitBlt(rtWnd.right, i,
BmpInfo.bmWidth,
BmpInfo.bmHeight,
pDisplayMemDC,
0,
0,
SRCCOPY);
}
pDisplayMemDC->SelectObject(pOldBitmap);
pBitmap->DeleteObject();
//重画底边框
pBitmap->LoadBitmap(IDB_DOWN);
pBitmap->GetBitmap(&BmpInfo);
pOldBitmap=(CBitmap*)pDisplayMemDC->SelectObject(pBitmap);
GetClientRect(&rtWnd);
for (i= 9; i<=rtWnd.right; i=i+2)
{
GetClientRect(&rtWnd);
pDC->BitBlt(i,rtWnd.bottom+26,
BmpInfo.bmWidth,
BmpInfo.bmHeight,
pDisplayMemDC,
0,
0,
SRCCOPY);
}
pDisplayMemDC->SelectObject(pOldBitmap);
pBitmap->DeleteObject();
ReleaseDC(pDisplayMemDC);
delete pDisplayMemDC;
delete pBitmap;
}
}
void CTitleBarDlg::OnNcLButtonDown(UINT nHitTest, CPoint point)
{
CRect rtWnd;
GetWindowRect(&rtWnd);
//mouse坐标转化为本窗口坐标 重要
point.x = point.x - rtWnd.left;
point.y = point.y - rtWnd.top;
//检测各按钮是否按到
if (m_rtIcon.PtInRect(point))
AfxMessageBox("界面软件设计者：朱一松 EMail:Song_0962@sina.com");
else
{
if (m_rtButtHelp.PtInRect(point))
{
SendMessage(WM_HELP);
}
else
{
if (m_rtButtExit.PtInRect(point))
{
SendMessage(WM_CLOSE);
}
else
{
if (m_rtButtMin.PtInRect(point))
{
m_ShowTitle = FALSE;
SendMessage(WM_SYSCOMMAND,
SC_MINIMIZE,
MAKELPARAM(point.x, point.y));
}
else
{
if (m_rtButtMax.PtInRect(point))
{
m_ShowTitle = TRUE;
if (IsZoomed())
SendMessage(WM_SYSCOMMAND,
SC_RESTORE,
MAKELPARAM(point.x, point.y));
else
{
SendMessage(WM_SYSCOMMAND,
SC_MAXIMIZE,
MAKELPARAM(point.x, point.y));
Invalidate();
}
}
else
{
if (!IsZoomed())
{
Default();
}
}
}
}
}
}
}
//******************************************************
LRESULT CTitleBarDlg::DefWindowProc(UINT message, WPARAM wParam, LPARAM lParam)
{
LRESULT lrst=CDialog::DefWindowProc(message, wParam, lParam);
if (!::IsWindow(m_hWnd))
return lrst;
if (message==WM_MOVE||
message==WM_PAINT||
message==WM_NCPAINT||
message==WM_NCACTIVATE||
message == WM_NOTIFY)
{
CDC* pWinDC = GetWindowDC();
if (pWinDC)
DrawTitleBar(pWinDC);
ReleaseDC(pWinDC);
}
return lrst;
}
好了运行你的程序，即可出现漂亮的界面。说明在设计对话框时最好只选上Title
Bars,其它不要.消息函数要手动添加。只本程序是在VC++6.0 +WinXP环境下完成的。
加个Tooltip to:zwzo_wen To:tangjianwu:你说的问可加个Tooltip.实际上此代码也经有了。我为了大家的阅读方便取消了。 ( song_0962 发表于 2006-5-5 13:07:00) 重绘 ( James007 发表于 2006-4-8 0:21:00) 做的到还不错，只是好象有个功能看不到结果哦。就是把鼠标移动到最大化、最小化或者关闭的地方时，并没有相应的提示字体弹出来哦~~~~~我看了很久，不会改。因为我也是初学者，希望楼主有时间看看，修改修改。 ( tangjianwu 发表于 2006-3-25 14:09:00) 我按照方法做了一个类似风格的界面，但是发现界面闪烁的厉害，目前还没有找到问题所在。 ( zwzo_wen 发表于 2006-3-24 17:26:00) 界面绘制我也作过,无奈遗憾的是会出现闪烁的现象,因为基类有时会绘制在先,屏蔽的越多,需要自己写的代码就越多,比较麻烦,上面的什么iuishop库是没有源码的,在同行面前搞这些大家已知的技术,而不公开源码,比较幼稚,但是还是支持一下 ( zhaiht 发表于 2006-1-18 18:06:00) 对不起！这个问题可能跟操作系统有关！在我的电脑两台电脑都没问题，merycy反映此问题后我，在win2000上一试确实存在问题，我会查一下原因！ ( yisong 发表于 2005-10-31 10:44:00) 偶也试的，最大化再恢复的确有问题，所有控件位置集体上移了