Show images in Silverlight by reading images from SharePoint library

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="http://www.w3.org/2001/XMLSchema" d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" prefixes="xsl msxsl ddwrt" ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" asp="http://schemas.microsoft.com/ASPNET/20" __designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xsl="http://www.w3.org/1999/XSL/Transform" 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="http://www.w3.org/2001/XMLSchema" d="http://schemas.microsoft.com/sharepoint/dsp" asp="http://schemas.microsoft.com/ASPNET/20" __designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" 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 here.