使用图像
虽然Silverlight是基于矢量的技术,但它也支持像素图像。XAML的<
Image>元素用于处理图像。除了默认的属性如
Canvas.Left,
Canvas.Top,
Height和
Width,<
Image>还需要知道要显示哪张图像。这个信息需要在
Source属性中提供。你可以使用本地和远程序的URL,它支持两种图像格式:JPEG和PNG。例4-12是代码,图4-11是相应的输出。
<
Canvas
xmlns
=
"http://schemas.microsoft.com/client/2007"
xmlns:x
=
"http://schemas.microsoft.com/winfx/2006/xaml">
<
Image
Source
=
"silverlight.png" />
</
Canvas
>
图
4-11 Silverlight
中的基于像素的图像
提示:使用图像时,可以使用
JavaScript跟踪数据传输,这将在第9章讲解。
使用画刷
最后一个用于设计静态(也就是不需要移动的)UI的基础XAML元素是brush。画刷在使用时就象使用真的画刷绘画一样。尽管如此,Silverlight的画刷提供了更多:可以画不同的颜色,可以画渐变,可以画图像,甚至可以画视频。
您可以对一些属性有选择地使用画刷如:
Background,
Fill或
Stroke。然而,这需要改变语法,而不是直接使用属性。您应该使用子元素<ElementYouWantToBrush.OldAttribute>。例如,填充一个矩形应该使用如下语句:
<
Rectangle
>
<
Rectangle.Fill
>
<!
—
在这里使用画刷
-->
</
Rectangle.Fill
>
</
Rectangle
>
最简单的画刷叫
SolidColorBrush,因为它只使用纯色,没有颜色变化或渐变效果。实际上,在迄今为止本书所使用的属性如
Background,
Fill或
Stroke中已经隐式地使用了
SolidColorBrush。但还是使用选择性语法比较好些。例4-13的输出结果跟例4-11相同,但它使用了<
SolidColorBrush>元素。需要注意,通过定义它的
Color属性来决定画刷的颜色。
例4-13
使用纯色画刷,XAML
文件(SolidColorBrush.xaml
)
<
Canvas
xmlns
=
"http://schemas.microsoft.com/client/2007"
xmlns:x
=
"http://schemas.microsoft.com/winfx/2006/xaml"
Width
=
"500"Height="500"Background="White">
<
Rectangle
Canvas.Left
=
"50"Canvas.Top="50"Width="200"Height="200"
Canvas.ZIndex
=
"5">
<
Rectangle.Fill
>
<
SolidColorBrush
Color
=
"Red" />
</
Rectangle.Fill
>
</
Rectangle
>
<
Rectangle
Canvas.Left
=
"100"Canvas.Top="100"Width="200"Height="200"
Canvas.ZIndex
=
"4">
<
Rectangle.Fill
>
<
SolidColorBrush
Color
=
"Green" />
</
Rectangle.Fill
>
</
Rectangle
>
<
Rectangle
Canvas.Left
=
"150"Canvas.Top="150"Width="200"Height="200"
Canvas.ZIndex
=
"3">
<
Rectangle.Fill
>
<
SolidColorBrush
Color
=
"Yellow" />
</
Rectangle.Fill
>
</
Rectangle
>
<
Rectangle
Canvas.Left
=
"200"Canvas.Top="200"Width="200"Height="200"
Canvas.ZIndex
=
"2">
<
Rectangle.Fill
>
<
SolidColorBrush
Color
=
"Blue" />
</
Rectangle.Fill
>
</
Rectangle
>
<
TextBlock
Canvas.Left
=
"250"Canvas.Top="250"FontSize="20"
Text
=
"Silverlight"Canvas.ZIndex="1"/>
</
Canvas
>
画刷可以做单一的事情。最典型的应用是渐变。普通形式是的渐变是放射状渐变:渐变开始于一个给定的原点(经常是一个对象的中心)并呈放射状变化直到对象的边界。您可以定义一个任意的数字表示终点:这是一些和指定颜色匹配的点。所以您所要做的只是定义终点和相关颜色。Silverlight将自动计算并绘制其中的过渡颜色。画刷的XAML元素是<
RadiaGradientBrush>.。
使用这种渐变需定义以下几个参数:
Center
对象的中点。您需要给x和y坐标提供一个0到1之间的值。Silverlight会根据目标对象的实际尺寸计算实际的坐标值。
GradientOrigin
渐变的中心点。也是为坐标值提供一个0到1之间的值。
RadiusX
,RadiusY
渐变的x轴和y轴半径,也是一个0到1之间的值。
终止色使用<
GradientStop>元素定义。您需要提供颜色(
Color属性)和位移(
Offset属性,一个0到1之间的值)。例4-14演示了一个拥有三种终止色的放射状渐变,图4-12是输出效果。
Example 4-14
使用放射状渐变,XAML
文件(RadialGradientBrush.xaml
)
<
Canvas
xmlns
=
"http://schemas.microsoft.com/client/2007"
xmlns:x
=
"http://schemas.microsoft.com/winfx/2006/xaml"
Width
=
"600"Height="600">
<
Ellipse
Width
=
"400"Height="400"Stroke="Black">
<
Ellipse.Fill
>
<
RadialGradientBrush
Center
=
"0.5 0.5"GradientOrigin="0.33 0.67"
RadiusX
=
"0.5"RadiusY="0.5">
<
GradientStop
Color
=
"Red"Offset="0"/>
<
GradientStop
Color
=
"Green"Offset="0.33"/>
<
GradientStop
Color
=
"Blue"Offset="0.67"/>
</
RadialGradientBrush
>
</
Ellipse.Fill
>
</
Ellipse
>
</
Canvas
>
图
4-12
放射状渐变,您是否看见中点和终止色?
另外一种渐变是线性渐变:颜色的变化不是呈放射状的,改为沿着一条变轴。相关的XAML元素是<
LinearGradialBrush>,需要一个起点和终点,再一次使用0到1之间的值,将会被映射为真实的坐标值。例4-15演示了如何使用<
LinearGradialBrush>,还需要一条表示渐变方向的直线和终点。效果如图4-13所示。
例4-15 使用线性渐变,XAML文件(LinearGradientBrush.xaml)
<
Canvas
xmlns
=
"http://schemas.microsoft.com/client/2007"
xmlns:x
=
"http://schemas.microsoft.com/winfx/2006/xaml"
Width
=
"600"Height="600">
<
Rectangle
Width
=
"600"Height="600"Stroke="Black">
<
Rectangle.Fill
>
<
LinearGradientBrush
StartPoint
=
"0.1 0.9"EndPoint="0.9 0.1">
<
GradientStop
Color
=
"Red"Offset="0"/>
<
GradientStop
Color
=
"Green"Offset="0.33"/>
<
GradientStop
Color
=
"Blue"Offset="0.67"/>
</
LinearGradientBrush
>
</
Rectangle.Fill
>
</
Rectangle
>
<
Path
Stroke
=
"Black"Data="M 55
535 L
65
545 M
65
535 L
55 545
" />
<
Path
Stroke
=
"Black"Data="M 215
375 L
225
385 M
225
375 L
215 385
" />
<
Path
Stroke
=
"Black"Data="M 375
215 L
385
225 M
385
215 L
375 225
" />
<
Line
X1
=
"60"Y1="540"X2="540"Y2="60"Stroke="#
7f
000000
" />
</
Canvas
>
最后和种画刷使用一种特殊的方式进行填充:一张图版或一个视频文件。当您使用图像填充一个对象时,Silverlight会自动拉伸图像以适应舞台。您也可以在一个矩形内椭圆内放置一段视频做为背景。
ImageBrush和VideoBrush的使用非常相似。你需要在相关属性内提供源文件的文件名:<
ImageBrush>的
ImageSource和<
VideoBrush>的
SourceName。您可以使用
Stretch属性来指示Silverlight使用何种方式在舞台内填充,有以下选项:
None
保持原来的尺寸
Fill
完全填充可用区域,这样将不能保持纵横比
Uniform
进行拉伸并保持纵横比,直到宽或高适合显示区域
UniformToFill
进行拉伸并保持纵横比,直到宽和高都大于或等于显示区域的宽和高,这将导致部分内容被裁减。
例4-16演示了如何使用图像填充椭圆。如图4-14所示,这如我们期望的那样使用其他的形状来显示显示矩形图像和视频。关于使用视频的更多信息请参考第7章。
例4-16 使用图像画刷,XAML文件(ImageBrush.xaml)
<
Canvas
xmlns
=
"http://schemas.microsoft.com/client/2007"
xmlns:x
=
"http://schemas.microsoft.com/winfx/2006/xaml"
Width
=
"600"Height="600">
<
Ellipse
Canvas.Top
=
"75"Width="300"Height="150"Stroke="Black">
<
Ellipse.Fill
>
<
ImageBrush
ImageSource
=
"silverlight.pan" />
</
Ellipse.Fill
>
</
Ellipse
>
</
Canvas
>
提示:有另一种方法可以定义对象的轮廓,使用
Clip属性并提供一个几何对象做为它的值,并得到想要的轮廓。参考Silverlight SDK可以得到更多信息(话题是:“Silverlight Geometries Overview”)。
XAML中包含了太多的形状,以至于不能一一说明,但我们讨论了最重要的那部分。说实话UI一般使用设计工具生成;做为一个程序员,您只需要添加相应的功能,我们将马上在下一章讲述这些!
进阶读物
XAML in a Nutshell(
http://www.oreilly.com/catalog/xamlian/),作者:Lori A. MacVittie(O’Reilly出版社)
对XAML进行了非常棒地介绍。