Silverlight (http://www.silverlight.net/ ) ve HTML (yani JavaScript) birlikte çalışabilir. Birkaç yıl önce de Adobe Flash ve HTML haberleşmesini yapmıştık: http://tbagriyanik.xtreemhost.com/galeri2010/etkili.html

Şimdiki uygulamamızın çalışan halinin adresi:

(güncelleme notu:

yeni sürümde artık her iki yönde birbirinin Fonksiyonunu çağırma imkanı da vardır)

http://tbagriyanik.xtreemhost.com/silverlight/

“Microsoft Expression Blend 4” ve “Adobe Dreamweaver CS6” kullanarak tasarım ve kodlama (CSharp) yaptım, denemek için de Chrome tarayıcısını kullandım.

Doküman olarak yararlandığım sitenin adresi: http://www.silverlightshow.net/items/Interaction-between-Silverlight-and-HTM.aspx

Önce Blend programında “Silverlight Application” açtım ve içine 1 Textblock, 2 düğme ve 1 adet Textbox ekledim. Tüm nesnelerin adlarını düzenledim: htmlyegittext, htmldenaltext, htmlyegonder ve htmldenal gibi.

Kod kısmında ise aşağıdaki kodları yazdım:

using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Net;
 using System.Windows;
 using System.Windows.Browser; //sonradan ekledim
 using System.Windows.Controls;
 using System.Windows.Documents;
 using System.Windows.Input;
 using System.Windows.Media;
 using System.Windows.Media.Animation;
 using System.Windows.Shapes;
namespace SilverlightApplication1
 {
 public partial class MainPage : UserControl
 {
 public MainPage()
 {
 // Required to initialize variables
 InitializeComponent();
 HtmlPage.RegisterScriptableObject("MainPage", this); //MainPage!
 }
[ScriptableMember]
 public void silverlightdanalClick()
 {
 htmlyegonder_Click(this,null);
 }
[ScriptableMember]
 public void htmlyegonderClick()
 {
 htmldenal_Click(this,null);
 }
private void htmlyegonder_Click(object sender, System.Windows.RoutedEventArgs e)
 {
 HtmlDocument doc = HtmlPage.Document;
 HtmlElement element = doc.GetElementById("silveragel");
 if(element!=null){
 element.SetProperty("value",htmlyegittext.Text);
 }
 }
private void htmldenal_Click(object sender, System.Windows.RoutedEventArgs e)
 {
 HtmlDocument doc = HtmlPage.Document;
 HtmlElement element = doc.GetElementById("silveragit");
 if(element!=null){
 htmldenaltext.Text= (string)element.GetProperty("value");
 }
 }
 }
 }

HTML sayfasının için de tamamen aşağıdaki gibidir:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <!-- saved from url=(0014)about:internet -->
 <head>
 <title>HTML Silverlight Haberleşmesi</title>
 <style type="text/css">
 html, body {
 margin:5px;
 height: 100%;
 overflow: auto;
 font-family:Verdana, Geneva, sans-serif;
 font-size:12px;
 }
 body {
 padding: 0;
 margin: 0;
 }
 #silverlightControlHost {
 height: 100%;
 text-align:center;
 }
 </style>
<script type="text/javascript">
 function onSilverlightError(sender, args) {
 var appSource = "";
 if (sender != null && sender != 0) {
 appSource = sender.getHost().Source;
 }
var errorType = args.ErrorType;
 var iErrorCode = args.ErrorCode;
if (errorType == "ImageError" || errorType == "MediaError") {
 return;
 }
var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n" ;
errMsg += "Code: "+ iErrorCode + " \n";
 errMsg += "Category: " + errorType + " \n";
 errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError") {
 errMsg += "File: " + args.xamlFile + " \n";
 errMsg += "Line: " + args.lineNumber + " \n";
 errMsg += "Position: " + args.charPosition + " \n";
 }
 else if (errorType == "RuntimeError") {
 if (args.lineNumber != 0) {
 errMsg += "Line: " + args.lineNumber + " \n";
 errMsg += "Position: " + args.charPosition + " \n";
 }
 errMsg += "MethodName: " + args.methodName + " \n";
 }
throw new Error(errMsg);
 }
 </script>
 </head>
 <body>
 <form id="form1" runat="server" style="height:100%">
 <div id="silverlightControlHost">
<p>
 <label>Silverlight'tan Gelen
 <input name="silveragel" type="text" id="silveragel" size="50" Value="al"/>
 <input type="button" name="silverdanal" Value="<< Silverlight'dan Al" onclick="javascript:al();" />
 </label>
 </p>
 <p>
 <label>Silverlight'a Giden
 <input name="silveragit" type="text" id="silveragit" size="50" Value="gönder"/>
 <input type="button" name="silveragonder" Value="Silverlight'a Gönder >>" onclick="javascript:gonder();" />
 </label>
 </p>
 </div>
 </form>
 <script type="text/javascript">
 var slcontrol = document.getElementById("silvelightObject"); //<object id="silvelightObject"
 function al() {
 if (slcontrol) {
 slcontrol.Content.MainPage.silverlightdanalClick();
 }
 }
 function gonder() {
 if (slcontrol) {
 slcontrol.Content.MainPage.htmlyegonderClick();
 }
 }
 </script>
 </body>
 </html>