Menu
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)?
<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>
<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>
#NavigationControl {
height: 23px;
background-color: transparent;
position: relative;
z-index: 10000;
}
<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
452
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
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
