Le contenu Silverlight est affiché au-dessus du contenu HTML

Question

J'ai un tableau HTML sur une page qui incorpore une minuscule application Silverlight pour fournir une fonctionnalité «Copier dans le Presse-papiers». L'ensemble de l'application est un bouton unique qui copie une valeur dans le presse-papiers à partir de la ligne dans laquelle il est intégré. J'utilise aussi le widget jQueryUI Dialog pour d'autres zones de la page. Lorsque la boîte de dialogue s'ouvre, elle s'affiche au-dessus de tous les autres contenus de la page , à l'exception des boutons Silverlight. Pour une raison ou une autre, je ne peux pas faire en sorte que la boîte de dialogue modale soit placée au-dessus de ces boutons et c'est évidemment un gros problème de convivialité. J'ai fait pas mal de recherches et je n'ai pas encore trouvé de solution qui fonctionne. Je suis sûr que ce problème provient de mon manque de compréhension en profondeur de la relation de Silverlight avec le DOM et de son impact sur la mise en page et le style.

J'ai essayé plusieurs choses, y compris la définition de la propriété "sans fenêtre" à true et l'arrière-plan à "transparent", j'ai également joué avec une solution de contournement de style que j'ai trouvé sur les blogs. Malheureusement, rien n'a fonctionné.

Voici le code utilisé pour instancier le plug-in Silverlight pour chaque ligne.

Silverlight.createObjectEx({ 
    "source": src, 
    "parentElement": cell, 
    "id": String.format("pluginHost_{0}", id), 
    "properties": { 
     "height": "16", 
     "width": "16", 
     "background": "transparent", 
     "windowless": true, 
     "enableHtmlAccess": true, 
     "version": "4.0.50826.0" 
    }, 
    "events": { 
     "onLoad": null, 
     "onError": null 
    }, 
    "initParams": String.format("url={0}", item.Url), 
    "context": null 
}); 

Comme je l'ai déjà dit, il est juste un petit bouton (de 16px) qui prend une URL à partir de sa ligne de données associée en tant que paramètre d'initialisation et la copie dans le presse papier chaque fois que le bouton est enfoncé. Étant donné que les données sont chargées dynamiquement via un service Web externe, je charge le plugin à l'aide de la bibliothèque Silverlight.js afin que je puisse transmettre des données lorsque le plugin est initialisé sur chaque ligne.

Quelqu'un peut-il me dire pourquoi les boutons de ma table s'affichent en haut de la boîte de dialogue modale (et tout autre élément que je déplace sur le dessus de la table)?

Voici une capture d'écran de ce que je vois.

Merci!

Answer 1

J'ai fait face à un problème similaire où j'essayais d'afficher une image de progression gif sur un conteneur silverlight. Pour cela j'ai eu un javascript pré-écrit. Cela n'a pas fonctionné comme prévu, car Silverlight a toujours été utilisé par les autres éléments de la page Web.

J'ai essayé ceci qui a fonctionné pour moi:

ajouter ce qui suit où vous créez objet silverlight dans votre page Web:

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

Exemple:

<div id="silverlightControlHost"> 
    <object id="SilverlightObject" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="800" height="500" style="z-index:1" > 
    <param name="source" value="ClientBin/GIF2.xap"/> 
    <param name="onError" value="onSilverlightError" /> 
    <param name="windowless" value="true" /> 
    <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> 
</div> 

Je devais aussi utilisez la propriété z-index en plus du paramètre ci-dessus.

Pour les afficher l'un au-dessus de l'autre, je modifie simplement leur index z en utilisant javascript, comme requis.

Exemple:

var divelement = document.getElementById("element_to_be_on_top"); 
divelement.style.zIndex = 999; 

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