<mx:VBox xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="left" width="100%" height="100%">
	<mx:Script>
		<![CDATA[
		
			[Embed(source="../../../../Assets/Images/PanelImages/PanelBackgroundSkin.png")]
			public var panelSkinPng:Class;
			
			[Bindable]
			[Embed(source="../../../../Assets/Images/smallredrect.jpg")]
			public var ticon:Class;
		]]>
	</mx:Script>
	<mx:Style> 
	@namespace "library://ns.adobe.com/flex/mx";
		.myPanel
		{   
			borderSkin: ClassReference("component_Panel_Png_BorderSkin_panelSkinPng");
		} 
	</mx:Style>
	<mx:Panel id="myPanelBSpng" titleIcon="{ticon}" width="550" height="400" title="Title" status="{String(myBtnpng.width)}" styleName="myPanel" paddingBottom="40" paddingLeft="25" paddingTop="60" paddingRight="25" color="white" headerHeight="60" >
	<mx:Canvas width="100%" height="100%" borderStyle="solid" borderColor="red">
	<mx:Button id="myBtnpng" width="{myhsbs.value}" label="My Button" />
	<mx:Button label="Center Button" horizontalCenter="0" verticalCenter="0"  />
	</mx:Canvas>
	<mx:ControlBar>
		<mx:HSlider id="myhsbs" minimum="0" maximum="800" value="100" width="100%" snapInterval="2"/>
	</mx:ControlBar>
	</mx:Panel>
	<mx:Button id="BtnPng" label="Change Panel Height and Width" click="myPanelBSpng.width=500 ;myPanelBSpng.height=400;" />
</mx:VBox>