learn silverlight

http://www.wssdemo.com/Blog/archive/2008/01/05/sharepoint-picture-library-silverlight-demo-working-again.aspx

 

 

SharePoint Picture Library SilverLight Demo working again

I just started from scratch, only took 5 minutes. http://www.wssdemo.com/pages/silverlight.aspx

Steps to create this on your own site using SharePoint Designer (no server access or web part installation required).

Assuming you have a SharePoint picture library already created. Copy any code below into notpad first.

1. Create a Document Library to hold your web part page and the required SilverLight files (set template to Web Part Page)
2. Create a folder called script in the document library
3. Copy the following files from http://www.codeplex.com/bjsspv/Release/ProjectReleases.aspx?ReleaseId=6444 into the script folder
   1. Createsilverlight.js
   2. Main.js
   3. Silverlight.js
   4. Scene.xaml
   5. Photoitem.xaml
4. Create a Web Part Page in the library
5. Edit the web part page in SharePoint Designer
6. Insert a Data View of your picture Library (just select one field from the data source view)
7. Set the data view layout to Plain Layout
   
8. Add the following code immediately before the <xsl:call-template name="dvt_1"/> tag

   <xsl:text disable-output-escaping="yes"><![CDATA[<script type="text/javascript" src="script/CreateSilverlight.js"></script>

       <script type="text/javascript" src="script/Silverlight.js"></script>

       <script type="text/javascript" src="script/Main.js"></script>

       <div id="SilverlightControlHost">Loading...<script type="text/javascript">

           var localScene=new BinaryJamSFSPart.Scene('SilverlightControlHost', 'script');

           createSilverlight('SilverlightControlHost', 'script/Scene.xaml', 'SilverlightControl','640','520', localScene);

       </script>]]></xsl:text>
   

9. Replace the dvt_1 template with the following

        <xsl:template name="dvt_1">

            <xsl:variable name="dvt_StyleName">PlnTitl</xsl:variable>

            <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />

            <xsl:text disable-output-escaping="yes"><![CDATA[<script type="text/javascript">

            ]]></xsl:text>

            <xsl:call-template name="dvt_1.body">

                <xsl:with-param name="Rows" select="$Rows" />

            </xsl:call-template>

            <xsl:text disable-output-escaping="yes"><![CDATA[</script></div>]]></xsl:text>

        </xsl:template>

1. Replace all the code between the <xsl:template name="dvt_1.rowview"> </xsl:template> with
   
   localScene.PhotoItemsUrls['<xsl:value-of select="position()-1"/>'] = new BinaryJamSFSPartPhotoUrls('http://www.wssdemo.com<xsl:value-of select="@FileRef"/>','http://www.wssdemo.com<xsl:value-of select="@FileRef"/>');
   
2. Save your page and view it in the browser (mouse over the bottom of the image to get the selector to display)
   

Posted by Ian Morrish on Friday, 4 Jan 2008 01:58 | 10 Comments

SharePoint