一.【效果图】
功能描述:
1.当在左侧输入姓名年龄点击设置的时候 将值传递给右侧的xaml页面,也可以从XAML页面中获得数据
2.当在右侧输入姓名年龄点击设置的时候 将值传递给左侧的HTML页面, 也可以从Html页面中获得数据
二.【代码结构】
首先建立一个html界面,包括表单以及承载silverlight布局
(1)html界面
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
< title ></ title >
< script type ="text/javascript" src ="Silverlight.js" ></ script >
< 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 = " Silverlight 应用程序中未处理的错误 " + appSource + " \n " ;
errMsg += " 代码: " + iErrorCode + " \n " ;
errMsg += " 类别: " + errorType + " \n " ;
errMsg += " 消息: " + args.ErrorMessage + " \n " ;
if (errorType == " ParserError " ) {
errMsg += " 文件: " + args.xamlFile + " \n " ;
errMsg += " 行: " + args.lineNumber + " \n " ;
errMsg += " 位置: " + args.charPosition + " \n " ;
}
else if (errorType == " RuntimeError " ) {
if (args.lineNumber != 0 ) {
errMsg += " 行: " + args.lineNumber + " \n " ;
errMsg += " 位置: " + args.charPosition + " \n " ;
}
errMsg += " 方法名称: " + args.methodName + " \n " ;
}
throw new Error(errMsg);
}
</ script >
</ head >
< body >
< script type ="text/javascript" >
function On_Set() {
var obj = document.getElementById( " obj_sl " ).content.UserScript;
obj.Name = document.getElementById( " name " ).getAttribute( " value " )
obj.Age = document.getElementById( " age " ).getAttribute( " value " )
}
function On_Get() {
var obj = document.getElementById( " obj_sl " ).content.UserScript;
document.getElementById( " name " ).setAttribute( " value " , obj.Name);
document.getElementById( " age " ).setAttribute( " value " , obj.Age);
}
</ script >
< table border ="1" width ="600" height ="400" align ="center" >
< tr >
< td style ="width: 50%" >
< p align ="center" >
< span style ="font-size: x-large;" > HTML页面表单 </ span >
</ p >
< table bgcolor ="silver" align ="center" >
< tr >
< td >
姓名:
</ td >
< td >
< input id ="name" style ="width: 98%" />
</ td >
</ tr >
< tr >
< td >
年龄:
</ td >
< td >
< input id ="age" style ="width: 98%" />
</ td >
</ tr >
< tr >
< td >
操作:
</ td >
< td >
< input id ="btn_Save" type ="button" value =">>【设置】" onclick ="On_Set();" />
< input id ="btn_clear" type ="button" value ="<<【获得】" onclick ="On_Get();" />
</ td >
</ tr >
</ table >
</ td >
< td style ="width: 50%" >
< div id ="silverlightControlHost" align ="center" >
< object id ="obj_sl" data ="data:application/x-silverlight-2," type ="application/x-silverlight-2"
width ="100%" height ="100%" >
< param name ="source" value ="ClientBin/BruceTSilverlightDemo.xap" />
< param name ="onerror" value ="onSilverlightError" />
< param name ="background" value ="white" />
< param name ="minRuntimeVersion" value ="3.0.40818.0" />
< param name ="autoUpgrade" value ="true" />
< a href ="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style ="text-decoration: none;" >
< img src ="http://go.microsoft.com/fwlink/?LinkId=108181" alt ="获取 Microsoft Silverlight"
style ="border-style: none" />
</ a >
</ object >
< iframe id ="_sl_historyFrame" style ='visibility: hidden; height: 0; width: 0; border: 0px' >
</ iframe >
</ div >
</ td >
</ tr >
</ table >
</ body >
(2)XAML页面
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
< StackPanel HorizontalAlignment ="Center" VerticalAlignment ="Center" >
< TextBlock Text ="XAML页面表单" FontSize ="25" Margin ="10" />
< StackPanel Orientation ="Horizontal" Margin ="10" >
< TextBlock Text ="名称:" FontSize ="18" />
< TextBox Name ="txt_name" Width ="150" Text =" {Binding Name,Mode=TwoWay} " />
</ StackPanel >
< StackPanel Orientation ="Horizontal" Margin ="10" >
< TextBlock Text ="年龄:" FontSize ="18" />
< TextBox Name ="txt_age" Width ="150" Text =" {Binding Age,Mode=TwoWay} " />
</ StackPanel >
< StackPanel Orientation ="Horizontal" Margin ="10" >
< Button Content ="【设置】" Name ="btn_set" Click ="btn_set_Click" Margin ="5" FontSize ="18" />
< Button Content ="【获得】" Name ="btn_get" Click ="btn_get_Click" Margin ="5" FontSize ="18" />
</ StackPanel >
</ StackPanel >
</ Grid >
(3) XAML后台代码
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
/// 标识:【BruceT】
/// 日期:【2010.11.13】
/// </summary>
public partial class MainPage : UserControl
{
System.Windows.Browser.HtmlElement _btn_name;
System.Windows.Browser.HtmlElement _btn_age;
public MainPage()
{
InitializeComponent();
UserScriptable user = new UserScriptable { Name = "" , Age = "" };
base .DataContext = user; // 将user赋值给数据上下文。
System.Windows.Browser.HtmlPage.RegisterScriptableObject( " UserScript " , user); // 将该对象设置成可脚本化
_btn_name = System.Windows.Browser.HtmlPage.Document.GetElementById( " name " );
_btn_age = System.Windows.Browser.HtmlPage.Document.GetElementById( " age " );
}
private void btn_set_Click( object sender, RoutedEventArgs e)
{
_btn_name.SetAttribute( " value " , txt_name.Text);
_btn_age.SetAttribute( " value " , txt_age.Text);
}
private void btn_get_Click( object sender, RoutedEventArgs e)
{
if (_btn_name.GetAttribute( " value " ) == null || _btn_age.GetAttribute( " value " ) == null ) return ;
txt_name.Text = _btn_name.GetAttribute( " value " );
txt_age.Text = _btn_age.GetAttribute( " value " );
}
}
(4) 实体类
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
{
private string _name;
[ScriptableMember]
public string Name
{
get { return _name; }
set { _name = value; NOtifyPropertyChanged( " Name " ); }
}
private string _age;
[ScriptableMember]
public string Age
{
get { return _age; }
set { _age = value; NOtifyPropertyChanged( " Age " ); }
}
#region INotifyPropertyChanged 成员
public event PropertyChangedEventHandler PropertyChanged;
public void NOtifyPropertyChanged( string propertyname)
{
if (PropertyChanged != null )
{
PropertyChanged( this , new PropertyChangedEventArgs(propertyname));
}
}
#endregion
}
总结,从xaml 赋值/获取值通过html ,相对来说比较简单.
从html 获取xaml 的值,我们需要获得xap 中的内容,那我们如果能让绑定的实体被js 所看到呢这涉及到silverlight 可脚本化的知识点.
常使用的内部对象
HtmlPage.RegisterScriptableObject("silverlightObject", this); //注册可脚本化实例
HtmlPage.Document.GetElementById("btnHello").SetStyleAttribute("display", "inline");//html标记样式属性
// 调用页面的 JavaScript 方法
HtmlPage.Window.Invoke("jsfun", "a");
// 执行任意 JavaScript 语句
HtmlPage.Window.Eval("jsfun('a')");