Silverlight具备很好的用户体验,但有时需要在页面的布局上进行特殊处理,比如作为webpart集成到Sharepoint中等等。
HTML和Silverlight之间的双向交互可以更灵活的使用Silverlight进行开发,上午摸索了一下,记录在此。
一,向Silverlight传递数据,实现个性化加载
Silverlight在HTML中的引用是:
<
object
data
=
"
data:application/x-silverlight-2,
"
type
=
"
application/x-silverlight-2
"
width
=
"
100%
"
height
=
"
100%
"
>
< param name = " source " value = " ClientBin/VideoCenter.xap " />
< param name = " onError " value = " onSilverlightError " />
< param name = " background " value = " white " />
< param name = " minRuntimeVersion " value = " 4.0.50401.0 " />
< param name = " autoUpgrade " value = " true " />
< a href = " http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0 " style = " text-decoration:none " >
< img src = " http://go.microsoft.com/fwlink/?LinkId=161376 " alt = " Get Microsoft Silverlight " style = " border-style:none " />
</ a >
</ object >
< param name = " source " value = " ClientBin/VideoCenter.xap " />
< param name = " onError " value = " onSilverlightError " />
< param name = " background " value = " white " />
< param name = " minRuntimeVersion " value = " 4.0.50401.0 " />
< param name = " autoUpgrade " value = " true " />
< a href = " http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0 " style = " text-decoration:none " >
< img src = " http://go.microsoft.com/fwlink/?LinkId=161376 " alt = " Get Microsoft Silverlight " style = " border-style:none " />
</ a >
</ object >
这种引用插件的方式提供了一系列的参数来实现个性加载,上面的代码中我们加了一行参数
<
param name
=
"
initParams
"
value
=
"
CategoryId=1
"
/>
我们可以在Silverlight中处理这些参数,打开Silverlight应用程序的App代码文件,加上接收参数的代码
private
void Application_Startup(
object
sender, StartupEventArgs e)
{
if (e.InitParams.Count ! = 0 )
{
foreach(var item in e.InitParams)
{
this.Resources.Add(item.Key, item.Value);
}
}
this.RootVisual = new MainPage();
}
{
if (e.InitParams.Count ! = 0 )
{
foreach(var item in e.InitParams)
{
this.Resources.Add(item.Key, item.Value);
}
}
this.RootVisual = new MainPage();
}
我们看到对e.InitParams的处理,即可得到了HTML中传进来的参数,实现个性化加载:
if
(App.Current.Resources[
"
CategoryId
"
]!
=
null
)
{
int cateId = int .Parse(App.Current.Resources[ " CategoryId " ].ToString());
CategoryItem c = new CategoryItem();
c.CategoryID = cateId;
this.gridOfList.Children.Add(c);
}
{
int cateId = int .Parse(App.Current.Resources[ " CategoryId " ].ToString());
CategoryItem c = new CategoryItem();
c.CategoryID = cateId;
this.gridOfList.Children.Add(c);
}
二,Silverlight调用HTML中的脚本资源,实现自身的样式等修改
首先我们可以在加载Silverlight组件的页面上编写一段Javascript脚本
function
InvokePlayer(videoId) {
document.getElementById( " divCategory " ).style.display = " none " ;
var player = document.getElementById( " divPlayer " );
player.style.width = " 100% " ;
player.style.height = " 600px " ;
}
document.getElementById( " divCategory " ).style.display = " none " ;
var player = document.getElementById( " divPlayer " );
player.style.width = " 100% " ;
player.style.height = " 600px " ;
}
怎么在Silverlight中调用这个脚本呢?我们可以在某个事件中调用Silverlight提供的类方法
System.Windows.Browser.HtmlPage.Window.Invoke(
"
InvokePlayer
"
, videoId);
当然类似的方法还有几个:
(HtmlPage.Window.GetProperty(
"
InvokePlayer
"
)
as
ScriptObject)InvokeSelf(
"
Good Function!
"
);HtmlPage.Window.Eval(
"
document.getElementById('result')
"
)
as
HtmlElement…
即可实现调用脚本。经过以上的两个方法即可实现HTML和Silverlight之间双向传递数据的功能。