Silverlight玩转控件（二）——Canvas布局_app

概述在接下来的几篇文章中，我将来介绍Silverlight相关的布局知识。在Silverlight中，布局主要有三种方式： 1. Cavas 2. StackPanel 3. Grid 在传统的ASP.NET中，我们知道，布局通常是通过传统的CSS+DIV来予以实现，但是在Silverlight中，我们更多的是通过布局控件+Style来予以实现，至少我的习惯是这样的。Style其实很类似于CSS。

在接下来的几篇文章中，我将来介绍Silverlight相关的布局知识。

在Silverlight中，布局主要有三种方式：

1. Cavas

2. StackPanel

3. GrID

在传统的ASP.NET中，我们知道，布局通常是通过传统的CSS+div来予以实现，但是在Silverlight中，我们更多的是通过布局控件+Style来予以实现，至少我的习惯是这样的。Style其实很类似于CSS。

好，转入正题，在这篇文章中，我主要来介绍Canvas控件的用法。

首先，让我们新建一个Silverlight 2的项目：

然后是这样：

好，如果没有错误的话，我们应该已经新建了一个Silverlight 2的项目文件，在项目中，我们可以看到：

我们来大致介绍一下：SilverlightApplication.Web是一个测试的页面文件。

这个就要从Silverlight的本质来说起，我不想为Silverlight拉广告，说Silverlight有哪里哪里的好，与传统的页面和Flash相比有什么优点之类的话，这些仁者见仁，智者见智。我也不妄加评论。我只是专心学我的微软技术就好了。

Silverlight其实我们可以把它当成一个用户控件的作用来理解，他不能独立运行，而需要一个ASP.NET网站或者HTML页面作为宿主来运行。而这个SilverlightApplication.Web下的SilverlightApplication1TestPage.aspx和SilverlightApplicationTestPage.HTML就是这个Silverlight项目的宿主测试页面。

在Silverlight编译后，会生成一个dll的文件，我们可以在Web应用中导入这个dll文件，就像我们导入其他的第三方控件一样，然后来使用我们所创建的Silverlight项目。

我们在第一次运行之后看看项目中的变化：

我们可以发现，多了一个xap文件，而在SilverlightApplication1TestPage.aspx中，我们可以发现玄机：
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><div  style="height:100%;">    <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClIEntBin/SilverlightApplication1.xap" MinimumVersion="2.0.31005.0" WIDth="100%" Height="100%" 
    /></div>

好了，我想大多数人都应该知道这个Silverlight是如何启动的了。不再赘言。

现在开始主题，使用Canvas来布局。

Canvas——中文的翻译是帆布，油画（布）。这个很形象，在Silverlight中，Canvas就像一张油布一样，所有的控件都可以堆到这张布上。

而使用Canvas布局和使用传统的ASP.NET非常类似。

我们回顾一下我们使用ASP.NET的时候，我们创建一个button，使这个button距页面左侧和顶部分别是50和50：
<head runat="server">    <Title></Title>    <style type="text/CSS">        .newStyle1        {            margin-left:50px;            margin-top:50px;        }    </style></head><body>    <form ID="form1" runat="server">    <div>        <asp:button ID="button1" runat="server" Text="button" CSSClass="newStyle1" />    </div>    </form></body>

好了，接下来让我们看下在Silverlight的Canvas布局方式中，我们该如何去实现同样的效果.

在传统的ASP.NET中，我们是把整个Web页面作为一个画布，在上面摆置各种Web控件。其实在Silverlight的Canvas布局中也是一样，我们也只是需要设置于Canvas的距离即可。

但是更为简单，毕竟抛弃了我们编程人员都讨厌的CSS，而使用了属性，我们来看：

<Canvas>    <button Content="button" WIDth="70" Height="30" Canvas.left="50" Canvas.top="50"></button> </Canvas>

看下效果：

恩，不错，但是纯白色的背景很难看诶！换个背景色：

<Canvas Background="lightBlue">    <button Content="button" WIDth="70" Height="30" Canvas.left="50" Canvas.top="50"></button> </Canvas>

呵呵，别骂我，这么简单的也往上写！我只是觉得他背景难看换一下罢了！

大家还记得组合模式么？在布局中，这个模式简直太经典了!

恩！详细的我就不说了，要不又该跑题了！在Silverlight中，也是一样，布局控件一样是可以嵌套的。

我们来看个例子：

<Canvas Background="lightBlue">    <Canvas Canvas.left="50" Canvas.top="50">        <button Canvas.left="0" Canvas.top="0" Content="button" WIDth="70" Height="30"></button>    </Canvas></Canvas>

我们可以清楚地看到，即使是button中设置了Canvas.left=”0”和Canvas.top=”0”，这个button依然与页面的边框有距离，原因就在于Canvas嵌套。这个我就不解释了。

在我们使用Canvas布局时，智能提示会给出这样的东西：

ZIndex，这究竟是个什么东西呢？让我们来看这样一个例子：

<Canvas Background="lightBlue">    <button Content="button" Canvas.left="20" WIDth="60" Height="30" Canvas.top="30"></button>    <button Content="Test" Canvas.left="20" WIDth="60" Height="30" Canvas.top="30"></button></Canvas>

效果如下：

大小，位置都相同，后创建的button当然覆盖前一个button，我们可以理解。

然而使用了ZIndex属性:

<Canvas Background="lightBlue">    <button Content="button" Canvas.ZIndex="2" Canvas.left="20" WIDth="60" Height="30" Canvas.top="30"></button>    <button Content="Test" Canvas.ZIndex="1" Canvas.left="20" WIDth="60" Height="30" Canvas.top="30"></button></Canvas>

这就得到了这样的效果：

这就是ZIndex的作用，我们知道，我们生活在一个三维空间里（我们不考虑四维的空间）。我们声明的Canvas.top和Canvas.left只描述了其中的二维，而ZIndex则描述的是第三维。也就是我们在空间直角坐标系的Z轴。

好，最后说明Canvas的最后一个用途。封装一组控件，还记得在Winform的应用中，我们经常使用Panel来封装一组控件，在Silverlight中，我们最常使用的就是Canvas.

而且，在Silverlight中，布局控件依然支持一系列的事件：

做个简单的例子吧：

<Canvas Background="lightBlue" MouseEnter="Canvas_MouseEnter" name="Canvas1" >    <button Content="button" Canvas.left="20" Canvas.top="20"></button>    <button Content="button" Canvas.left="20" Canvas.top="60"></button>    <button Content="button" Canvas.left="20" Canvas.top="100"></button></Canvas>

然后看后台代码：

private voID Canvas_MouseEnter(object sender,MouseEventArgs e){    foreach (Control c in this.Canvas1.Children)    {        button b = c as button;        if (b != null)        {            b.Content = "按钮";        }    }}