SharePoint's Silverlight webpart defaults to WindowlessMode

 

Because SharePoint’s Silverlight webpart defaults to windowless="true", there are some features of Silverlight that won’t work as you’d expect out of the box.

  • Drag and drop events
  • Transparency
  • Overlay DIV

By default, it renders something like this:

<object id="SilverlightObjectTag_xxx" data="data:application/x-silverlight-2," type="application/x-silverlight-2" style="display:block" height="100%" width="100%" class="ms-dlgDisable">

<param name="source" value="/sites/Home/Style Library/SilverlightCamera.xap"/>

<param name="onerror" value="…" />

<param name="background" value="white" />

<param name="initParams" value="…" />

<param name="windowless" value="true" />

 

Luckily, the SharePoint team provides an easy property to override this value.

http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webpartpages.silverlightwebpart.windowlessmode.aspx

When packaging your Silverlight .webpart file, configure the XML to set the WindowlessMode property to false.

<?xml version="1.0" encoding="utf-8"?>
<webParts>
  <webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
    <metaData>
      <type name=
"Microsoft.SharePoint.WebPartPages.SilverlightWebPart, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />
      <importErrorMessage>Cannot import this Web Part.</importErrorMessage>
    </metaData>
    <data>
      <properties>
        <property name="Title" type="string">Silverlight Metro UI Web Part</property>
        <property name="Description" type="string">Metro UI.</property>
        <property name="Url" type="string">~sitecollection/Style Library/Metro.Demo.xap</property>
        <property name="Height" type="int">800</property>
       <property name="WindowlessMode" type="bool">false</property>
      </properties>
    </data>
  </webPart>
</webParts>

 

Then the rendered HTML will have the value set appropriately, and Silverlight drag and drop events will work happily again, in SharePoint.