Duilib list control Extension

Previous generations of simple list controls have analyzed the entire listres process of their own demos. A simple example in the duilib directui library is listdemo,

He analyzed the ins and outs of listdemo. Here I will analyze the list that I understand.

Because the built-in listdemo does not meet the requirements, you must expand the list by trying to find

1. The list header cannot be dragged.

This situation is simple. You can set the header width and element width to the same When configuring XML. The listheader layout is as follows:

<List name="domainlist" bkcolor="#FFFFFFFF" inset="0,0,0,0" itemshowhtml="true" vscrollbar="true" hscrollbar="true" headerbkimage="file='list_header_bg.png'" itemalign="center" itembkcolor="#FFE2DDDF" itemaltbk="true" hscrollbar="false" menu="true"><ListHeader height="24" menu="true"><ListHeaderItem text="No" font="1" width="130" hotimage="file='list_header_hot.png'" pushedimage="file='list_header_pushed.png'" sepimage="file='list_header_sep.png'" sepwidth="1"/><ListHeaderItem text="Domain" font="1" width="160" hotimage="file='list_header_hot.png'" pushedimage="file='list_header_pushed.png'" sepimage="file='list_header_sep.png'" sepwidth="1"/><ListHeaderItem text="Description" font="1" width="140" hotimage="file='list_header_hot.png'" pushedimage="file='list_header_pushed.png'" sepimage="file='list_header_sep.png'" sepwidth="1"/></ListHeader></List>

The above is the XML provided by listdemo, but the width of listheaderitem is modified.

The listelement layout is as follows:

<?xml version="1.0" encoding="utf-8" standalone="yes" ?><Window>    <HorizontalLayout width="266" height="60" bkcolor="#FFD2D2D2" >        <HorizontalLayout width="130" height="60" bordersize="1" bordercolor="#FF00FF00"><HorizontalLayout /><VerticalLayout width="32"><HorizontalLayout /><Label name="listmem1" text="111" align="center" float="false" bkcolor="#FFFFFFFF" pos="22,0,0,0" width="32" height="18" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" /><HorizontalLayout /></VerticalLayout><HorizontalLayout />        </HorizontalLayout>        <VerticalLayout width="160" height="60" bordersize="1" bordercolor="#FF00FF00">            <Label name="listmem2" text="222" align="center" float="true" bkcolor="#FFFFFFFF" pos="17,7,0,0" width="51" height="15" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" />        </VerticalLayout>        <VerticalLayout width="140" height="60" bordersize="1" bordercolor="#FF00FF00">            <Edit name="listmem3" text="333" float="true" pos="10,7,0,0" width="61" height="15" bkcolor="#FFFFFFFF" textpadding="4,3,4,3" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" />            <Button float="true" pos="18,29,0,0" width="72" height="24" textcolor="#FF000000" disabledtextcolor="#FFA7A6AA" align="center" normalimage="file='offline_down.png' source='0,0,72,24'" hotimage="file='offline_down.png' source='0,24,72,48'" pushedimage="file='offline_down.png' source='0,48,76,72'" />        </VerticalLayout>    </HorizontalLayout></Window>

Add the following code when using it:

I directly modified the listdemo,

Block the original onsearch function and add the following code:

CDialogBuilder builder;CVerticalLayoutUI *plist_element = static_cast<CVerticalLayoutUI*>( builder.Create( _T("listmem1.xml") , 0 , NULL , &m_pm , NULL ) );CListUI *plist = static_cast< CListUI* >( m_pm.FindControl("domainlist") );if ( !plist ){return ;}plist->Add(plist_element);

Finally, start the program and obtain the following interface.

2. The list header can be dragged

If you directly use clistcontainerelementui, the following layout will appear.

We can see that the location is completely messy. The function used to check the location layout through the source code is

void SetPos(RECT rc);

This function is not provided in clistcontainerelementui, that is, the setpos function of ccontainerui is called.

Setpos function of ccontainerui

Void ccontainerui: setpos (rect RC) {ccontrolui: setpos (RC); If (m_items.isempty () return; RC. left + = m_rcinset.left; RC. top + = m_rcinset.top; RC. right-= m_rcinset.right; RC. bottom-= m_rcinset.bottom; For (INT it = 0; it <m_items.getsize (); It ++) {ccontrolui * pcontrol = static_cast <ccontrolui *> (m_items [it]); if (! Pcontrol-> isvisible () continue; If (pcontrol-> isfloat () {setfloatpos (it);} else {pcontrol-> setpos (RC ); // all non-float subcontrols are zoomed in to the entire customer zone }}}

Directly set the RC to the sub-control. That is to say, the width of each column of listcontainerelement is the same. The second column is overwritten by the third column, and the first column is centered.

The layout of the duilib control is set by the parent control. The parent control only controls its own child control. As shown in

Root only manages root1 and root2 at the next layer, and the rest are irrelevant to him.

Root1 manages root3 and root4, and root2 manages root5 and root6.

The parent node here is an icontainerui control or a class that inherits from the icontainerui control. The leaf node is generally a ccontrolui class or a class that inherits from ccontrolui.

Therefore, we need to add the setpos function in listcontainerelement.

void CListContainerElementUI::SetPos(RECT rc){CControlUI::SetPos(rc);rc = m_rcItem;// Adjust for insetrc.left += m_rcInset.left;rc.top += m_rcInset.top;rc.right -= m_rcInset.right;rc.bottom -= m_rcInset.bottom;TListInfoUI *plistinfo = GetOwner()->GetListInfo();// Determine the width of elements that are sizeableSIZE szAvailable = { rc.right - rc.left, rc.bottom - rc.top };for( int it2 = 0; it2 < m_items.GetSize(); it2++ ){CControlUI* pControl = static_cast<CControlUI*>(m_items[it2]);if( !pControl->IsVisible() ) continue;if( pControl->IsFloat() ) {SetFloatPos(it2);continue;}RECT rcPadding = pControl->GetPadding();SIZE sz = pControl->EstimateSize(szAvailable);if( sz.cx == 0 ) {if( sz.cx < pControl->GetMinWidth() ) sz.cx = pControl->GetMinWidth();if( sz.cx > pControl->GetMaxWidth() ) sz.cx = pControl->GetMaxWidth();}else {if( sz.cx < pControl->GetMinWidth() ) sz.cx = pControl->GetMinWidth();if( sz.cx > pControl->GetMaxWidth() )sz.cx = pControl->GetMaxWidth();}sz.cy = pControl->GetFixedHeight();if( sz.cy == 0 ) sz.cy = rc.bottom - rc.top - rcPadding.top - rcPadding.bottom;if( sz.cy < 0 ) sz.cy = 0;if( sz.cy < pControl->GetMinHeight() ) sz.cy = pControl->GetMinHeight();if( sz.cy > pControl->GetMaxHeight() ) sz.cy = pControl->GetMaxHeight();RECT rcCtrl = { plistinfo->rcColumn[it2].left + rcPadding.left,rc.top + rcPadding.top,plistinfo->rcColumn[it2].right + rcPadding.left, rc.top + sz.cy + rcPadding.top + rcPadding.bottom };pControl->SetPos(rcCtrl);}}

The code here mainly comes from chorizontallayoutui, which deletes the code that I think is not needed. Of course, I have only been in touch with it for a month, and may also delete some more.

Rewrite the onsearch Function

CDialogBuilder builder;CListContainerElementUI *plist_element = static_cast<CListContainerElementUI*>( builder.Create( _T("listmem.xml") , 0 , NULL , &m_pm , NULL ) );if ( !plist_element ){return ;}if ( !plist ){return ;}plist->Add(plist_element);

Now we can see the drag effect.

Directly, the original graph.

Drag chart

Duilib list control Extension