The method that I would use when updating a custom UI for the 12/9 buff window changes is to use a TileLayoutBox for each set of elements and have the boxes "layered" on top of each other.
For instance, you have a window that has buttons, spell labels, and slot labels and it should look something like this.
Image courtesy of tumnayar-MT
The button is the blue part and the timer, the spell label is name of the spell "Flight of the Eagles" and etc., and the slot label are the numbers along the right hand side.
In the Screen tag I created three TileLayoutBox'es.
Code:
<Pieces>TileLayoutBox:BW_Places</Pieces>
<Pieces>TileLayoutBox:BW_Buttons</Pieces>
<Pieces>TileLayoutBox:BW_Labels</Pieces>
Inside those boxes I places the appropriate pieces tags into those boxes.
Code:
<TileLayoutBox item="BW_Buttons">
<Pieces>BW_Buff0_Button</Pieces>
... (truncated for brevity)
</TileLayoutBox>
Then I made sure that the Labels and Places boxes would be transparent for backgrounds and mouse clicks. This was done by putting in the Style_Tooltip tag into the TileLayoutBox'es that weren't the buttons.
So, the final code snippet for the BW_Labels box looked something like:
Code:
<TileLayoutBox item="BW_Labels">
<RelativePosition>true</RelativePosition>
<AutoStretch>true</AutoStretch>
<BottomAnchorToTop>false</BottomAnchorToTop>
<RightAnchorToLeft>false</RightAnchorToLeft>
<Style_Transparent>true</Style_Transparent>
<Spacing>0</Spacing>
<SecondarySpacing>0</SecondarySpacing>
<HorizontalFirst>false</HorizontalFirst>
<AnchorToTop>true</AnchorToTop>
<AnchorToLeft>false</AnchorToLeft>
<FirstPieceTemplate>true</FirstPieceTemplate>
<Style_Tooltip>false</Style_Tooltip>
<Pieces>BW_Buff0</Pieces>
... (truncated for brevity)
</TileLayoutBox>
and the screen tag looked something like this.
Code:
<Screen item = "BuffWindow">
<Text></Text>
<RelativePosition>false</RelativePosition>
<Location>
<X>496</X>
<Y>224</Y>
</Location>
<Size>
<CX>130</CX>
<CY>285</CY>
</Size>
<Style_VScroll>false</Style_VScroll>
<Style_HScroll>false</Style_HScroll>
<Style_Transparent>true</Style_Transparent>
<DrawTemplate>WDT_Inner</DrawTemplate>
<Style_Titlebar>false</Style_Titlebar>
<Style_Closebox>false</Style_Closebox>
<Style_Minimizebox>false</Style_Minimizebox>
<Style_Border>false</Style_Border>
<Style_Sizable>false</Style_Sizable>
<Pieces>TileLayoutBox:BW_Places</Pieces>
<Pieces>TileLayoutBox:BW_Buttons</Pieces>
<Pieces>TileLayoutBox:BW_Labels</Pieces>
</Screen>
I hope this helps all of you other UI modders out there looking for a way to modify your effects and songs windows.
