America/US Samples
Europe Samples
Asia Samples

Gaia Ajax: DynamicImage

A Gaia Ajax DynamicImage can be thought of like a "normal" image except that it has no src attribute. Instead it has the capability of "dynamically render" its image through a publically available event. The DynamicImage has an event called RetrieveImage which will be called when it's time to "update" the image control with new "image data". From this event you can construct a System.Drawing.Bitmap object which will be rendered onto the surface of your DynamicImage. This makes it very easy to e.g. create a Captcha Control or render images which only exist in your database etc.


Select Image:
Zoom (68.0 %)

Description

 

Markup (ASPX/.aspx)

   1:   
   2:      <br style="clear:both;" />
   3:      <div style="float:left; width: 65%; height: 50px;">
   4:          Select Image: <br />
   5:          <gaia:DropDownList 
   6:              Width="240"
   7:              runat="server" 
   8:              ID="ddl" 
   9:              AutoPostBack="true" 
  10:              OnSelectedIndexChanged="ddl_SelectedIndexChanged">
  11:          </gaia:DropDownList>
  12:          <gaia:Button ID="uploadImageButton" runat="server" Text="Upload Image" OnClick="uploadImageButton_Click" /> 
  13:      </div>
  14:      <div style="float:left; width: 30%; height: 50px;">
  15:          Zoom (<gaia:Label ID="lblResult" runat="server" Text="50.0 %" />)
  16:          <br/>
  17:          <gaia:Slider 
  18:              runat="server" 
  19:              ID="slider" 
  20:              Width="200px"
  21:              OnValueChanged="slider_ValueChanged" />
  22:      </div>
  23:      <br style="clear:both;" />
  24:      <gaia:Panel 
  25:          runat="server" 
  26:          ID="mapWrapper" 
  27:          Width="200px"
  28:          Height="200px"
  29:          style="float:left; border:solid 5px #777; overflow:hidden; position:relative;">
  30:          <gaia:DynamicImage 
  31:              runat="server" 
  32:              ID="map" 
  33:              AltText="" 
  34:              style="cursor:move;-moz-user-select:none;"
  35:              OnRetrieveImage="map_RetrieveImage" />
  36:      </gaia:Panel>
  37:   
  38:      <gaia:Image 
  39:          runat="server" 
  40:          ID="descriptionImage" 
  41:          style="float:left;"
  42:          ImageUrl="resizeMe.png" 
  43:          AlternateText="Description" />
  44:      <br style="clear:both;" />
  45:      <gaia:Label 
  46:          runat="server" 
  47:          ID="mapCoords" />
  48:          
  49:      <gaia:Window 
  50:          ID="winFileUpload" 
  51:          runat="server" 
  52:          Caption="Upload Image" 
  53:          OpacityWhenMoved="1"
  54:          Closable="true"
  55:          Visible="false"
  56:          Maximizable="false"
  57:          Minimizable="false"
  58:          Resizable="false"
  59:          Draggable="false"
  60:          Height="300px"
  61:          Width="300px"
  62:          ScrollBars="Auto"
  63:          CenterInForm="true">
  64:      
  65:          <gaia:FileUpload 
  66:              id="fileUpload" 
  67:              runat="server"
  68:              Width="100%"
  69:              OnFileUploaded="fileUpload_OnFileUploaded"
  70:              OnUploadFinished="fileUpload_OnUploadFinished" 
  71:              ImgLoadingSrc="" 
  72:              MakeCallback="true" 
  73:              MaxFiles="1">
  74:              
  75:          </gaia:FileUpload>
  76:          
  77:      </gaia:Window>
  78:          
  79:    
  80:   
  81: