Image

Definierad i Dynamix.Content5.Controls

Kontrollen Image används för att rita ut Dynamix-baserade eller andra bilder.

  1. protected override void CreateChildControls()
  2. {
  3. ...
  4. var image = new Dynamix.Content5.Controls.Image();
  5. Controls.Add( image );
  6. var source = new Dynamix.Media.WebFileImageSource(
  7. "/Files/Images/180/flower1.jpg",
  8. new Size( 180, 135 )
  9. );
  10. image.InitFromSource( source );
  11. ...
  12. }

Resulterar i markupen:

  1. <img src="/Files/Images/180/flower1.jpg" style="width:180px;height:135px;" class="dxImage" alt="" />

Metoden InitFromSource initierar bildkontrollen från det inskickade objektet om det stöder intefacet IImageSource, IImageSourceProvider eller IImageInfo.

I detta fall användes en statisk bild direkt från filsystemet. I de flesta sammanhang använder man en redaktörsinställd bild, ofta av typen Dynamix.Media.Image. Läs mer om detta under Bilder och Bildhantering.

Länkade bilder

För att länka bilden kan egenskaper sättas på Hyperlink-kontrollen som exponeras via egenskapen Link.

  1. image.Link.Href = "http://www.dynamixmcs.se";
  2. image.Link.Target = "_blank";

Om href-egenskapen är satt kommer kontrollen att rendera en a-tag runt bilden:

  1. <a href="http://www.dynamixmcs.se" target="_blank" class="dxImageLink">
  2. <img src="/Files/Images/180/flower1.jpg" style="width:180px;height:135px;" class="dxImage" alt="" />
  3. </a>

Storleksbegränsning och transformer

Bild roterad 10 grader

Egenskaperna MaxWidth och MaxHeight kan användas för att begränsa bildens storlek i bredd respektive höjdled. Bildens proportioner kommer att bevaras.

Andra transformer kan läggas till via egenskapen Transforms, exempelvis:

  1. image.Transforms.Add( new RotateImageTransform( 10 ) );

Det går också att ange total bildyta med egenskaperna BoxHeight och BoxWidth. Om någon av dessa sätts till ett värde större än 0 kommer en extra nivå av markup att generas och bilden kommer att placeras inuti denna med hjälp av explicita marginaler:

  1. image.BoxWidth = 200;
  2. image.BoxHeight = 200;
  3. image.MaxWidth = 200;
  4. image.MaxHeight = 100;
  5. image.BoxWrapper.Style[ "border" ] = "solid green 1px";

Resulterar i:

  1. <div class="dxImageBox" style="border:solid green 1px;width:200px;height:200px;">
  2. <img src="/DynamixPublic/Media/GetImage.ashx?CacheKey=38abca14ab60909a1539345728d51c7ad686eaee" style="width:100px;height:75px;margin-top:62px;margin-bottom:63px;margin-left:50px;margin-right:50px;" class="dxImage" alt="" />
  3. </div>

Notera att adressen till bilden nu är "/DynamixPublic/Media/GetImage.ashx?CacheKey=..." och inte en statisk fil. Anledningen är MaxWidth/MaxHeight att Dynamix har skapat och sparat en nerskalad version på servern.

Bilden kan justeras inom ytan med HorizontalAlign och VerticalAlign. För att generera marginaler men ingen omgivande markup kan exempelvis BoxWrapper.RenderMode sättas till Never.

Databindning

Egenskapen DataSource kan sättas till alla objekt som implementerar IImageInfo, IImageSource eller IImageSourceProvider. Vid anrop till DataBind körs InitFromSource med värdet av DataSource.