duilib：设计一个“长度不够，按钮来凑“的duilib布局控件

本控件主要为了支持布局内元素很多，但是又不想显示滚动条，意图通过按钮来控制布局滚动的情形。

效果图如下：

当布局高度足以容纳所有子控件时：

 当布局高度不足以容纳子控件时：

 并且上下按钮支持点击翻页功能。

主要实现思路：

1. 控件构造的时候，把上下两个按钮以及中间的布局给添加到控件里。

2. 控件处理绘制事件的时候，通过判断中间的布局滚动条的显示状态来隐藏/显示上下按钮。

3. 托管上下按钮的点击通知。

4. 由于需要滚动条显示属性的支持，因此只能把滚动条的宽度设置为0，来达到隐藏的效果。

具体代码如下：

.h

class CVerticalLayoutExUI : public DuiLib::CVerticalLayoutUI{
	DECLARE_DUICONTROL(CVerticalLayoutExUI);
public:
	CVerticalLayoutExUI();

	void SetAttribute(LPCTSTR pstrName, LPCTSTR pstrValue);

	void DoPaint(HDC hDC, const RECT& rcPaint) override;

	bool Add(CControlUI* pControl);

private:
	bool OnControlReady(void*);
	bool LineUp(void* lpvoid);
	bool LineDown(void* lpvoid);

private:
	UINT32							m_iUpWidth;
	UINT32							m_iUpHeight;
	UINT32							m_iDownWidth;
	UINT32							m_iDownHeight;

	DuiLib::CButtonUI*				m_pBtnUp = nullptr;
	DuiLib::CButtonUI*				m_pBtnDown = nullptr;
	DuiLib::CTileLayoutUI*			m_pTileToolbar = nullptr;

	DuiLib::CDuiString				m_upImg;
	DuiLib::CDuiString				m_downImg;
};

.cpp

IMPLEMENT_DUICONTROL(CVerticalLayoutExUI)

CVerticalLayoutExUI::CVerticalLayoutExUI() {
	//m_bDrawScrollbar = false;
	CDialogBuilder builder;
	CVerticalLayoutUI *pItem = (CVerticalLayoutUI*)(builder.Create(TEXT("xml/controls/vertical_layout_ex.xml"), NULL, NULL, NULL));

	m_pBtnUp = reinterpret_cast<decltype(m_pBtnUp)>(pItem->FindSubControl(L"btn_vertical_layout_ex_up"));
	m_pBtnDown = reinterpret_cast<decltype(m_pBtnDown)>(pItem->FindSubControl(L"btn_vertical_layout_ex_down"));
	m_pTileToolbar = reinterpret_cast<decltype(m_pTileToolbar)>(pItem->FindSubControl(L"tile_vertical_layout_ex_toolbar"));

	ASSERT(m_pBtnUp);
	ASSERT(m_pBtnDown);
	ASSERT(m_pTileToolbar);
	
	OnInit += MakeDelegate(this, &CVerticalLayoutExUI::OnControlReady);
	m_pBtnUp->OnNotify += MakeDelegate(this, &CVerticalLayoutExUI::LineUp);
	m_pBtnDown->OnNotify += MakeDelegate(this, &CVerticalLayoutExUI::LineDown);

	CVerticalLayoutUI::Add(pItem);
}

void CVerticalLayoutExUI::SetAttribute(LPCTSTR pstrName, LPCTSTR pstrValue) {
	
	if (_tcsicmp(pstrName, _T("upimg")) == 0) {
		m_upImg = pstrValue;
	}
	else if (_tcsicmp(pstrName, _T("upsize")) == 0) {
		LPTSTR pstr = NULL;
		m_iUpWidth = _tcstol(pstrValue, &pstr, 10);  ASSERT(pstr);
		m_iUpHeight = _tcstol(pstr + 1, &pstr, 10);    ASSERT(pstr);
	}
	else if((_tcsicmp(pstrName, _T("downimg")) == 0)){
		m_downImg = pstrValue;
	}
	else if (_tcsicmp(pstrName, _T("downsize")) == 0) {
		LPTSTR pstr = NULL;
		m_iDownWidth = _tcstol(pstrValue, &pstr, 10);  ASSERT(pstr);
		m_iDownHeight = _tcstol(pstr + 1, &pstr, 10);    ASSERT(pstr);
	}

	CVerticalLayoutUI::SetAttribute(pstrName, pstrValue);
}

void CVerticalLayoutExUI::DoPaint(HDC hDC, const RECT& rcPaint){
	int height = GetHeight() - m_pBtnDown->GetFixedHeight() - m_pBtnUp->GetFixedHeight();
	m_pTileToolbar->SetFixedHeight(height);

	auto pScroll = m_pTileToolbar->GetVerticalScrollBar();
	if (pScroll) {
		if (pScroll->IsVisible()) {
			m_pBtnDown->SetVisible(true);
			m_pBtnUp->SetVisible(true);
		}
		else {
			m_pBtnDown->SetVisible(false);
			m_pBtnUp->SetVisible(false);
		}
	}

	CVerticalLayoutUI::DoPaint(hDC, rcPaint);
}

bool CVerticalLayoutExUI::Add(CControlUI* pControl) {
	if (m_pTileToolbar) {
		return m_pTileToolbar->Add(pControl);
	}

	return false;
}

bool CVerticalLayoutExUI::LineUp(void* lpvoid) {
	TNotifyUI* pNotifyUI = (TNotifyUI*)lpvoid;
	if (!pNotifyUI) return false;

	if (pNotifyUI->sType != DUI_MSGTYPE_CLICK) return false;

	if (m_pTileToolbar) {
		m_pTileToolbar->LineUp();
	}

	return true;
}

bool CVerticalLayoutExUI::LineDown(void* lpvoid) {
	TNotifyUI* pNotifyUI = (TNotifyUI*)lpvoid;
	if (!pNotifyUI) return false;

	if (pNotifyUI->sType != DUI_MSGTYPE_CLICK) return false;

	if (m_pTileToolbar) {
		m_pTileToolbar->LineDown();
	}

	return true;
}

bool CVerticalLayoutExUI::OnControlReady(void*) {
	//控件本身的滚动条宽度也要设置成0
	SetAttribute(L"vscrollbar", L"true");

	auto scroll = GetVerticalScrollBar();
	if (scroll) {
		scroll->SetFixedWidth(0);
	}

	//不能直接隐藏滚动条，只能强制把宽度设置成0
	scroll = m_pTileToolbar->GetVerticalScrollBar();
	if (scroll) {
		scroll->SetFixedWidth(0);
	}

	if (m_pBtnUp) {
		m_pBtnUp->SetFixedWidth(m_iUpWidth);
		m_pBtnUp->SetFixedHeight(m_iUpHeight);
		m_pBtnUp->SetBkImage(m_upImg);
	}

	if (m_pBtnDown) {
		m_pBtnDown->SetFixedWidth(m_iDownWidth);
		m_pBtnDown->SetFixedHeight(m_iDownHeight);
		m_pBtnDown->SetBkImage(m_downImg);
	}

	return true;
}

.xml

<?xml version="1.0" encoding="utf-8"?>
<Window>
  <VerticalLayout childalign="center" >
    <Button name="btn_vertical_layout_ex_up" cursor="hand" height="22" width="22" bkimage="playUI/btn_page_up.png" />
    
	<TileLayout name="tile_vertical_layout_ex_toolbar" vscrollbar="true">
		
	</TileLayout>
	
    <Button name ="btn_vertical_layout_ex_down" cursor="hand" height="22" width="22" bkimage="playUI/btn_page_down.png" />
  </VerticalLayout>
</Window>