Silverlight设置zIndex

　　大家都知道，我们在页面上使用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插件和页面元素之间交互时还会有许多的技巧，其实只要认真研究下，应该不会有什么问题不能解决！