.net - How to add text in Deep Zoom Composer? -

i want compose own project in deep zoom composer know on how add text per image zoomed in hard rock memorabilia

i want consume it, using silverlight 4.0

as notice, under right pane, has description image.

thank you.

this http://www.freeimagehosting.net/uploads/43b14a3d53.png

this doable. i've done similar , worked great. following example show information specific clicked image. can modify depending on if want information dispayed on mouseover, click, or when zoomed. it's entirely you.

first off, add multiscaleimage canvas...

<multiscaleimage  x:name="deepzoomobject" source="/generatedimages/dzc_output.xml" /> 

...and somewhere else on canvas, add textblock used display information:

<textblock x:name="tbinfo" /> 

next, create class hold information each "tile", add dummy information, , add bunch of tiles list:

    public class tiledetail {        public int index { get; set; }         public string tilename { get; set; }     }     //the index 0 based index of images.  depends on index created deepzoomcomposer.  1 piece of information absolutely need know.  believe index based on order images added deepzoomcomposer test make sure.     list<tiledetail> tiledetailslist = new list<tiledetail>();     titledetail td1 = new tiledetail();    td1.index = 0;    td1.tilename = "tile #1";     tiledetailslist.add(td1);     titledetail td21 = new tiledetail();    td2.index = 1;    td2.tilename = "tile #2";     tiledetailslist.add(td2);     //repeat above remaining tiles incrementing index.  if you're loading information db you'll need make sure have way connect image index deepzoomcomposer. 

now list full of tile information, need wire mouseleftbuttondown event handler detect when image clicked , determine index of clicked image. index need search our list appropriate tile details , display on canvas.

in code-behind, place following:

   deepzoomobject.mouseleftbuttondown += delegate(object sender, mousebuttoneventargs e)    {       //get index of image       int index = getindexofsubimage(e.getposition(deepzoomobject));       //find image in list of images       tiledetail td = tiledetailslist.firstordefault(t => t.index == index);       //display image info       tbinfo.text = td.tilename;    }; 

the following "secret sauce". find index of clicked image.

   private int getindexofsubimage(point point)    {       // test each subimage find image mouse within       (int = deepzoomobject.subimages.count - 1; >= 0; i--)       {         multiscalesubimage image = deepzoomobject.subimages[i];         double width = deepzoomobject.actualwidth / (deepzoomobject.viewportwidth * image.viewportwidth);         double height = deepzoomobject.actualwidth / (deepzoomobject.viewportwidth * image.viewportwidth * image.aspectratio);          point pos = deepzoomobject.logicaltoelementpoint(new point(image.viewportorigin.x / image.viewportwidth, -image.viewportorigin.y / image.viewportwidth));         rect rect = new rect(pos.x, pos.y, width, height);          if (rect.contains(point))         {            // return image index            return i;         }       }           return -1; //if there no corresponding subimage     } 

and that's it. long image indexes have corresponding image in list clicking on image inside of multiscaleimage object result in image info being displayed.