(X) Hide this
    • Login
    • Join
      • Say No Bots Generate New Image
        By clicking 'Register' you accept the terms of use .

Getting information about the SubImages of the MultiscaleImage control

(3 votes)
Martin Mihaylov
>
Martin Mihaylov
Joined Oct 29, 2007
Articles:   50
Comments:   70
More Articles
2 comments   /   posted on Jul 24, 2008
Categories:   Media , Controls

This article is compatible with the latest version of Silverlight.


Introduction

This is my third article from the series about the MultiscaleImage control. In retrospect here is brief information about the previous articles if you missed them: the first one was about the MultiscaleImage control and the SubImages collection and the second about randomizing and rearranging the SubImages of the MultiscaleImage control. This article will focus on the Metadata file that is generated by the DeepZoom Composer and more specifically on the tag element in it that is present for each image in the collection.

Getting the Metadata file

Do you remember the compose section of the DeepZoom Composer? There is a possibility to enter a tag for each image in the composition. This information can later be found in the meradata.xml file that is exported by the Composer together with the other files. In this tag we can put a short text or an identifier, for example number, that will be used later to get a specific information from a database.

In order to get the tag information we first need to download the file. We're going to do that via WebClient:

 bool metadataLoaded = false;
 XDocument metadata = new XDocument();
  
 private void LoadXMLFile()
 {
     WebClient xmlClient = new WebClient();
     xmlClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler( XMLFileLoaded );
     xmlClient.DownloadStringAsync( new Uri( "smithi_grid/metadata.xml", UriKind.RelativeOrAbsolute ) );
 }
 
 private void XMLFileLoaded( object sender, DownloadStringCompletedEventArgs e )
 {
     if( e.Error == null )
     {
         string xmlData = e.Result;
  
         MemoryStream ms = new MemoryStream( Encoding.Unicode.GetBytes( xmlData ) );
         XmlReader reader = XmlReader.Create( ms );
         metadata = XDocument.Load( reader );
  
         metadataLoaded = true;
     }
 }

We have a flag variable that will be used to determine whether the XML file has been downloaded. We also have an object of type XDocument, in which we will load our XML file. If you're not familiar with the XDocument object, please read this article about LINQ to XML in Silverlight. In it you can find the LINQ to XML I use to get the needed information from the XML file. We also create a handler for the DownloadStringAsync Completed event. We load in it the XML string into the XDocument using XmlReader. At last we set the metadataLoaded to true.

Getting the Tag information from the Metadata file

This is done using LINQ to XML and is really plain and easy. For the example I use a method that takes as argument the index of the clicked image (check the previous articles to see how to get the index of the clicked image ):

 private string GetImageTag( int index )
 {
     if( metadataLoaded )
     {
         if( index != -1 )
         {
             List<string> tags = ( from image in metadata.Descendants( "Image" )
                                   where int.Parse( image.Element( "ZOrder" ).Value ) == index + 1
                                   select image.Element( "Tag" ).Value ).ToList();
 
             return tags[ 0 ];
         }
         else
         {
             return string.Empty;
         }
     }
     else
     {
         return string.Empty;
     }
 }

First we check if the XML file has been loaded, if not we return an empty string. The same is done if the index equals to -1. Here comes the part with the LINQ. First we determine which Image element we need. Its ZOrder element must have the same value as the index of the clicked image. Then we select the value of the "Tag" element. This returns a List (of strings in our case) and we need the first object in this string.

Implementing this into the code

Add a TextBlock control into the Xaml for example and use it to display the provided information. Then call the method in the handler where you get the selected image and set the Text of the TextBlock control to the returned tag. Or, if you prefer, you can pass the tag as an argument to a web service that will fetch you something from a database. There are many possibilities to use this tag, choose what suits you best.

Summary

This is all for now. Hope that after these three articles you are now more familiar with the capabilities of the MultiscaleImage control. The next article will also be based on something interesting and attractive that can be done using it, so stay tuned. 


Subscribe

Comments

  • -_-

    RE: Getting information about the SubImages of the MultiscaleImage control


    posted by Lordsam on Jun 21, 2009 03:48

    i was wondering if by any chance you can grant us a source code with the tag thing added.

    }

    else

    }

    return string.THANKS

    }

    }

  • -_-

    RE: Getting information about the SubImages of the MultiscaleImage control


    posted by Wissam on Jul 04, 2009 20:58

    Then call the method in the handler where you get the selected image and set the Text of the TextBlock control to the returned tag.

     

    PLEASE HELP. HOW CAN WE DO THAT???

Add Comment

Login to comment:
  *      *