MFC控件——ListCtrl控件[翻译](续)
四、实践学习:一个ListCtrl的详细实现
1.切换到第一个对话框点击ListCtrl控件
2.在属性窗口,改变View属性为Report
3.创建ListCtrl的列,在OnInitDialog()中添加代码如下:
BOOL CDeptStore2Dlg::OnInitDialog()
{
CDialog::OnInitDialog();
// Set the icon for this dialog. The framework does this automatically
// when the application's main window is not a dialog
SetIcon(m_hIcon, TRUE); // Set big icon
SetIcon(m_hIcon, FALSE); // Set small icon
// TODO: Add extra initialization here
LVCOLUMN lvColumn;
lvColumn.mask = LVCF_FMT | LVCF_TEXT | LVCF_WIDTH;
lvColumn.fmt = LVCFMT_CENTER;
lvColumn.cx = 60;
lvColumn.pszText = "Item #";
this->m_StoreItems.InsertColumn(0, &lvColumn);
lvColumn.mask = LVCF_FMT | LVCF_TEXT | LVCF_WIDTH;
lvColumn.fmt = LVCFMT_LEFT;
lvColumn.cx = 100;
lvColumn.pszText = "Category";
this->m_StoreItems.InsertColumn(1, &lvColumn);
lvColumn.mask = LVCF_FMT | LVCF_TEXT | LVCF_WIDTH;
lvColumn.fmt = LVCFMT_LEFT;
lvColumn.cx = 160;
lvColumn.pszText = "Item Name";
this->m_StoreItems.InsertColumn(2, &lvColumn);
lvColumn.mask = LVCF_FMT | LVCF_TEXT | LVCF_WIDTH;
lvColumn.fmt = LVCFMT_LEFT;
lvColumn.cx = 80;
lvColumn.pszText = "Size";
this->m_StoreItems.InsertColumn(3, &lvColumn);
lvColumn.mask = LVCF_FMT | LVCF_TEXT | LVCF_WIDTH;
lvColumn.fmt = LVCFMT_RIGHT;
lvColumn.cx = 60;
lvColumn.pszText = "Unit Price";
this->m_StoreItems.InsertColumn(4, &lvColumn);
lvColumn.mask = LVCF_FMT | LVCF_TEXT | LVCF_WIDTH;
lvColumn.fmt = LVCFMT_RIGHT;
lvColumn.cx = 30;
lvColumn.pszText = "Qty";
this->m_StoreItems.InsertColumn(5, &lvColumn);
this->m_StoreItems.SetExtendedStyle(LVS_EX_FULLROWSELECT | LVS_EX_GRIDLINES);
return TRUE; // return TRUE unless you set the focus to a control
}
4.准备创建一个完全的项,设计一个第一个对话框如下:
Control |
Caption |
ID |
Other Properties |
Static Text |
Category: |
|
|
Combo Box |
|
IDC_CATEGORIES |
Data: Babies;Teens;Women;Men;Miscellaneous |
Static Text |
Item Name: |
|
|
Edit Control |
|
IDC_ITEMNAME |
|
Static Text |
Item Size: |
|
|
Edit Control |
|
IDC_ITEMSIZE |
|
Static Text |
Qty: |
|
|
Edit Control |
|
IDC_QUANTITY |
|
Static Text |
Unit Price: |
|
|
Edit Control |
|
IDC_UNITPRICE |
|
Static Text |
Item #: |
|
|
Edit Control |
|
IDC_ITEMNUMBER |
|
Button |
OK |
IDOK |
|
Button |
Cancel |
IDCANCEL |
|
5.如下创建CString变量
ID |
Value Variable |
IDC_CATEGORIES |
m_Categories |
IDC_ITEMNAME |
m_ItemName |
IDC_ITEMSIZE |
m_ItemSize |
IDC_QUANTITY |
m_Quantity |
IDC_UNITPRICE |
m_UnitPrice |
6.在主窗口中,双击新建项改变它的实现为:
void CDeptStore2Dlg::OnBnClickedNewitem()
{
// TODO: 在此添加控件通知处理程序代码
CNewStoreItemDlg1 dlg;
srand( (unsigned)time(NULL) );
wchar_t strNumber[20];
int number1 = rand() % 999;
int number2 = rand() % 999;
swprintf(strNumber, TEXT("%d-%d"), number1, number2);
dlg.m_ItemNumber = strNumber;
if( dlg.DoModal() )
{
LVITEM lvItem;
int nItem;
lvItem.mask = LVIF_TEXT;
lvItem.iItem = 0;
lvItem.iSubItem = 0;
lvItem.pszText = strNumber;
nItem = this->m_StoreItems.InsertItem(&lvItem);
this->m_StoreItems.SetItemText(nItem, 1, dlg.m_Categories);
this->m_StoreItems.SetItemText(nItem, 2, dlg.m_ItemName);
this->m_StoreItems.SetItemText(nItem, 3, dlg.m_ItemSize);
this->m_StoreItems.SetItemText(nItem, 4, dlg.m_UnitPrice);
this->m_StoreItems.SetItemText(nItem, 5, dlg.m_Quantity);
}
}
7.运行应用程序,用下面的数据创建数据项(让计算机随机生成itemNumber)
Category |
Item Name |
Size |
Qty |
Unit Price |
Women |
Cashmere Lined Glove |
8 |
12 |
115.95 |
Miscellaneous |
Chocolate Gift Box |
Medium |
5 |
45.00 |
Men |
Trendy Jacket |
Medium |
8 |
45.85 |
Women |
Stretch Flare Jeans |
Petite |
6 |
27.75 |
Women |
Belted Sweater |
Large |
10 |
15.95 |
Teens |
Girls Classy Handbag |
One Size |
4 |
95.95 |
Women |
Casual Dress Shoes |
9.5M |
16 |
45.95 |
Babies |
Infant Girls Ballerina Dress |
2M |
14 |
22.85 |
Teens |
Girls Velour Dress |
10 |
8 |
12.55 |
Women |
Lace Desire Panty |
M |
22 |
7.15 |
Teens |
Boys Hooded Sweatshirt |
M (7/8) |
16 |
42.75 |
Men |
Classic Pinstripe Suit |
38 |
8 |
145.90 |
8.关闭窗口,返回应用程序
Views转换
你可以创建一个ListCtrl显示一个单独的View,你也可以允许用户区改变从一个View到另外一个。和刚才所说的一样,在设计的时候或者程序动态创建一个ListCtrl,你可以设置一个初始化View用ComboBox去选择一个View。如果你想在初始化的时候显示,你可以停到那里,否则你可以提供改变的一种。
因为在一个ListCtrl显示的View是它风格的一部分。为了动态改变它的View模型,你可以用GetWindowLong()返回控件的风格。GetWindowLong()函数只返回当前控件的风格。你可能需要在改变它之前选择它。通过为GetWindowLong()函数增加LVS_TYPEMASK常量,在选择控件的View之后,你接着可以用SetWindowLong()函数来改变它的风格。示例如下:
void COthersDlg::OnIconBtn()
{
// TODO: Add your control notification handler code here
LONG mListStyle = GetWindowLong(m_List.m_hWnd, GWL_STYLE);
mListStyle &= ~LVS_TYPEMASK;
mListStyle |= LVS_ICON;
SetWindowLong(m_List.m_hWnd, GWL_STYLE, mListStyle);
}
void COthersDlg::OnSmallIconBtn()
{
// TODO: Add your control notification handler code here
LONG mListStyle = GetWindowLong(m_List.m_hWnd, GWL_STYLE);
mListStyle &= ~LVS_TYPEMASK;
mListStyle |= LVS_SMALLICON;
SetWindowLong(m_List.m_hWnd, GWL_STYLE, mListStyle);
}
void COthersDlg::OnListBtn()
{
// TODO: Add your control notification handler code here
LONG mListStyle = GetWindowLong(m_List.m_hWnd, GWL_STYLE);
mListStyle &= ~LVS_TYPEMASK;
mListStyle |= LVS_LIST;
SetWindowLong(m_List.m_hWnd, GWL_STYLE, mListStyle);
}
void COthersDlg::OnReportBtn()
{
// TODO: Add your control notification handler code here
LONG mListStyle = GetWindowLong(m_List.m_hWnd, GWL_STYLE);
mListStyle &= ~LVS_TYPEMASK;
mListStyle |= LVS_REPORT;
SetWindowLong(m_List.m_hWnd, GWL_STYLE, mListStyle);
}
五、实践学习:改变ListCtrl的View
1.在类视图中,扩展DeptStore2,右击CDeptStoreDlg2->Add->Add Function
2.设置返回值为DWORD类型,函数名为GetViewType
3.点击完成,函数实现如下:
DWORD CDeptStore2Dlg::GetViewType(void)
{
return (GetStyle() & LVS_TYPEMASK);
}
4.在类视图中,右击CDeptStore2Dlg->Add->Add Function
5.设置返回值为void,函数名称为SetViewType,参数类型为DWORD,参数名为dwViewType,点击Add。
6.点击完成,函数实现如下:
void CDeptStore2Dlg::SetViewType(DWORD dwViewType)
{
DWORD dwCurType;
HWND hWnd;
hWnd = this->m_StoreItems;
GetSafeHwnd();
dwCurType = ::GetWindowLong(hWnd, GWL_STYLE);
dwCurType &= ~LVS_TYPEMASK;
dwViewType |= dwCurType;
::SetWindowLong(hWnd, GWL_STYLE, dwViewType);
}
7.切换到第一个对话框,如下增加四个按钮:
Button ID |
Caption |
IDC_LARGE |
Large |
IDC_SMALL |
Small |
IDC_LIST |
List |
IDC_DETAILS |
Details |
8.双击Large按钮,如下实现OnBnClicked事件:
void CDeptStore2Dlg::OnBnClickedLarge()
{
// TODO: Add your control notification handler code here
SetViewType(LVS_ICON);
}
9.类似添加其他按钮的事件响应函数,如下:
void CDeptStore2Dlg::OnBnClickedSmall()
{
// TODO: Add your control notification handler code here
if( GetViewType() != LVS_SMALLICON)
SetViewType(LVS_SMALLICON);
}
void CDeptStore2Dlg::OnBnClickedList()
{
// TODO: Add your control notification handler code here
if( GetViewType() != LVS_LIST)
SetViewType(LVS_LIST);
}
void CDeptStore2Dlg::OnBnClickedDetails()
{
// TODO: Add your control notification handler code here
if( GetViewType() != LVS_REPORT)
SetViewType(LVS_REPORT);
}
10.保存
ListCtrl和Icon
ListCtrl可以将实现图片,显示记录或者将两者组合显示。如果你想在列上显示一幅位图,你应该声明一个CImageList变量并初始化。然后调用CListCtrl::SetImageList()方法,并为之传参。如果你想这么做,并且你用的是第一个版本传递LVCOLUMN指针参数CListCtrl::InsertColumn()方法,需要给mask参数添加LVCF_IMAGE值,并且为fmt添加LVCFMT_IMAGE值。指定的图像会显示在列的首项上,把列的索引赋给iImage变量。示例如下:
BOOL COthersDlg::OnInitDialog()
{
CDialog::OnInitDialog();
// TODO: Add extra initialization here
LVCOLUMN lvColumn;
CImageList *ImgHeaders = new CImageList;
ImgHeaders->Create(16, 16, ILC_MASK, 1, 1);
ImgHeaders->Add(AfxGetApp()->LoadIcon(IDI_UP));
ImgHeaders->Add(AfxGetApp()->LoadIcon(IDI_LOSANGE));
m_List.SetImageList(ImgHeaders, LVSIL_SMALL);
lvColumn.mask = LVCF_FMT | LVCF_TEXT | LVCF_WIDTH | LVCF_IMAGE;
lvColumn.fmt = LVCFMT_LEFT | LVCFMT_IMAGE;
lvColumn.cx = 120;
lvColumn.pszText = "Full Name";
lvColumn.iImage = 0;
m_List.InsertColumn(0, &lvColumn);
lvColumn.mask = LVCF_FMT | LVCF_TEXT | LVCF_WIDTH;
lvColumn.fmt = LVCFMT_LEFT;
lvColumn.cx = 100;
lvColumn.pszText = "Profession";
m_List.InsertColumn(1, &lvColumn);
lvColumn.mask = LVCF_FMT | LVCF_TEXT | LVCF_WIDTH | LVCF_IMAGE;
lvColumn.fmt = LVCFMT_LEFT | LVCFMT_IMAGE;
lvColumn.iImage = 1;
lvColumn.cx = 80;
lvColumn.pszText = "Fav Sport";
m_List.InsertColumn(2, &lvColumn);
lvColumn.mask = LVCF_FMT | LVCF_TEXT | LVCF_WIDTH;
lvColumn.fmt = LVCFMT_LEFT;
lvColumn.cx = 75;
lvColumn.pszText = "Hobby";
m_List.InsertColumn(3, &lvColumn);
return TRUE; // return TRUE unless you set the focus to a control
// EXCEPTION: OCX Property Pages should return FALSE
}
BOOL COthersDlg::OnInitDialog()
{
CDialog::OnInitDialog();
// TODO: Add extra initialization here
LVCOLUMN lvColumn;
CImageList *ImgHeaders = new CImageList;
ImgHeaders->Create(16, 16, ILC_MASK, 1, 1);
ImgHeaders->Add(AfxGetApp()->LoadIcon(IDI_UP));
ImgHeaders->Add(AfxGetApp()->LoadIcon(IDI_LOSANGE));
m_List.SetImageList(ImgHeaders, LVSIL_SMALL);
lvColumn.mask = LVCF_FMT | LVCF_TEXT | LVCF_WIDTH | LVCF_IMAGE;
lvColumn.fmt = LVCFMT_LEFT | LVCFMT_IMAGE;
lvColumn.cx = 120;
lvColumn.pszText = "Full Name";
lvColumn.iImage = 0;
m_List.InsertColumn(0, &lvColumn);
lvColumn.mask = LVCF_FMT | LVCF_TEXT | LVCF_WIDTH;
lvColumn.fmt = LVCFMT_LEFT;
lvColumn.cx = 100;
lvColumn.pszText = "Profession";
m_List.InsertColumn(1, &lvColumn);
lvColumn.mask = LVCF_FMT | LVCF_TEXT | LVCF_WIDTH | LVCF_IMAGE;
lvColumn.fmt = LVCFMT_LEFT | LVCFMT_IMAGE;
lvColumn.iImage = 1;
lvColumn.cx = 80;
lvColumn.pszText = "Fav Sport";
m_List.InsertColumn(2, &lvColumn);
lvColumn.mask = LVCF_FMT | LVCF_TEXT | LVCF_WIDTH;
lvColumn.fmt = LVCFMT_LEFT;
lvColumn.cx = 75;
lvColumn.pszText = "Hobby";
m_List.InsertColumn(3, &lvColumn);
return TRUE; // return TRUE unless you set the focus to a control
// EXCEPTION: OCX Property Pages should return FALSE
}
在控件上使用位图或图标,你应该首先创建位图或图。如果你不打算使用Report View并且你想使用位图,你可以创建一个很长的位图(由一些小的大小相似的位图组成)。每一幅图像供每一个项使用。正常情况下,每个图片应该大小为16*16或者更小。下面是示例:
位图是由6幅相同大小的图片组成的。如果你不打算使用Report View并且你打算使用icons,那么就应该单独的创建16*16大小的icon。
如果你想使用ReportView和其他Views显示控件项,如果你想使用位图,你用该创建两个长位图。一个应该是16*16大小的。这样的图片用来做小图标(small icon),List,和ReportViews。你应该创建第二个位图,大小为32*32。这些图片用来为ListView服务。
在你创建完位图或者图标之后,紧接着声明一个指向CImageList类的指针并且用CImageList::Create方法来初始化。调用CListCtrl::SetImageList()方法来确定有效。语法如下:
CImageList* SetImageList(CImageList* pImageList, int nImageList);
pImageList:CImageList变量或者已被初始化的指针。
nImageList:使用ImageList的类型标识,它可以是如下几个值:
Value |
Description |
LVSIL_NORMAL |
The image list is made of large bitmap or icons, typically 32x32 |
LVSIL_SMALL |
The image list is made of small bitmap or icons, typically 16x16 |
LVSIL_STATE |
The image list is made of pictures that will be used as mask |
你可以使用CListCtrl::InsertItem()的几个版本来实现,向列表项关联图片:
int InsertItem(int nItem, LPCTSTR lpszItem, int nImage );
int InsertItem(UINT nMask,
int nItem,
LPCTSTR lpszItem,
UINT nState,
UINT nStateMask,
int nImage,
LPARAM lParam );
nImage:使用图片的索引。
nMask:和LVITEM::mask成员类似,它简单的指定你需要在项上显示的信息。
nState:和LVITEM::state成员变量相似,指定项的行为。是否能被选中,失去焦点时,以及有没有剪切粘贴操作,高亮和拖拽功能。
nStateMask:用来结合nState参数。指定精确的类型信息。
lParam:和TVITEM的lParam成员一样,用来执行指定项的操作,例如牵涉到项的排序和查找。
六、实践学习:为ListCtrl控件项关联位图
1.创建位图,在主菜单,右击工程->添加资源,在添加资源对话框内选择位图->单击新建
2.在设置属性窗口中,改变ID为IDB_SMALLIMG,设置高度为16,宽度为144.设计如下位图:
3.在增加位图,设置ID为IDB_LARGING,设置宽度为32,高度为288。设计位图如下:
4.在主对话框的头文件中声明两个CImageList变量,如下:
private:
CImageList m_SmallImg;
CImageList m_LargeImg;
};
5. 在OnInitDialog()方法中添加如下初始化代码:
m_SmallImg.Create(IDB_SMALLING, 16, 1, RGB(255, 255, 255));
m_LargeImg.Create(IDB_LARGING, 32, 1, RGB(255, 255, 245));
m_StoreItems.SetImageList(&m_SmallImg, LVSIL_SMALL);
m_StoreItems.SetImageList(&m_LargeImg, LVSIL_NORMAL);
6.使用图像,改变新建的事件响应函数:
void CDeptStore2Dlg::OnBnClickedNewitem()
{
// TODO: 在此添加控件通知处理程序代码
CNewStoreItemDlg1 dlg;
srand( (unsigned)time(NULL) );
wchar_t strNumber[20];
int number1 = rand() % 999;
int number2 = rand() % 999;
swprintf(strNumber, TEXT("%d-%d"), number1, number2);
dlg.m_ItemNumber = strNumber;
if( dlg.DoModal() )
{
LVITEM lvItem;
int nItem;
int imgNbr;
if( dlg.m_Categories == TEXT("Babies") )
imgNbr = 0;
else if( dlg.m_Categories == TEXT("Teens") )
imgNbr = 1;
else if( dlg.m_Categories == TEXT("Women") )
imgNbr = 2;
else if( dlg.m_Categories == TEXT("Men") )
imgNbr = 3;
else // if( dlg.m_Category == "Miscellaneous" )
imgNbr = 4;
lvItem.mask = LVIF_TEXT;
lvItem.iItem = 0;
lvItem.iSubItem = 0;
lvItem.iImage = imgNbr;
lvItem.pszText = strNumber;
nItem = this->m_StoreItems.InsertItem(&lvItem);
this->m_StoreItems.SetItemText(nItem, 1, dlg.m_Categories);
this->m_StoreItems.SetItemText(nItem, 2, dlg.m_ItemName);
this->m_StoreItems.SetItemText(nItem, 3, dlg.m_ItemSize);
this->m_StoreItems.SetItemText(nItem, 4, dlg.m_UnitPrice);
this->m_StoreItems.SetItemText(nItem, 5, dlg.m_Quantity);
}
}
7.运行程序
<完>