的TileList项目显示

Question

我使用Flex 4

当我点击TileList中的一个项目我已经创建了一个TileList中图片库，我想通过图像的TileList中的一个BitmapImage的侧面来显示。

任何人都可以帮助我吗？

看我的代码下面。现在，该图像被加载到PopUp中。我希望它显示在BitmapImage框中。

<?xml version="1.0" encoding="utf-8"?> 
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ --> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
     layout="vertical" 
     verticalAlign="middle" 
     backgroundColor="white" viewSourceURL="srcview/index.html" xmlns:s="library://ns.adobe.com/flex/spark"> 

    <mx:Style> 
     global { 
      modal-transparency: 0.9; 
      modal-transparency-color: white; 
      modal-transparency-blur: 9; 
     } 
    </mx:Style> 

    <mx:Script> 
     <![CDATA[ 
      import flash.utils.flash_proxy; 

      import mx.controls.Image; 
      import mx.effects.Resize; 
      import mx.events.ItemClickEvent; 
      import mx.events.ListEvent; 
      import mx.events.ResizeEvent; 
      import mx.managers.PopUpManager; 

      private var img:Image; 

      private function tileList_itemClick(evt:ListEvent):void { 
       img = new Image(); 
       // img.width = 300; 
       // img.height = 300; 
       img.maintainAspectRatio = true; 
       img.addEventListener(Event.COMPLETE, image_complete); 
       img.addEventListener(ResizeEvent.RESIZE, image_resize); 
       img.addEventListener(MouseEvent.CLICK, image_click); 
       img.source = evt.itemRenderer.data.@fullImage; 
       img.setStyle("addedEffect", image_addedEffect); 
       img.setStyle("removedEffect", image_removedEffect); 
       PopUpManager.addPopUp(img, this, true); 

      } 

      private function image_click(evt:MouseEvent):void { 
       PopUpManager.removePopUp(evt.currentTarget as Image); 
      } 

      private function image_resize(evt:ResizeEvent):void { 
       PopUpManager.centerPopUp(evt.currentTarget as Image); 
      } 

      private function image_complete(evt:Event):void { 
       PopUpManager.centerPopUp(evt.currentTarget as Image); 
      } 
     ]]> 
    </mx:Script> 

    <mx:WipeDown id="image_addedEffect" startDelay="100" /> 

    <mx:Parallel id="image_removedEffect"> 
     <mx:Zoom /> 
     <mx:Fade /> 
    </mx:Parallel> 

    <mx:XML id="xml" source="gallery.xml" /> 
    <mx:XMLListCollection id="xmlListColl" source="{xml.image}" /> 

    <mx:TileList id="tileList" 
      dataProvider="{xmlListColl}" 
      itemRenderer="CustomItemRenderer" 
      columnCount="4" 
      columnWidth="125" 
      rowCount="2" 
      rowHeight="100" 
      verticalScrollPolicy="on" 
      itemClick="tileList_itemClick(event);" /> 

    <s:BitmapImage id="bit" width="100%" height="100%"/> 

</mx:Application> 

感谢

Answer 1

尝试使用类似：

<?xml version="1.0" encoding="utf-8"?> 
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ --> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
     layout="vertical" 
     verticalAlign="middle" 
     backgroundColor="white" viewSourceURL="srcview/index.html" xmlns:s="library://ns.adobe.com/flex/spark"> 

    <mx:Style> 
     global { 
      modal-transparency: 0.9; 
      modal-transparency-color: white; 
      modal-transparency-blur: 9; 
     } 
    </mx:Style> 

    <mx:XML id="xml" source="gallery.xml" /> 
    <mx:XMLListCollection id="xmlListColl" source="{xml.image}" /> 

    <mx:TileList id="tileList" 
      dataProvider="{xmlListColl}" 
      itemRenderer="CustomItemRenderer" 
      columnCount="4" 
      columnWidth="125" 
      rowCount="2" 
      rowHeight="100" 
      verticalScrollPolicy="on" /> 

    <mx:Image id="bit" width="100%" height="100%" source="{tileList.selectedItem.@fullImage}"/> 

</mx:Application>