Yesterday I was trying to create some custom MUI frames but despite my efforts I couldn't find the logic adopted,even by analizing the supplied ones... it's ok that each png contains three elements of the same size with respective alpha channel but the result is unpredictable. The result is always scaled or cropped or replicated in a way which is never the one I am expecting. To the point that even trying to create a simple rectangular frame, for testing purposes, doesn't give the expected result. In particular I can't figure out easily the purpose of the third picture and its alpha.

Is there any tutorial or text covering the topic out there ? Thanks.

MUI frames consist of 3 elements that are each split into 9 equally sized tiles.

The center tile is ignored. As one might expect, the 4 corner tiles are used as-is to paint the frame corners and the remaining 4 tiles are dynamically scaled / repeated to construct the sides of the frames depending on how wide or tall the associated UI element is supposed to be.

As for the three frame elements, the first one is the "default state", the second one is the "selected / active state" (i.e. a pressed button) and the third one handles the transparency of the area sitting below the frame, which may be filled with gradients, bitmap or simple color backgrounds. It should be noted that the masking of the third element is limited to a "1 bit" palette, so you may only use black (rgb(0,0,0) / #000) or white (rgb(255,255,255) / #fff), i.e. no greytones.

For a better understanding, it helps to visualize framed UI elements as consisting of 3 transparent sheets of paper that are stacked on top of each other. The bottom sheet of paper contains the background colors and patterns. In the middle, you have another sheet of paper that contains the actual frame. On top, you have a sheet paper that features the content of the UI element such as a button label (i.e. text), etc.

Please note that the resolution of frame images is crucial as is the exact positioning of the frame elements. Obviously, the width of the entire image and each of the three elements must be divisible by 3. Also, if elements are misplaced or wrongly sized, this can cause various issues. If your frame graphic is exactly 72 pixels wide, you must ensure that each element is precisely 24 pixels wide and that there is no overlap (such as barely visible frame graphics extending into the 1-bit mask area on the far right).