在页面上传递参数给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" />
  <a 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" />
  <a 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插件和页面元素之间交互时还会有许多的技巧，其实只要认真研究下，应该不会有什么问题不能解决！