DuiLib中ComboBox和List控件使用

Duilib中ComboBox和List控件的使用

1.ComboBox控件使用

Duilib中ComboBox控件的Item类型为 ListLabelElement; Item选中的响应消息为:DUI_MSGTYPE_ITEMSELECT

1.可以直接在Combo标签内添加Item：

<Combo style="trade_common_combo_style" name="notice_type_combo" font="1400" width="168" height="30" dropbox="bordercolor=&quot;#FF4D4D50&quot; bordersize=&quot;1&quot; bkcolor=&quot;#FF4D4D50&quot;">
	<ListLabelElement text="全部" notifyType="0" height="20" selected="true" />
	<ListLabelElement text="供股通知" notifyType="1" height="20" />
	<ListLabelElement text="权益登记" notifyType="2" height="20" />
	<ListLabelElement text="公开配售" notifyType="3" height="20" />
	<ListLabelElement text="股份收购" notifyType="4" height="20" />
</Combo>

可以通过这种方式，拿到ComboBox的Item中的自定义”notifyType”属性

std::wstring GetNotifyType()
 {
	std::wstring searchType = "-1";
	if (notice_type_combo_) {
		auto index = notice_type_combo_->GetCurSel();
		if (index < 0 || index >= notice_type_combo_->GetCount()) {
			return searchType;
		}
		auto item = notice_type_combo_->GetItemAt(index);
		if (item == nullptr) {
			return searchType;
		}
		searchType = item->GetCustomAttribute(L"notifyType");
	}
	return searchType;
}

实现效果如图:

2.也可以在代码中直接new CListLabelElementUI，然后再添加到ComboBox中：

	if (!combo) return nullptr;
	CListLabelElementUI* element = new CListLabelElementUI;
	element->SetName(name.c_str());
	element->SetText(text.c_str());
	element->SetFixedHeight(26);
	combo->Add(element);
	return element;

2.List控件的使用

1.List控件分为ListHeader和具体的Item;List的Item类型为 ListContainerElement,配置ListHeader如下图所示：

<Style name="list_header_style" value="sepimage=&quot;res='hltrade_login?res\proxy_frame\list_header_sep.png'&quot; sepwidth=&quot;1&quot; dragable=&quot;false&quot; textcolor=&quot;#FF4D648E&quot; "/>

<List name="station_list" height="200" itemshowhtml="true" vscrollbar="true" hscrollbar="true" itemshowrowline="true" itemshowcolumnline="true" itemlinecolor="#FFD7D7D7" >
	<ListHeader height="35" bkcolor="#FFE6ECF7">
		<ListHeaderItem text="序号" width="60" style="list_header_style"/>
		 <ListHeaderItem text="主站名称" width="150" style="list_header_style"/>
		<ListHeaderItem text="主站IP" width="130" style="list_header_style"/>
		<ListHeaderItem text="端口" width="80" style="list_header_style"/>
		<ListHeaderItem text="主站测速(ms)" width="115" style="list_header_style"/>
		<ListHeaderItem text="主站状态" width="120" style="list_header_style"/>
		<ListHeaderItem text="操作" style="list_header_style"/>
	</ListHeader>
</List>

List的Item是在代码中使用XML文件动态创建,然后添加到List控件中去：

CDialogBuilder builder;
CListContainerElementUI* pListItem = static_cast<CListContainerElementUI*>(builder.Create(LIST_ITEM_XML, NULL, 
	this, &m_pm, NULL));
if (pListItem) 
{
	CLabelUI* number_lbl = static_cast<CLabelUI*>(m_pm.FindSubControlByName(pListItem, _T("number_lbl")));
	CLabelUI* station_name_lbl = static_cast<CLabelUI*>(m_pm.FindSubControlByName(pListItem, _T("station_name_lbl")));
	CLabelUI* station_ip_lbl = static_cast<CLabelUI*>(m_pm.FindSubControlByName(pListItem, _T("station_ip_lbl")));
	CLabelUI* station_port_lbl = static_cast<CLabelUI*>(m_pm.FindSubControlByName(pListItem, _T("station_port_lbl")));
	CLabelUI* station_test_lbl = static_cast<CLabelUI*>(m_pm.FindSubControlByName(pListItem, _T("station_test_lbl")));
	CLabelUI* station_status_lbl = static_cast<CLabelUI*>(m_pm.FindSubControlByName(pListItem, _T("station_status_lbl")));

	station_list_->Add(pListItem);
}

Item的XML描述文件内容如下：

<?xml version="1.0" encoding="utf-8"?>
<Window >
    <ListContainerElement  name="list_item" height="30">
        <Label name="number_lbl" align="center"/>
        <Label name="station_name_lbl" align="center"/>
        <Label name="station_ip_lbl" align="center"/>
        <Label name="station_port_lbl" align="center"/>
        <Label name="station_test_lbl" align="center"/>
        <Label name="station_status_lbl" align="center"/>
        <HorizontalLayout childvalign="vcenter">
            <Control/>
            <Button name="change_station_btn" text="修改" width="50" textcolor="#FF3287FF" disabledtextcolor="#FFC6DEFC" normalimage="file='hltrade_login?res\proxy_frame\modify_enable.png' source='0,0,14,14' dest='0,8,14,22'" disabledimage="file='hltrade_login?res\proxy_frame\modify_disable.png' source='0,0,14,14' dest='0,8,14,22'" textpadding="5,0,0,0" />
            <Button name="delete_station_btn"  text="删除" width="50" textcolor="#FF3287FF" disabledtextcolor="#FFC6DEFC" normalimage="file='hltrade_login?res\proxy_frame\modify_enable.png' source='0,0,14,14' dest='0,8,14,22'" disabledimage="file='hltrade_login?res\proxy_frame\modify_disable.png' source='0,0,14,14' dest='0,8,14,22'" textpadding="5,0,0,0" pandding="10,0,0,0"/>
            <Control/>
        </HorizontalLayout>
    </ListContainerElement>
</Window>

效果如图：

再说一点: 如果Item里面的内容是固定不变的，那还可以直接在XML文件中填充List的Item，而不是像上面那样在代码中根据内容的不同，动态去添加 Item；比如：

<List name="sys_list" bkcolor="FF00FF00" itemhotbkcolor="#FFA9A9A9" itemselectedbkcolor="#FFFFFAFA">
	<ListContainerElement name="menu_Open" height="22" inset="40,0,0,0">
		<Label text="打开" mouse="false" textcolor="FFFFFFFF"/>
		<Label text="标注" mouse="false" textcolor="FFFFFFFF"/>
		<Label text="删除" mouse="false" textcolor="FFFFFFFF"/>
	</ListContainerElement>
</List>

总结:

List控件可以实现自定义的样式，每一列不一定是一个数据，有可能是按钮，如上例子所示；
ComboBox控件的Item如果在XML文件中写了，就只能是很基础的类型，如第一个例子所示，无法实现像List的Item这种自定义效果； 至于ComboBox能否像List控件一样，使用DialogBuilder来自定义Item，还没有使用过，没有研究过，不知道是否可行,需要研究