8

I have a Silverlight application that needs Drag-And-Drop functionality because I allow the user to drag and drop files to upload into the system.

However I am running into an issue where the navigation always falls behind the Silverlight application. I tried turning on "Windowless" but had to turn it off because I lost the drag-and-drop functionality (Microsoft doesn't support it)

What do I need to do to make it so that my navigation appears on top of the silverlight application (param name="Windowless" value="true" is not an option unless there is a way to use it with drag-and-drop)?

Silverlight Added to HTML


<div id="silverlightControlHost" style="float:left; width:400px; height:300px;">
    <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="220px">
      <param name="source" value="../ClientBin/FileImport.xap"/>
      <param name="onError" value="onSilverlightError" />
      <param name="background" value="white" />
      <param name="minRuntimeVersion" value="4.0.50826.0" />
      <param name="autoUpgrade" value="true" />

      <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
           <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
      </a>
    </object>
    <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>

Navigation Menu


<div id="NavigationControl">
    <ul class="sf-menu sf-js-enabled sf-shadow">
        <li><a id="Navigation_1" href="...">Item 1</a></li>
        <li class="sfHover"><a id="Navigation_2" class="sf-with-ul">Item 2<span class="sf-sub-indicator">»</span></a>
            <ul style="visibility: visible; display: block;">
                <li><a id="Navigation0_1" href="...">Child 1</a></li>
                <li><a id="Navigation0_2" href=".." class="sf-with-ul">Children<span class="sf-sub-indicator">»</span></a>
                    <ul style="display: none; visibility: hidden;">
                        <li><a id="Navigation1_1" href="...">Thing 1</a></li>
                        <li><a id="Navigation1_2" href="...">Thing 2</a></li>
                        <li><a id="Navigation1_3" href="...">Thing 3</a></li>
                        <li><a id="Navigation1_4" href="...">Thing 4</a></li>
                        <li><a id="Navigation1_5" href="...">Thing 5</a></li>
                        <li><a id="Navigation1_6" href="...">Thing 6</a></li>
                        <li><a id="Navigation1_7" href="...">Thing 7</a></li>
                        <li><a id="Navigation1_8" href="...">Thing 8</a></li>
                    </ul>
                </li>
                <li><a id="Navigation2_1" href="...">Box 1</a></li>
                <li><a id="Navigation2_2" href="...">Box 2</a></li>
                <li><a id="Navigation2_3" href="...">Box 3</a></li>
                <li><a id="Navigation2_4" href="...">Box 4</a></li>
            </ul>
        </li>   
        <li><a id="Navigation_3" href="..">Item 3</a></li>
    </ul>
</div>

Navigation Control CSS


#NavigationControl {
    height: 23px;
    background-color: transparent;
    position: relative;
    z-index: 10000;
}

Overview of Everything on Page


<html>
  <head>
       //link to SuperFish CSS & JS
       //link to Silverlight download if missing JS
  </head>
  <body>
    <div id="NavigationControl"></div>
    <div id="silverlightControlHost"></div>
  </body>
</html>

Link to the Superfish JS and CSS

Mark
  • 3,717
  • 3
  • 33
  • 48
  • We're going to need to see all of the code to determine what changes need to be made. Z-index is relative to the parent container so setting it to 10000 for an element does not guarantee that it will appear to be on top of another element. – Brent Friar Apr 18 '11 at 20:59
  • @Brent I've included the HTML markup for the page, all it has is those 2 divs, the one CSS style that I included above, some JS for the silverlight if its missing as well as links to superfish. So that is the only z-index change I made from the base defaults. – Mark Apr 18 '11 at 21:14

2 Answers2

2

To be able to render HTML content over your Silverlight application you need to configure the silverlight plug-in to run as Windowless.

Add the following parameter to your plug-in configuration

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

http://msdn.microsoft.com/en-us/library/cc838156(VS.95).aspx

In windowless mode the plug-in renders the silverlight content directly on the browser window rather than in a child window in the browser frame. Because of this the page HTML can overlay the silverlight content.

Note: That running in windowless mode does have some performance implications, read the above link for more detail.

Here is an example that might help as well

http://weblogs.asp.net/dwahlin/archive/2010/05/10/integrating-html-into-silverlight-applications.aspx

Chris Taylor
  • 52,623
  • 10
  • 78
  • 89
  • is there a way to turn on windowless and still have Drag and Drop functionality? In the link you sent me. In the remarks section it states "No support for handling UIElement defined drag-and-drop events for purposes of Silverlight as a file drop target" – Mark Apr 27 '11 at 19:44
  • 1
    @Mark, unfortunately not. It seems that you need to make a design compromise between overlapping the plug-in with HTML content vs. what I assume is a key functional requirement for you application to support acting as a file drop target. – Chris Taylor Apr 27 '11 at 19:57
  • ya that's what I feared. Thanks – Mark Apr 27 '11 at 20:03
0

I know for Flash you can use:

wmode="opaque" attribute on object element.

Don't know if it also works for Silverlight

PeeHaa
  • 71,436
  • 58
  • 190
  • 262