Duilib Tutorial-Automatic Layout 3-Separator Bar

Let's look at a commonly used diagram, as follows:

On the left is the navigation bar and the right is the information area.

The middle is free to stretch.

The XML is as follows:

<?XML version= "1.0" encoding= "Utf-8" standalone= "yes"?><Windowsize= "695,542">    <Horizontallayoutwidth= "695"Height= "542"Bkcolor= "#FFA0A0A4">        <Horizontallayoutwidth= "$"Bkcolor= "#FF008080"sepwidth= "6" sepimm= "true" />        <HorizontallayoutBkcolor= "#FFA6CAF0" />    </Horizontallayout></Window>

Sepwidth are all called seperator widths, and the width of the separator bar. This value is positive, negative , positive indicates that the separator bar is on the right, and negative values indicate that the divider is on the left.

Sepimm all called separate immediately, immediately stretched, that is, the mouse one move, immediately set layout size.

Duilib seems to have a bug, that is, when the left side is dragged to 0 o'clock width, it is automatically reverted to its original size. In order to solve this bug, we need to set its minimum width, minwidth= "1", so that the bug does not exist.

When solving this bug, you already know how to limit the size of the left layout, maxwidth, if you set this property, specify the maximum width, then it will be limited to a certain size. The following XML allows the reader to test:

<?XML version= "1.0" encoding= "Utf-8" standalone= "yes"?><Windowsize= "695,542">    <Horizontallayoutwidth= "695"Height= "542"Bkcolor= "#FFA0A0A4">        <HorizontallayoutMinWidth= " the"MaxWidth= "+"width= "$"Bkcolor= "#FF008080"Sepwidth= "6"Sepimm= "true" />        <HorizontallayoutBkcolor= "#FFA6CAF0" />    </Horizontallayout></Window>

Here's a very important rule to illustrate:

If the separator bar is a vertical bar, |, the Divider property is Sepwidth, its layout must be horizontallayout, that is, horizontal layout, because it is only reasonable for horizontal layout to be stretched horizontally.

If the separator bar is a horizontal bar, one, the divider property is Sepheight, its layout must be verticallayout, that is, vertical layout, because only vertical layout is stretched vertically is reasonable.

So, in the XML above, if you change the layout on the left to Verticallayout, you will find that the separator bar is invalid because verticallayout has no sepwidth property at all.

When setting the bar of a bar, you need to set the MinHeight, MaxHeight property so that it is easy to control its size. Sepheight is a positive time, indicating that the separator bar is below, negative, above.

Now I'm pasting an XML with a top-down, left-right divider, with both positive and negative values.

Xml:

<?XML version= "1.0" encoding= "Utf-8" standalone= "yes"?><Windowsize= "695,542">    <Horizontallayoutwidth= "695"Height= "542"Bkcolor= "#FFA0A0A4">        <Horizontallayoutsepwidth= "5" sepimm= "false" Minwidth= "Maxwidth="width= "137"Bkcolor= "#FF008080" />        <Verticallayout>            <VerticallayoutBkcolor= "#FF103A78" />            <VerticallayoutBkcolor= "#FF5D4425"minheight= "sepheight="-5 "sepimm=" true "/>        </Verticallayout>    </Horizontallayout></Window>

Duilib Tutorial-Automatic Layout 3-Separator Bar