none
Essential Silverlight翻译连载---第四章 XAML基础 RRS feed

  • 常规讨论

  • 上周都在玩游戏哈,连着玩了魔兽红警3和部落战争和星际文明,现在开始继续学sl了。。
    原文看这个,我这里不清楚,http://cgbluesky.blog.163.com/blog/#pn2
    XAML

    XAML是XML的一个分支,所以在本书中将使用很多中括号。我们将在本章XAML的最重要的元素。以本书的篇幅要讨论完所有的XAML元素是不可能的,但我们展现尽可能多的东西以使您可以以最快的速度掌握XAML。

    如果您已经使用XAML进行WPF应用程序的开发,我们将讨论的大部份东西您都已经知道(第6章也是如此)。尽管如此,还是会有一些细微的差别:Silverlight不像WPF那样完全支持XAML格式,它只是一个子集。将来的Silverlight版本将进一步增加所支持的元属和属性的比例,但有些工作在桌面应用的功能是不能在浏览器中工作的。

    所有XAML文件的根元素都是<Canvas>,在控制Silverlight的地方定义它。<Canvas>元素中的布局元素将在其他章节讲解,现在只需要记住,在每个XAML文件的开头放置<Canvas>元素并赋与正确的命名空间如下:

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

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

         ...

    </Canvas>
    使用文本

    在第一个例子中,使用最多的还是第2章的Hello World示例里的技术。这一章也从一个类似于Hello World的程序开始:我们将在Silverlight内添加一段文字。为此,需要使用<TextBlock>元素(在第2章已经介绍过),有两种显示文本的方法:

    l         在元素的Text属性内

    l         在元素内使用一个文字节点

    例4-1使用了后一种方法输出文字。需要注意,在Visual Studio将出现警告<TextBlock>中不能包含文本,但例4-1证明这是被允许的。

    例4-1:使用简单文本,XAML文件(Text1.xaml)

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

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

    <TextBlock>Silverlight</TextBlock>

    </Canvas>

    根据第2章所讲述的Silverlight应用程序的结构,您需要添加两个文件以使得这个例子可以在浏览器中工作。首先需要一个JavaScript辅助文件以初始化Silverlight内容,如例4-2所示。因为这个JavaScript文件依赖于HTML文件,我们把它称之为“HTML code-behind”,它将贯穿本书。在一些例子中将会提到“HTML JavaScript file”文件(跟“XAML Javascript file“文件以示区别,将在下一章介绍)。

    例4-2:使用简单文本,HTML JavaScript文件(Text1.html.js)

    function createSilverlight()

    {

         Silverlight.createObjectEx({

             source: 'Text1.xaml',

             parentElement: document.getElementById('SilverlightPlugInHost'),

             id: 'SilverlightPlugIn',

             properties: {

                  width: '400',

                  height: '400',

                  background:'#ffffff',

                isWindowless: 'false',

                  version: '1.0'

             },

             events: {

                 onError: null,

             }      

         });

    }



    (译者注:如果不懂如何运行,请参考我的博客:

    http://cgbluesky.blog.163.com/blog/static/241235582008070198710/

    并对相应的URL地址进行修改)

    (lymna注:其实用Blend直接开发会自动生成这些代码,则可以把那些代码理解下就更明白sl是怎么运行的啦)

    注意几个高亮的代码元素:

    l         source属性必须是XAML文件的URL地址

    l         parentElement属性必须引用控制Silverlight内容的DOM元素

    l         id属性提供了一个值以使得Silverlight内容可以被JavaScript代码访问(详见第8章)

    其次,必须把一个HTML文件做为浏览器载入的主页面。它和“HTML code-behind”文件以及Silverlight.js辅助文件都做为Visual Studio的Silverlight SDK插件的一部分被安装(也可以随同本书示例代码一起下载:http://www.oreilly.com/catalog/9780596516116)。HTML页面需要包含<div>容器,并在其中包含跟parentElement属性相同的ID。最后,这个页面需要调用前面定义的createSilverlight()方法。例4-3包括了所有代码,图4-1显示了输出效果。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

    "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

         <title>Silverlight</title>



         <script type="text/javascript" src="Silverlight.js"></script>

         <script type="text/javascript" originalAttribute="src" originalPath="Silverlight.js"></script>

         <script type="text/javascript" src="Text1.html.js"></script>

    </head>



    <body>

         <div id="SilverlightPlugInHost">

             <script type="text/javascript">

                  createSilverlight();

             </script>

         </div>

    </body>

    </html>



    提示:很多时候,创建一个新的Silverlight 应用程序都从复制粘贴开始。当创建一个新的内容,您需要拷贝HTML文件,HTML的JavaScript文件,XAML文件,如果需要,还有XAML的 JavaScript文件。为了对示例能更好地理解,我们将只给出HTML文件。如果在HTML的JavaScript文件中没有其它附加信息,将不再列出它的代码。下载本书的代码也是如此。

    图4-1显示的是文本的默认布局:文本使用Lucida字体,大小为11,颜色为黑色。字体有可能没有在客户端(或服务器端)安装,它是插件的一部分。因此在Mac OS X操作系统中也显示同样的效果,如图4-2所示。



    除了Lucida字体外,还有以下几种字体支持跨平台:

    l         Arial

    l         Arial Black

    l         Comic Sans MS

    l         Courier New

    l         Georgia

    l         Times New Roman

    l         Trebuchet MS

    l         Verdana

    其它字体,甚至已经在客户端安装,也不被支持。如果字体不被支持,Silverlight将使用Lucida。

    有几种方法改变文字的字体。首先,<TextBlock>的一些属性就派得上用场:

    FontFamily

    字体的名字(如Arial)

    FontSize

    字体的大小(如12)

    FontWeight

    如何显示字体(如:Thin,ExtraLight,Light,Normal,Medium,SemiBlod,Blod,ExtraBlod,Black和ExtraBlack;很不幸,智能提示会给您提供其他的错误选项)

    您可以很容易地使用<TextBlock>元素中的这些属性。然而如果您喜欢在<TextBlock>中使用不同要格式,可以有不同选项。在<TextBlock>中使用<Run>元素可以提供一个inline格式选项。跟HTML进行对比:<TextBlock>好比<div>元素,<Run>好比<div>中的<span>元素。<div>元素的样式提供了文字的基础布局,但<span>的样式可能会覆盖<div>的样式。

    例4-4显示了一些样式选项。这里也介绍了一个新的XAML元素:

    <LineBreak>元素

    这个元素定义了一个换行符

    Foreground属性

    它定义了前景色(这里前景指的是文字)。您可以使用颜色名称(Red,Green,Blue等等),也可以使用由三个值组成的RGB颜色(如:#ff0000,#00ff00,#0000ff, ...),还可以使用aRGB颜色。“a”表示透明度:取值范围在0(00)到255(ff)之间,定义了不透明的程度。如果把它设置为00,元素将完全透明(比如背景可见,则元素为不可见)。如果把它设置为ff,则元素将完全不透明,所以您将不能看到背景。如果使用两者之间的一个值,则可以透过元素在一定程度上看到背景。例如,#7fffff00的颜色是黄色(ff0000),它的透明度为50%(7f的十进制为127)。

    提示:也可以使用Backguound属性设置元素的背景色。-------------

    图4-3是例4-4在浏览器中输出的效果。

    例4-4 文字样式,XAML文件(Text2.xaml)

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

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

    <TextBlock Foreground="Blue" originalAttribute="src" originalPath="Text1.html.js"></script>

    </head>



    <body>

         <div id="SilverlightPlugInHost">

             <script type="text/javascript">

                  createSilverlight();

             </script>

         </div>

    </body>

    </html>



    提示:很多时候,创建一个新的Silverlight 应用程序都从复制粘贴开始。当创建一个新的内容,您需要拷贝HTML文件,HTML的JavaScript文件,XAML文件,如果需要,还有XAML的 JavaScript文件。为了对示例能更好地理解,我们将只给出HTML文件。如果在HTML的JavaScript文件中没有其它附加信息,将不再列出它的代码。下载本书的代码也是如此。

    图4-1显示的是文本的默认布局:文本使用Lucida字体,大小为11,颜色为黑色。字体有可能没有在客户端(或服务器端)安装,它是插件的一部分。因此在Mac OS X操作系统中也显示同样的效果,如图4-2所示。



    除了Lucida字体外,还有以下几种字体支持跨平台:

    l         Arial

    l         Arial Black

    l         Comic Sans MS

    l         Courier New

    l         Georgia

    l         Times New Roman

    l         Trebuchet MS

    l         Verdana

    其它字体,甚至已经在客户端安装,也不被支持。如果字体不被支持,Silverlight将使用Lucida。

    有几种方法改变文字的字体。首先,<TextBlock>的一些属性就派得上用场:

    FontFamily

    字体的名字(如Arial)

    FontSize

    字体的大小(如12)

    FontWeight

    如何显示字体(如:Thin,ExtraLight,Light,Normal,Medium,SemiBlod,Blod,ExtraBlod,Black和ExtraBlack;很不幸,智能提示会给您提供其他的错误选项)

    您可以很容易地使用<TextBlock>元素中的这些属性。然而如果您喜欢在<TextBlock>中使用不同要格式,可以有不同选项。在<TextBlock>中使用<Run>元素可以提供一个inline格式选项。跟HTML进行对比:<TextBlock>好比<div>元素,<Run>好比<div>中的<span>元素。<div>元素的样式提供了文字的基础布局,但<span>的样式可能会覆盖<div>的样式。

    例4-4显示了一些样式选项。这里也介绍了一个新的XAML元素:

    <LineBreak>元素

    这个元素定义了一个换行符

    Foreground属性

    它定义了前景色(这里前景指的是文字)。您可以使用颜色名称(Red,Green,Blue等等),也可以使用由三个值组成的RGB颜色(如:#ff0000,#00ff00,#0000ff, ...),还可以使用aRGB颜色。“a”表示透明度:取值范围在0(00)到255(ff)之间,定义了不透明的程度。如果把它设置为00,元素将完全透明(比如背景可见,则元素为不可见)。如果把它设置为ff,则元素将完全不透明,所以您将不能看到背景。如果使用两者之间的一个值,则可以透过元素在一定程度上看到背景。例如,#7fffff00的颜色是黄色(ff0000),它的透明度为50%(7f的十进制为127)。

    提示:也可以使用Backguound属性设置元素的背景色。-------------

    图4-3是例4-4在浏览器中输出的效果。

    例4-4 文字样式,XAML文件(Text2.xaml)

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

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

    <TextBlock Foreground="Blue" FontFamily="Arial" FontSize="24" FontWeight="Bold">

        Arial,24pt,Bold,Blue

        <LineBreak/>

        <Run FontSize="36" FontWeight="Light">Arial,36pt,Light,Blue</Run>

        <LineBreak/>

        <Run FontFamily="Times New Roman" Foreground="#7fffff00">Times New Roman,

          24pt,Bold,Yellow</Run>

    </TextBlock>

    </Canvas>

    提示:可以在Silverlight应用程序中载入外部的OpenType或TrueType(TTF)字体,这将在第9章讲述。

    文字换行

    默认情况下,<TextBlock>内的文字不会换行,可以通过设置TextWrapping属性为Wrap来使Silverlight中的指文字进行自动换行。您需要给文本指定一个宽度,如:

    <TextBlock Width="200" TextWrapping="Wrap"

                 Text="This text will not fit in one line." />

    把TextWrapping属性设置为NoWrap将使文字不会换行,这和默认的情况一样。
    绘制图形

    大多数标准的可视元素是图形:几何元素使应用程序有了可视化的体验。本章将读者讨论很多的可用选项。

    在讨论不同的图形之前,先讲解格式选项。这有几个选项,它们中很多用于指定特定的图形,但下面3个属性在所有图形中通用:

    Fill

    怎样填充图形的内部,如提供一个颜色

    Stroke

    怎么绘制图形的轮廓,如提供一个颜色

    StrokeThickness

    轮廓线的宽度,使用像素做为单位(必须是一个整数)

    我们从简单的图形开始:使用XAML的<Line>元素来表示一条直线。您需要提供直线的起点和终点并使用Silverlight坐标系统(基于像素,原点为左上角)。相关的属性名称为X1,Y1,X2和Y1,例4-5使用三条直线绘制了一个简单的三角形,图4-4显示了其在浏览器中的输出结果。需要注意,由于轮廓宽度为5,三角形的转角显得并不完美。

    例4-5 由三条线组成的三角形,XAML文件(Line.xaml)

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

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

    <Line Stroke="Red" StrokeThickness="5" X1="200" Y1="50" X2="350" Y2="250" />

    <Line Stroke="Green" StrokeThickness="5" X1="350" Y1="250" X2="50" Y2="250" />

    <Line Stroke="Blue" StrokeThickness="5" X1="50" Y1="250" X2="200" Y2="50" />

    </Canvas>

    (译者注:如果不知道如何运行代码,请参考

    http://cgbluesky.blog.163.com/blog/static/241235582008070198710/



    如果您想创建一个封闭的形状,如三角形,四边形等等,最好使用<Polygon>元素,它包含了所有点,在Points属性中,需要提供一组点坐标,使用格式如下:

    X1,Y1,X2,Y2,X3,Y3,...Xn,Yn

    绘制算法如下:第1个点连接第2个点,第2个点连接第3个点,依此类推,直到第点n-1连接点n,最后,Silverlight会自动连接点n和点1。
    提示:如果您希望忽略最后一步,如创建一个不封闭的图形,希望最后一个点跟第一个点不连接,请使用<Polyline>而不是<Polygon>。

    My blog: http://blog.csdn.net/dotfun http://dotfun.cnblogs.com

    My contact: QQ:372900288 E-mail:372900288@qq.com msn:sellnet007@hotmail.com

    2009年3月11日 8:23
    版主