duilib duilib Concise Guide to Getting Started tutorial 8. The complete painting from the title bar

Read front of so many tutorials , I believe duilib existing base image, and we can speed up, to make a complete painting from the title bar of it - see the following renderings, little friends are a bit shocked it ~ O (∩ _ ∩) O ~

 
    duilib achieve the above effect is very simple,
　　1, the button image folder into the directory exe,   SysBtn.zip  (3.27 KB, Downloads: 133)    
　　2, main.cpp code without changes, only need to change XML, XML follows (subject to the page width restrictions, the following XML format a bit chaotic, copy to a local XML editor for easy viewing):

1. <?xml version="1.0" encoding="UTF-8"?>
2. <Window size = "800,600" mininfo = "600,400" caption = "0,0,0,32" sizebox = "4,4,4,4"> <-! Initial window size (width 800, high 600) smallest dimension (width 600, high 400) window, dragging the title bar area (32 high), can drag the border size (herein after adding sizebox can drag the border resize) ->
3.     <VerticalLayout bkcolor = "# FFF0F0F0" bkcolor2 = "# FFAAAAA0"> <-! Entire window background color ->
4.         <-! Title bar area ->
5.         <HorizontalLayout height = "32" bkcolor = "# FFE6E6DC" bkcolor2 = "# FFAAAAA0"> <-! Title bar background color bkcolor, bkcolor2, bkcolor3 are three values ​​of the gradient ->         
6.             <VerticalLayout /> <-! Occupy space, occupying all the space left ->
7.             <VerticalLayout width = "77"> <-! Width occupied by three controls on the right ->
8.                 <Button name="minbtn"   tooltip="最小化" float="true" pos="0,5,22,24"  width="23" normalimage=" file='SysBtn\MinNormal.bmp' " hotimage=" file='SysBtn\MinFocus.bmp' " pushedimage=" file='SysBtn\MinFocus.bmp' "/>
9.                 <Button name="maxbtn"   tooltip="最大化" float="true" pos="22,5,44,24" width="23" normalimage=" file='SysBtn\MaxNormal.bmp' " hotimage=" file='SysBtn\MaxFocus.bmp' " pushedimage=" file='SysBtn\MaxFocus.bmp' " />
10.                 <Button name="restorebtn" visible="false" tooltip="还原" float="true" pos="22,5,44,24" width="23" normalimage=" file='SysBtn\StoreNormal.bmp' " hotimage=" file='SysBtn\StoreFocus.bmp' " pushedimage=" file='SysBtn\StoreFocus.bmp' " />
11.                 <Button name="closebtn" tooltip="关闭"   float="true" pos="44,5,74,24" width="28" normalimage=" file='SysBtn\CloseNormal.bmp' " hotimage=" file='SysBtn\CloseFocus.bmp' " pushedimage=" file='SysBtn\CloseFocus.bmp' "/>
12.             </VerticalLayout>      
13.         </HorizontalLayout>
14.         
15.         <! - client area ->
16.         <HorizontalLayout>
17.         <Button name="btnHello" text="Hello World"/>
18.     </HorizontalLayout>
19.     </VerticalLayout>
20. </Window>

Copy the code

   XML which added only 20 lines of code, a complete title bar actually is complete! Try not to drag the title bar, you can try to maximize not, try not prompted article, try not to vary the appearance of the button, you can try to drag the border to resize the window does not?
    Must all OK!
    Although we did not deal with the above message, but many functions have been achieved, because WindowImplBase we are ready to help.
    After the small partners, inherited WindowImplBase, my mother no longer have to worry about my friends interface ~ O (∩_∩) O haha ~

    Although XML which has very detailed notes, and in view of the problem appears more than once in the group, so or snooze again:
    the following questions are <Window> XML node in the second row to add.
1. Why can not drag the title bar?
    You need to add a node in the <Window> caption = "0,0,0,32" , where the 32 refers to the height of the title bar
2, how to make the window size can be adjusted by dragging?
    Add the node to <Window> sizebox = "4,4,4,4" , here refers to the range of the mouse 4 is moved to the bezel 4 pixels, dragging the mouse will display style, then the window size can be adjusted the


    Alberl explained below one by one under the meaning of XML code. Most places have a significant comment, is HorizontalLayout, VerticalLayout and Button's style to explain the focus.
    This section describes the first Button's style, we can see the Close button in addition to hover there are different looks, as well as a tooltip. These are specified in this line of code:

3. <Button name="closebtn" tooltip="关闭"   float="true" pos="44,5,74,24" width="28" normalimage=" file='SysBtn\CloseNormal.bmp' " hotimage=" file='SysBtn\CloseFocus.bmp' " pushedimage=" file='SysBtn\CloseFocus.bmp' "/>

Copy the code

Where:
name = "closeBtn" unique identification button, the other buttons name not its repetition
tooltip = "Off" is the tooltip text
float = position "true" representative of the buttons is absolute positioning, the location specified by the pos attribute
pos = "44,5,74,24" button representing the position matrix, the matrix are left, top, right, bottom four points
width = "28" width of the button representing the image displayed (this may not be filled, but because there is no button image well, if you do not fill it, the picture will be stretched a bit distorted)
normalimage representative picture of the path of the normal state of buttons displayed
hotimage representatives hover, the button displays the image path     
image path pushedimage behalf mouse click the button, the button displayed