none
Essential Silverlight翻译连载---第四章 续3 RRS feed

  • 常规讨论

  • 使用图像

    虽然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="#7f000000" />

    </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进行了非常棒地介绍。

    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:22
    版主