Calculation of the internal container size of the Flex panel control

Key words: Flex, panel, viewmetrics

In Flex, the panel control is a special container control. This control looks like a window because it has a title bar and a border. The actual use area is the internal white area. The width attribute and

The height attribute includes borders. Sometimes we need to know the internal container size accurately. There is no good way, only 1.1 points to try, try out the border size, it is very troublesome, and when the panel control

After the style is changed, the Border width may change. Is there any way to accurately know the size of the border.
Fortunately, we accidentally discovered a viewmetrics attribute of the panel control, which is an edgemetrics object, which has four attributes: Left, right, top, and bottom, the four attributes Save the upper and lower left

The value of the right border. Based on these four values, you can easily obtain the size of the valid part in the panel container.
Here is a small example:
<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml" layout = "absolute"> <br/> <mx: SCRIPT> <br/> <! -- [CDATA [<br/> Import MX. events. flexevent; <br/> Import MX. controls. image; <br/> private var IMG: image; <br/> private function onclick (): void <br/>{< br/> IMG = new image (); <br/> IMG. source = "image. PNG "; <br/> panel. addchild (IMG); <br/>}< br/> private function onclick2 (): void <br/>{< br/> panel. width = IMG. width + panel. viewmetrics. left + panel. viewmetrics. right; <br/> panel. height = IMG. height + panel. viewmetrics. top + panel. viewmetrics. bottom; <br/>}< br/>] --> <br/> </MX: SCRIPT> <br/> <mx: panel id = "Panel" x = "133" Y = "98" width = "398" Height = "360" layout = "absolute"> <br/> </MX: panel> <br/> <mx: button x = "133" Y = "52" label = "showpicture" Click = "onclick () "/> <br/> <mx: button x =" 362 "Y =" 52 "label =" resizepanel "Click =" onclick2 () "/> <br/> </MX: Application>

In this example, press the showpicture button to add an image to the Panel. If the Panel size is not changed, the scroll bar appears and the image is incomplete. 1:

Figure 1

Next, press the resizepanel button to adjust the Panel size. In this example, the viewmetrics attribute is used to dynamically adjust the Panel size.
In this way, the entire image is displayed completely. 2:

Figure 2