在接下来的几篇文章中,我将来介绍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 = "按钮"; } } }好了,看看效果吧:
好了,搞定!
今天Canvas布局就写到这里,要收拾行李了,明天坐车回北京。
欢迎大家继续关注《Silverlight玩转控件》系列,也希望大家多提出宝贵意见,谢谢。