第四章 XAML基础
XAML
XAML是XML的
一个分支,所以
在本书中将使用很多中括号。我们将
在本章XAML的最重要的元素。以本书的篇幅要讨论完所有的XAML元素
是不可能的,但我们展现尽可能多的东西以使您可以以最快的速度掌握XAML。
如果您已经使
用XAML进行WPF应用程序的开发,我们将讨论的大部份东西您都已经知道(第6章也是如此)。尽管如此,还是会有一些细微的差别:Silverlight不像WPF那样完全
支持XAML格式,它只是
一个子集。将来的Silverlight版本将进一步
增加所
支持的元属和
属性的比例,但有些工作在桌面应用的
功能是不能在浏览器中工作的。
所有XAML
文件的根元素都是<Canvas>,在控制Silverlight的地方定义它。<Canvas>元素中的布局元素将在其他章节讲解,现在只需要记住,在每个XAML
文件的开头放置<Canvas>元素并赋与正确的命名空间如下:
<
Canvas
xmlns
=
"http://scheR_209_11845@as.microsoft.com/client/2007"
xmlns:x
=
"http://scheR_209_11845@as.microsoft.com/winfx/2006/xaml">
...
</
Canvas
>
使用文本
在第
一个例子中,使用最多的还是第2章的
Hello World示例里的技术。这一章也从
一个类似于
Hello World的程序开始:我们将在Silverlight内
添加一段
文字。为此,需要使用<TextBlock>元素(在第2章
已经介绍过),有两种
显示文本的
方法:
例4-1使用了后一种
方法输出文字。
需要注意,在Visual
stu@L_
696_21@将出现警告<TextBlock>中不能包含文本,但例4-1证明这是被允许的。
例4-1:
使用简单文本,XAML
文件(Text1.xaml)
<
Canvas
xmlns
=
"http://scheR_209_11845@as.microsoft.com/client/2007"
xmlns:x
=
"http://scheR_209_11845@as.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.htm
l.js)
function
createSilverlight()
Silverlight.createObjectEx({
parentElement: document.getElementById('SilverlightPlugInHost'),
}
l
parentElement属性必须引用控制Silverlight
内容的DOM元素
l
id属性提供了
一个值以使得Silverlight
内容可以被JavaScript
代码访问(详见第8章)
其次,必须把
一个HTML
文件做为浏览器载入的主
页面。它和“HTML code-behind”
文件以及Silverlight.js辅助
文件都做为Visual
stu@L_
696_21@的Silverlight SDK
插件的一部分被安装(也可以随同本书示例
代码一起下载:
http://www.oreilly.com/catalog/9780596516116)。HTML
页面需要包含<div>容器,并在
其中包含跟
parentElement属性相同的ID。最后,这个
页面需要@L_
618_58@前面定义的
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
>
<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">
</div>
</
body
>
</
html
>
提示:很多时候,创建
一个新的
Silverlight应用程序都从复制粘贴开始。当创建一个新的内容,您需要拷贝HTML文件,HTML的JavaScript文件,XAML文件,如果需要,还有XAML的JavaScript文件。为了对示例能更好地理解,我们将只给出HTML文件。如果在HTML的JavaScript文件中没有其它附加信息,将不再列出它的代码。下载本书的代码也是如此。
图4-1
显示的是文本的
默认布局:文本使用Lucida字体,大小为11,颜色为黑色。字体有可能没有在客户端(或服务器端)安装,它是
插件的一部分。因此在
Mac OS X操作系统中也
显示同样的
效果,如图4-2所示。
除了Lucida字体外,还有以下几种字体
支持跨平台:
其它字体,甚至已经在客户端安装,也不被
支持。如果字体不被
支持,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>元素
它定义了前景色(这里前景指的是
文字)。您可以使用颜色
名称(Red,Green,Blue等等),也可以使用由三个值组成的RGB颜色(如:#ff0000,#00ff00,#0000ff, ...),还可以使用aRGB颜色。“a”表示透明度:取值范围在0(00)到255(ff)之间,定义了不透明的程度。如果把它设置为
00,元素将完全透明(比如背景可见,则元素为
不可见)。如果把它设置为
ff,则元素将完全不透明,所以您将不能看到背景。如果使用两者之
间的一个值,则可以透过元素在一定程度上看到背景。例如,
#7fffff00的颜色是黄色(
ff0000),它的透明度为50%(7f的十进制为127)。
例4-4
文字样式,XAML
文件(Text2.xaml
)
<
Canvas
xmlns
=
"http://scheR_209_11845@as.microsoft.com/client/2007"
xmlns:x
=
"http://scheR_209_11845@as.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
Width
=
"200"textwrapping="Wrap"
Text
=
"This text will not fit in one line." />
@H_
262_813@
把
textwrapping属性设置为Nowrap将使文字不会换行,这和默认的情况一样。