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

概述第四章 XAML基础 XAML XAML是XML的一个分支，所以在本书中将使用很多中括号。我们将在本章XAML的最重要的元素。以本书的篇幅要讨论完所有的XAML元素是不可能的，但我们展现尽可能多的东西以使您可以以最快的速度掌握XAML。 如果您已经使用XAML进行WPF应用程序的开发，我们将讨论的大部份东西您都已经知道（第6章也是如此）。尽管如此，还是会有一些细微的差别：Silverlight不像 第四章 XAML基础 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 地址进行修改） 注意几个高亮的代码元素： 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 "-//W 3C //DTD HTML 4.01 Transitional//EN"  "http://www.w 3c .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" 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>元素 这个元素定义了一个换行符 Foregroudn 属性 它定义了前景色（这里前景指的是文字）。您可以使用颜色名称（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 ,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>。   总结

以上是内存溢出为你收集整理的Essential Silverlight翻译连载---第四章 XAML基础全部内容，希望文章能够帮你解决Essential Silverlight翻译连载---第四章 XAML基础所遇到的程序开发问题。

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