How to show images in Silverlight by reading images from SharePoint 2007 library Part-1

 Hi,
Silverlight works on client side, so it's not possible to add
SharePoint libraries in Silverlight project. But we have a way that we can
access SharePoint data and show it up in Silverlight in SharePoint site.
We
have a requirement where we need to pull data from the SharePoint libraries and
lists and show the data in Silverlight. Here i will explain a scenario where we
can pull the images from image library and show it in Silverlight.


Follow the steps below to do this.
Get data from SharePoint library and make it in the
form of XML.

1. Go to the page where we want to show the Silverlight module on the site or
   create a new page.
   
2. Open the page in SharePoint designer.
   
3. Add a data view web part to the page some where in web part zone.
   
4. Select the data source library from Task Pane menu.
   
5. Select the library/list from the data source library where your images are
   present.
   
6. Click on the library and select Show Data.
   
   
7. Select the columns, which refer the Title, Image Path etc you want to show
   in Silverlight from Data Source details task pane.
   
8. Select the option Insert select fields as "Multiple item view". So now our
   data view web part is filled with the data. [If you want apply some properties
   like show images in asc order etc..]
   
9. After selected the columns, apply a filter to get only images from the
   library/lists. we can do this by selecting the filters option from the data view
   web part.
   
10. Here, select the image title or url column in the field name, in comparison
    select contains and here enter valid formats Silverlight allows in the value
    field.
    
    
11. Save the page and open it in the browser [IE].
    
12. Till now what we did is, we are getting the data from the SharePoint
    library/Lists and showing up it in the data view web part and it renders as a
    table.
    
13. Now, we need to change the XSLT of the data view web part to get the table
    format of data as the XML format. We have XSLT, so we can easily do that.
    
14. Add the below XSLT code to the data view web part by going to edit for the
    web part and modify settings --> XSL editor.
    
15. Remove text in the editor and add this code.
    
16. <xsl:stylesheet x="<a href="http://www.w3.org/2001/XMLSchema">http://www.w3.org/2001/XMLSchema</a>" d="<a href="http://schemas.microsoft.com/sharepoint/dsp">http://schemas.microsoft.com/sharepoint/dsp</a>" version="1.0" prefixes="xsl msxsl ddwrt" ddwrt="<a href="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">http://schemas.microsoft.com/WebParts/v2/DataView/runtime</a>" asp="<a href="http://schemas.microsoft.com/ASPNET/20">http://schemas.microsoft.com/ASPNET/20</a>" __designer="<a href="http://schemas.microsoft.com/WebParts/v2/DataView/designer">http://schemas.microsoft.com/WebParts/v2/DataView/designer</a>" xsl="<a href="http://www.w3.org/1999/XSL/Transform">http://www.w3.org/1999/XSL/Transform</a>" msxsl="urn:schemas-microsoft-com:xslt" sharepoint="Microsoft.SharePoint.WebControls" ddwrt2="urn:frontpage:internal"><br /> <xsl:output method="html" indent="no"><br /> <xsl:decimal-format nan=""><br /> <xsl:param name="dvt_apos">'</xsl:param><br /> <xsl:variable name="dvt_1_automode">0</xsl:variable><br /> <xsl:template match="/" x="<a href="http://www.w3.org/2001/XMLSchema">http://www.w3.org/2001/XMLSchema</a>" d="<a href="http://schemas.microsoft.com/sharepoint/dsp">http://schemas.microsoft.com/sharepoint/dsp</a>" asp="<a href="http://schemas.microsoft.com/ASPNET/20">http://schemas.microsoft.com/ASPNET/20</a>" __designer="<a href="http://schemas.microsoft.com/WebParts/v2/DataView/designer">http://schemas.microsoft.com/WebParts/v2/DataView/designer</a>" sharepoint="Microsoft.SharePoint.WebControls"><br /><div id="slideshow" style="text-align:center"><br /><xsl:text escaping="yes"><br /><![CDATA[ <style type="text/css">#slideshow{text-align:center;}</style><br />]]></xsl:text><br /></div><br /><xsl:call-template name="dvt_1"><br /></xsl:template> <xsl:template name="dvt_1"><br /><xsl:variable name="dvt_StyleName">Table</xsl:variable><br /><xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"><br /><xsl:text escaping="yes"><script id="divImgs" type="text/xml"></xsl:text><br /><xsl:call-template name="dvt_1.body"><br /><xsl:with-param name="Rows" select="$Rows"><br /></xsl:call-template><br /><xsl:text escaping="yes"></script></xsl:text><br /></xsl:template> <xsl:template name="dvt_1.body"><br /><xsl:param name="Rows"><br /><xsl:text escaping="yes"><slides baseUrl=""></xsl:text><br /><xsl:for-each select="$Rows"><br /><xsl:call-template name="dvt_1.rowview"><br /></xsl:for-each><br /><xsl:text escaping="yes"></slides></xsl:text><br /></xsl:template> <xsl:template name="dvt_1.rowview"><br /><xsl:text escaping="yes"><slide imageUrl="</xsl:text><br /><xsl:value-of select="@FileLeafRef"><xsl:value-of select="@Name"></xsl:value-of><br /><xsl:text escaping="yes">"/></xsl:text><br /></xsl:template> </xsl:stylesheet>
    
    
    
17. If you observe i am pulling some values from the data view and making xml.
    
    
    
18. Now, when you save the web part and see the page, you can't see anything in
    the data view web part, because now your data is in the format of xml.
    
19. You can see this by doing view source and search for "
    
20. We are done with part 1 now. i.e. getting data from SharePoint library. Now
    we will move to second part.

Get XML
from the page and give that as input to Silverlight module:
At this
point, we got the xml i.e. xml is on the page, now we need to read the xml from
the page in the silverlight project and display the images as we want by
applying animations, styles etc..
You can see the part 2 How to read xml from web page and bind the data to Silverlight module in SharePoint 2007.