在页面上传递参数给Silverlight插件

  最近一直在做Silverlight插件,用来在页面上展示一些动画效果和视频播放,有关如何通过页面传递参数给Silverlight插件已经是一个老生常谈的话题了,不过我还是想在这里重新做下记录,方便新人学习,也方便自己日后查阅。

  大家都知道,我们在页面上使用Silverlight插件一般都采用下面这种标记,当然你也可以在aspx页面中使用silverlight标记,不过这种方式用得很少,而且只限于在aspx页面上使用。

< object  data ="data:application/x-silverlight-2,"  type ="application/x-silverlight-2"  width ="100%"  height ="100%" >
  
< param  name ="source"  value ="ClientBin/SilverlightTest.xap" />
  
< param  name ="onError"  value ="onSilverlightError"   />
  
< param  name ="background"  value ="white"   />
  
< param  name ="minRuntimeVersion"  value ="3.0.40624.0"   />
  
< param  name ="autoUpgrade"  value ="true"   />
  
< href ="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0"  style ="text-decoration:none" >
      
< img  src ="http://go.microsoft.com/fwlink/?LinkId=108181"  alt ="Get Microsoft Silverlight"  style ="border-style:none" />
  
</ a >
</ object >

   与flash插件类似,在页面上使用的也是一个object标记,我们可以通过已有的param参数来修改silverlight插件的一些属性,例如我们可以使用source来要求silverlight插件使用不同的xap文件,使用onError设置Silverlight加载出错时要执行的脚本,使用background参数设置silverlight插件的背景色,以及使用minRuntimeVersion参数要求客户端运行Silverlight插件的最小版本号,使用autoUpgrade参数要求是否允许客户端的Silverlight浏览器插件自动升级等等。除此之外,你还可以自定义参数,我们可以使用initParams来命名参数,通过该参数我们可以同时传递多个值给Silverlight,如下面的代码:

< object  data ="data:application/x-silverlight-2,"  type ="application/x-silverlight-2"  width ="100%"  height ="100%" >
  
< param  name ="source"  value ="ClientBin/SilverlightTest.xap" />
  
< param  name ="onError"  value ="onSilverlightError"   />
  
< param  name ="background"  value ="white"   />
  
< param  name ="minRuntimeVersion"  value ="3.0.40624.0"   />
  
< param  name ="autoUpgrade"  value ="true"   />
  
< param  name ="initParams"  value ="programmer=Jaxu, blog=http://www.cnblogs.com/jaxu, title=silvelight"   />
  
< href ="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0"  style ="text-decoration:none" >
      
< img  src ="http://go.microsoft.com/fwlink/?LinkId=108181"  alt ="Get Microsoft Silverlight"  style ="border-style:none" />
  
</ a >
</ object >

   我们通过name/value对来设定initParams参数的值,如上例中就传递了三个不同的参数programmer、blog和title。在服务器端如何接收这些值呢?看下面的示例,首先我们需要在App.xaml.cs文件的Application_Startup事件中加载这些参数的值。

private   void  Application_Startup( object  sender, StartupEventArgs e)
{
  
if  ( e.InitParams  !=   null  )
  {
    
foreach  ( var item  in  e.InitParams )
    {
      
this .Resources.Add( item.Key, item.Value );
    }
  }
      
  
this .RootVisual  =   new  Page();
}

   通过遍历InitParams,我们将参数以键-值对的形式加载到Silverlight全局资源集合中,最后一行代码是Silverlight默认的代码。使用的时候我们可以通过参数名从Silverlight全局资源集合中取出相应的值,可以写成一个函数方便调用。

private   string  GetParam( string  p)
{
  
if  ( App.Current.Resources[p]  !=   null  )
  {
    
return  App.Current.Resources[p].ToString();
  }
  
else
  {
    
return   string .Empty;
  }
}

   这样我们就可以轻松地获取到页面上传递过来的参数了。如果需要传递的参数过多,除了采用name/value对的形式外,我们还可以将参数写到xml里,如大家比较熟悉的playList,将视频播放要使用的参数写到playList xml里,然后在Application_Startup事件中解析xml并加载参数的值,使用xml的形式便于组合和管理参数。

  另外,有时候我们也需要在Silverlight中实现与页面DOM之间的交互。在Silverlight中,我们可以通过HtmlPage.Plugin来获取页面上用来呈现Silverlight插件的object标签,通过HtmlPage.Plugin.Parent.Id就可以得到父容器的id,如div或者td。除此之外,还可以通过HtmlPage.Document.GetElementById("elementID")来得到一个页面上的控件,该方法返回HtmlElement对象,通过该对象的SetProperty("PropertyName")方法可以修改控件的属性值,通过GetProperty("PropertyName")方法可以得到控件的属性值。这样,我们就可以实现Silverlight插件和页面元素之间的交互了。

  有时候我们会碰到一些小问题,例如我们想让页面上的元素(如div)浮动到Silverlight元素之上,默认情况下Silverlight总会呈现在所有页面元素之上,这时你可以给页面上的object对象传递一个参数Windowless,将值设为true,让Silverlight插件以“无窗体”的形式呈现就可以了。

  还有一种情况,就是当Silverlight插件在执行一个动画时,动画所控制的元素会超出Silverlight插件本身的范围,这时如果Silverlight插件周围存在页面上的其它容器控件(如div),而Windowsless的值又为true,此时超出去的部分就会被旁边的容器挡住。这时我们就需要通过程序来动态控制Silverlight父容器控件的大小和ZIndex值,同时还需要将Silverlight插件的背景色设置为透明。下面的代码展示了这一点技巧。

public   partial   class  MainPage : UserControl
{
    
private   string  divID  =   string .Empty;
    
private  HtmlElement element;
    
private   double  originalWidth  =   0 ;
    
private   double  originalHeight  =   0 ;
    
private   double  naturalWidth  =   865 ;
    
private   double  naturalHeight  =   410 ;
    
private   int  state  =   0 ;

    
public  MainPage()
    {
        
//  Required to initialize variables
        InitializeComponent();

        divID 
=  HtmlPage.Plugin.Parent.Id;
        element 
=  HtmlPage.Document.GetElementById(divID);
        originalWidth 
=  Convert.ToDouble(element.GetProperty( " offsetWidth " ));
        originalHeight 
=  Convert.ToDouble(element.GetProperty( " offsetHeight " ));
    }

    
//  Zoom in.
     private   void  videoToggleButton_Checked( object  sender, RoutedEventArgs e)
    {
        SetPropertiesBeforeZoomedIn();
        videoZoomInStoryboard.Begin();
    }

    
//  Zoom out.
     private   void  videoToggleButton_Unchecked( object  sender, RoutedEventArgs e)
    {
        videoZoomOutStoryboard.Begin();
    }

    
private   void  ZoomOutStoryboard_Completed( object  sender, EventArgs e)
    {
        
if  (state.Equals( 0 ))
        {
            SetProperitesAfterZoomedOut();
        }
    }

    
private   void  SetPropertiesBeforeZoomedIn()
    {
        element.SetStyleAttribute(
" width " , naturalWidth.ToString()  +   " px " );
        element.SetStyleAttribute(
" height " , naturalHeight.ToString()  +   " px " );
        element.SetStyleAttribute(
" zIndex " " 100 " );
    }

    
private   void  SetProperitesAfterZoomedOut()
    {
        element.SetStyleAttribute(
" width " , originalWidth.ToString()  +   " px " );
        element.SetStyleAttribute(
" height " , originalHeight.ToString()  +   " px " );
        element.SetStyleAttribute(
" zIndex " " 0 " );
    }
}

  一开始程序会把Silverlight父容器的高和宽记录下来,事件videoToggleButton_Checked和事件videoToggleButton_Unchecked会分别执行一个放大和缩小的动画过程,在放大过程执行前程序会将容器的高和宽设定为预期的值并同时修改ZIndex,这时Silverlight插件就会显示在所有页面容器的最上面并且不会被周边的容器挡住;在缩小过程执行完后程序再将容器的高和宽设定为最初的值并同时修改回ZIndex,此时Silverlight插件就会恢复到最初的状态。你可能会问为什么我们不能只设定容器的ZIndex值而还要同时修改它的大小呢?这是因为当Silverlight插件被放大或缩小时它的父容器的大小并不会随之一起改变,这时即使你将父容器的ZIndex值改成最大Silverlight插件还是会被父容器本身挡住。

  在进行Silverlight插件和页面元素之间交互时还会有许多的技巧,其实只要认真研究下,应该不会有什么问题不能解决!

转载于:https://www.cnblogs.com/jaxu/archive/2010/01/22/1654052.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值