Articles / Nouvelle technologies

Pour répondre à un commentaire d'un visiteur, je vais vous montrer comment vous pouvez intéragir avec des éléments de votre page HTML à partir de Silverlight. C'est vraiment très simple.

La question à été posée sur cet article.

Nous allons prendre un projet Silverlight dans Visual Studio 2008. J'utiliserai la version 1.1 de Silverlight, c'est à dire celle qui permet d'utiliser le CLR.

Ouvrez Visual Studio 2008
Créer un nouveau projet Silverlight :
- File
- New
- Project
- Une nouvelle fenêtre apparait, choisissez Silverlight et ensuite Silverlight Project.
- Donnez un nom à votre projet et cliquez sur OK.

Nous avons plusieurs fichiers dans notre projet, dont un .xaml qui représente l'interface de notre projet Silverlight :

[code:xml]
<Canvas x:Name="parentCanvas"
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Loaded="Page_Loaded"
        x:Class="SilverlightProject1.Page;assembly=ClientBin/SilverlightProject1.dll"
        Width="640"
        Height="480"
        Background="White"
        >
<Canvas Width="200" Height="50" Background="Red" MouseLeftButtonDown="MonEvent">
    <TextBlock x:Name="TextBlock1">Cliquez ici</TextBlock>
</Canvas>
</Canvas>
[/code]

/!\ Les namespaces changent tout le temps! Faites bien attention à prendre les namespaces du moment.

Ici tout ce qui nous intéresse, c'est le deuxième canvas qui contient notre évènement : MouseLeftButtonDown="MonEvent". Lorsque l'utilisateur va cliquez sur ce canvas, notre événement sera lancé. C'est lui qui va intéragir avec le DOM de notre page :

[code:c#]
void MonEvent(object sender, MouseEventArgs e)
{
   HtmlDocument doc = new HtmlDocument();
   HtmlElement Text1 = doc.GetElementByID("Text1");
   Text1.SetAttribute("value", "Vous avez cliqué sur le canvas");
}
[/code]

Dans notre page HTML, nous avons :

[code:xml]
<div id="SilverlightControlHost" class="silverlightHost" >
        <script type="text/javascript">
            createSilverlight();
        </script>
        <input name="Text1" type="text" />
    </div>
[/code]

Lorsque nous cliquerons sur notre canvas, notre input text html prendra comme valeur : "Vous avez cliqué sur le canvas".

On peut naturellement, faire l'opération inverse, c'est à dire prendre la valeur de notre champ texte html et la mettre comme valeur de notre TextBlock Silverlight :

[code:c#]
HtmlDocument doc = new HtmlDocument();
HtmlElement Text1 = doc.GetElementByID("Text1");
TextBlock1.Text = tb1.GetAttribute("value");
[/code]

Voilà, a bientôt

PS : Si vous avez d'autres questions, n'hésitez pas à poster des commentaires :)