利用VS2010模仿QQ2011登陆界面

模仿QQ2011的登陆界面有很多种方法，下面我介绍一下我自己的设计方法以及在设计过程中所用到的技术关键点：

附截图两张：

登陆界面中用到的技术关键点有：

一、背景的绘制

QQ2011登陆界面的背景分为两部分，上半部分用一个Picture Control（图片控件），向里面可视化的添加一幅位图就ok了。下半部分在OnInitDialog()函数中调用SetBackgroundColor（）函数改变对话框的背景颜色。

二、系统菜单（最大化、最小化、关闭按钮）和登录按钮的自绘制

最大化、最小化、关闭按钮以及登录按钮都是自绘制按钮，由CBitmapButton类来自绘制按钮。

头文件中：

CBitmapButton m_bitmapButton_MinWindow;
CBitmapButton m_bitmapButton_MaxWindow;

CBitmapButton m_bitmapButton_CloseWindow;
CBitmapButton m_bitmapButton_Land;

源文件中：

m_bitmapButton_MinWindow.LoadBitmaps(IDB_MIN1,IDB_MIN2);
m_bitmapButton_MaxWindow.LoadBitmaps(IDB_MAX1,IDB_MAX2);
m_bitmapButton_CloseWindow.LoadBitmaps(IDB_CLOSE2,IDB_CLOSE1);
m_bitmapButton_Land.LoadBitmaps(IDB_LAND1,IDB_LAND2);

通过CBitmapButton类的成员函数就可以很方便的为自绘制按钮贴上不同状态的位图。

三、输入账号的组合框控件的使用，以及向组合框中添加图像列表

输入账号的组合框要用到扩展的组合框控件(Extended Combo box)，往组合框中添加图像列表要用到CBitmapList类

源文件实现如下：

m_pImageList = new CImageList();
m_pImageList->Create(16, 16, ILC_COLOR8, 0, 4);
m_pImageList->Add(AfxGetApp()->LoadIcon(IDI_ICON1));
m_pImageList->Add(AfxGetApp()->LoadIcon(IDI_ICON2));
m_pImageList->Add(AfxGetApp()->LoadIcon(IDI_ICON3));
m_pImageList->Add(AfxGetApp()->LoadIcon(IDI_ICON4));
m_ComboBoxEx.SetImageList(m_pImageList);

for(int i=0; i<m_pImageList->GetImageCount(); i++)
{
  COMBOBOXEXITEM cbi ={0};
  CString str;
  int nItem;

cbi.mask = CBEIF_IMAGE | CBEIF_INDENT | CBEIF_OVERLAY |
CBEIF_SELECTEDIMAGE | CBEIF_TEXT;

  cbi.iItem = i;
  if (i==0)
  {
   cbi.pszText="875291736";
  }
  if (i==1)
  {
   cbi.pszText="717555344";
  }
  if (i==2)
  {
   cbi.pszText="858628250";
  }
  if (i==3)
  {
   cbi.pszText="1194527617";
  }
  cbi.cchTextMax = str.GetLength();
  cbi.iImage = i;
  cbi.iSelectedImage = i;
  cbi.iOverlay = 2;
  cbi.iIndent = 0;//(i & 0x03); //Set indentation according
  nItem =m_ComboBoxEx.InsertItem(&cbi);
   }

四、在线状态菜单的实现

在线状态的实现，从外观上看是左边一幅表示状态的位图右边一个向下的箭头，表示有一个下拉菜单，实际上它就是一个自绘制贴图按钮，跟上面的登录按钮一样，下拉列表实际上就是一个菜单（CMenu类的对象），当单击按钮时在该单击事件的响应函数中让menu在相应位置显示出来就行了。

状态按钮的实现：

m_bitmapButton_State.LoadBitmaps(IDB_BITHIDEUP,IDB_BITHIDDOWM);

下拉列表：

下拉列表用menu实现，就可以很方便的用CMenu的成员函数为其添加状态位图

menu.LoadMenuA(IDR_MENU_STATE);
menu.GetSubMenu(0)->SetMenuItemBitmaps(0,MF_BYPOSITION,&m_bmp_online1,&m_bmp_online1);
menu.GetSubMenu(0)->SetMenuItemBitmaps(1,MF_BYPOSITION,&m_bmp_qme,&m_bmp_qme);
menu.GetSubMenu(0)->SetMenuItemBitmaps(3,MF_BYPOSITION,&m_bmp_leave,&m_bmp_leave);
menu.GetSubMenu(0)->SetMenuItemBitmaps(4,MF_BYPOSITION,&m_bmp_busy,&m_bmp_busy);
menu.GetSubMenu(0)->SetMenuItemBitmaps(5,MF_BYPOSITION,&m_bmp_nodis,&m_bmp_nodis);
menu.GetSubMenu(0)->SetMenuItemBitmaps(7,MF_BYPOSITION,&m_bmp_steal,&m_bmp_steal);
POINT ptCursor;
GetCursorPos(&ptCursor);
menu.GetSubMenu(0)->TrackPopupMenu(
  TPM_LEFTALIGN |TPM_RIGHTBUTTON,
  ptCursor.x, ptCursor.y + 6,
  this);
menu.Detach();

以上就是我自己模仿QQ2011登录界面所用到的方法，可能不是最好的方法，与腾讯的产品也有一定的不一致。如果大家有好的方法，可以共同交流共同进步。

利用VS2010模仿QQ2011登陆界面

猜你喜欢