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

ZZ:使用.NET语言开发Silverlight应用程序入门(二):界面和对象模型,第1张

概述(本文转载自Silverlight上海开发团队Blog,是“使用.NET语言开发Silverlight应用程序入门”系列之第二篇。转自http://blog.csdn.net/SilverlightShanghai/archive/2007/09/28/1805279.aspx. 如果有对于Silverlight技术本身的疑问,看法,意见,建议,或者是对于希望看到Blog的内容有建议,请访问 ht (本文转载自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容器 和各种元素

任 何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容器。我们可以在这个根容器里加入子容器或者其他元素。每个元素都有一个标签相对应。比如在子容器中添加一个矩形,并在根容器中添加一个椭圆形:



     Canvas

        
Rectangle > 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" />


< Rectangle  x:name ="myRect"  Canvas.top ="20"  Canvas.left  WIDth ="100"  Height  Fill ="Blue"  stroke ="Red"  strokeThickness ="3"   />

>

则可以看到以下效果:

 

其中Fill指定了填充色,stroke和strokeThickness定制了形状的轮廓线条的颜色和粗细。我们可以看到根Canvas下的子元素(包括子容器Canvas)的位置属性均表示相对上一级Canvas的坐标位置。值得注意的是这里虽然矩形myRect超出了subCanvas定义的边界范围,但它并不会被subCanvas剪裁,且仍属于subCanvas中的元素。

顺便一提,目前我们只有Canvas一种容器,在不久的将来,Silverlight将会提供更多的容器,使布局管理更方便。

4. 对象模型

在WPF中,XAML是.NET代码的xml表现形式;而在Silverlight中,我们同样有与XAML相对应的.NET语言编程方式。其中,每一个元素对应一个对象,元素属性在其.NET对象中都有对应的属性。例如先前一个例子中的矩形就可以用以下C#语言来表示:

Rectangle myRect = new  Rectangle();

myRect .SetValue(Canvas.topProperty, 
117 );

myRect .SetValue(Canvas.leftProperty,0);">123
);

myRect .WIDth 
100 ;

myRect .Height 
;

SolIDcolorBrush brushBlue 
 SolIDcolorBrush();

brushBlue.color 
=  colors.Blue;

myRect .Fill 
 brushBlue;

SolIDcolorBrush brushred 
 SolIDcolorBrush();

brushred.color 
 colors.Red;

myRect .stroke 
 brushred;

myRect .strokeThickness 
3;

 这里SolIDcolorBrush对象派生自Brush,是画刷的一种。Silverlight里定义了好几种不同的画刷对图形进行填充。属性Fill的默认画刷是SolIDcolorBrush,因此可以在.xaml文件中可以直接给Fill属性赋值,但在.NET语言中则必须明确指出画刷的类型。有关画刷的具体内容我们会在以后介绍。

刚才用C#定义出来的矩形还是独立的,如果要把它在界面上表示出来,则需要在其后加上下面这句代码将矩形加入上一级Canvas中:

Children.Add(myRect);

5. 参考资料

Silverlight中所有的元素对象参考 Silverlight中所有的元素属性参考 使用.NET语言开发Silverlight应用程序入门(一):了解项目结构

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostID=1811443

总结

以上是内存溢出为你收集整理的ZZ:使用.NET语言开发Silverlight应用程序入门(二):界面和对象模型全部内容,希望文章能够帮你解决ZZ:使用.NET语言开发Silverlight应用程序入门(二):界面和对象模型所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1059277.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存