ZZ:使用.NET语言开发Silverlight应用程序入门二：界面和对象模型

(本文转载自Silverlight上海开发团队Blog，是“使用.NET语言开发Silverlight应用程序入门”系列之第二篇。转自http://blog.csdn.net/SilverlightShanghai/archive/2007/09/28/1805279.aspx. 如果有对于Silverlight技术本身的疑问，看法，意见，建议，或者是对于希望看到Blog的内容有建议，请访问 http://blog.csdn.net/SilverlightShanghai，留下你的宝贵意见)

Silverlight是用XAML语言来描述界面的。XAML是eXtensible Application Markup Language的缩写，也就是可扩展的应用程序标记语言。在WPF（Windows Presentation Foundation）中，第一次出现了XAML，用来描述.NET语言。而Silverlight中的XAML只用来对用户界面作出统一的描述，弥补 HTML/CSS等在界面定制上的不足，并使开发人员和设计人员可以运用同一种语言进行交流，减少额外的工作量。因此，Silverlight XAML的语法相对WPF中的XAML相对要简单一些，也更容易上手。

虽然我们可以使用Microsoft Expression Studio的视觉化方式设计界面，但是了解XAML的基本语法可以帮助我们更好的定制自己的界面。如果想要直接编写XAML，使用Visual Studio 2008则可以提高编写的效率，因为里面有自动感应功能（Intellisense）。

2. Canvas容器<Canvas />和各种元素

任 何Silverlight应用程序的界面描述都是以一个叫Canvas（画布）的容器为根开始的。当我们在Microsoft Expression Blend或者Visual Studio 2008中创建一个新的Silverlight项目后，总会生成一个只包含根Canvas的.xaml文件，如下所示：

< Canvas  x:Name ="parentCanvas"

xmlns ="http://schemas.microsoft.com/client/2007"  

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"  

Loaded ="Page_Loaded"  

x:Class ="SilverlightTestProject.Page;assembly=ClientBin/SilverlightTestProject.dll"

Width ="640"

Height ="480"

Background ="White" >

</ Canvas

 任何元素都必须添加在这个根Canvas容器的里面，因为一个界面里只能有一个这样的根Canvas容器。我们可以在这个根容器里加入子容器或者其他元素。每个元素都有一个标签相对应。比如在子容器中添加一个矩形，并在根容器中添加一个椭圆形：

    

         Rectangle ></

     Ellipse

Silverlight定义的常见的几何图形包括矩形<Rectangle />，椭圆<Ellipse/>，直线<Line />，多边形<Polygon />，多叉线<PolyLine />（不封闭的折线），路径<Path />（可以画出任意的形状和线条，比如不封闭的曲线），等等。<TextBlock />允许我们定制显示在界面上的文字。  

3. 附加元素属性

尝试以上代码，可以发觉我们其实看不到任何我们想要的性状，因为它们的默认的大小属性均为0。可见，仅使用这些元素标签还不足以得到我们想要得形状，我们需要在标签中设置它的属性值，确定它的大小、位置等等。

观察根Canvas，我们已经可以了解到一些属性的定制，比如只在根节点出现的定义xml名字空间（xmlns）以及自定义的xml名字空间（xmlns:x）。其中还有一些常用的属性，如宽（Width），高（Height）。在Canvas中，这两个属性既可以用像素值来表示，也可以用百分比来表示。x:Name表示该元素示例的名称，有了这个名称，我们就可以在.NET代码中操作这个元素示例。Background属性设置了背景的颜色，不设置这个值，则该元素透明。

每个元素都有属于自己的一组属性。比如，我们可以将刚才的代码改进一下：

>

    

    <Canvas x:Name="subCanvas" Canvas.Left="123" Canvas.Top="117" Width="53" Height="39">

     < Ellipse  Fill ="Yellow"  Height ="100"  Width ="200"  StrokeThickness ="2"  Stroke ="Black" />

</ Canvas >

< Rectangle  x:Name ="myRect"  Canvas.Top ="20"  Canvas.Left  Width ="100"  Height  Fill ="Blue"  Stroke ="Red"  StrokeThickness ="3"   />

</ Canvas >