[SilverLight] Texte HTML et SilverLight sans IFrame :)

Ah croire tout ce qui peut se lire sur le sujet, actuellement il n' existerait pas d'autres moyens pour afficher du HTML avec SilverLight que d' utiliser une IFrame. Rapproche se veut simple : On ajoute un IFrame avec un z-index supérieur à celui du control SilverLight et on pilote cette IFrame pour lui faire afficher le HTML voulu.

Personnellement n'étant pas fan de l'IFrame, j'ai trouvé le moyen d' utiliser un UpdatePanel pour faire le travail et ainci mettre à jour un contenu tout en HTML en fonction d'une action demandée par SilverLight.

Les ingrédient de le recette sont donc :

1. Un UpdatePanel.
2. Une méthode JavaScript qui déclenche la mise à jour de l' UpdatePanel.
3. Un appel de méthode JavaScript via SilverLight pour demander l'action voulu sur le HTML.

Commençons donc par mettre en place notre UpdatePanel :

<div style="position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%;">
	<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightApplication1.xap"
		MinimumVersion="2.0.31005.0" Windowless="true" />
</div>

<asp:UpdatePanel runat="server" ID="UpdatePanelActionHtml">
	<ContentTemplate>
		<div style="position: absolute; z-index: 1; top: 30px; left: 50px;">
			<asp:TextBox runat="server" ID="TextBoxActionHtml" Style="display: none; visibility: hidden;" />
			<asp:Label runat="server" ID="Label1" />
		</div>
	</ContentTemplate>
</asp:UpdatePanel>

Les éléments importants de ce code sont les propriété css : z-index, la propriété Windowless du control SilverLight à true et un TextBox pour avoir un control qui stock l' action demandée. On peut bien entendu cacher la div de l' UpdatePanel, mais ça, je vous laisse le faire en fonction de vos besoins.

Ensuite vient la méthode qui provoquera le PostBack de l'UpdatePanel (je n'aime pas JavaScript, mais c'est pour la bonne cause) :

    <script type="text/javascript">
        function UpdateHtml(action) {
            $get('<%=TextBoxActionHtml.ClientID %>').value = action;
            __doPostBack("<%= UpdatePanelActionHtml.ClientID %>", "");
        }
    </script>

Et pour finir l' appel via SilverLight :

private void Button1_Click(object sender, RoutedEventArgs e)
{
	String action = "Test";
	System.Windows.Browser.HtmlPage.Window.CreateInstance(
		"UpdateHtml",
		new Object[] { action });
}

Comme vus le voyez, rien de très compliqué et cela marche très bien ;). Bien entendu dans votre code il reste à effectuer l' action demandée (stockée dans la propriété Text du TextBoxActionHtml) et afficher le HTML voulu dans le Label de l'UpdatePanel en fonction de cette action.

C' était mon petit cadeau de Noël à tout ceux qui se torturent à chercher une solution à cette question.