SilverLight中的文本和图像显示

一、文本显示

1. 基本用法。

文本主要使用 TextBlock 来显示。最主要的属性就是 Text 。如下：

<Canvas
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <TextBlock Canvas.Top="0" Text="this is a test" />
    <TextBlock Canvas.Top="20">This is another test</TextBlock>
</Canvas>

可以直接设置Text属性，也可以像第二种一样，直接写在标签中间，这叫做内容属性,也称为内联文本元素。

2. 其它属性。

其它基本属性还有

FontFamily：字体。如Arial, Verdana，Courier New，宋体，Microsoft Yahei, 等等。

FontSize：大小。

FontStyle：名字叫样式，但实际上就是是否斜体。可以设为Normal, 或Italic。

FontWeight： 这实际上就是是否粗体。可以设为Normal, 或Bold。

FontStretch: 字体的宽高比。但一般字体都不支持。

TextDecorations: 实际上就是是否带下划线。可以设为None, 或Underline。

Foreground: 字体颜色。

TextWrapping: 当TextBlock设置了Width宽度时，而文字不够显示时，是否换行。可以设为NoWrap, 或Wrap。

例子：第一个演示了大多数属性，后两个演示了当设置宽度时，TextWrapping所起的作用。

<Canvas 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <TextBlock Canvas.Top="0" FontStyle="Italic" FontWeight="Bold" 
               TextDecorations="Underline" Foreground="Red" Text="this is a test" />
    <TextBlock Canvas.Top="20" Width="50">This is another test</TextBlock>
    <TextBlock Canvas.Top="40" Width="50" TextWrapping="Wrap">This is another test</TextBlock>
</Canvas>

3. TextBlock中的Run

事实上，上面的基本用法中，TextBlock中的内容属性并不是Text。也就是直接写成

<TextBlock>some text</TextBlock>, 这样并不是设置了TextBlock的Text属性为“some text”，而是把它加入到了TextBlock的Inlines属性中。Inlines属性是一个对象集合，可以放<Run>和<LineBreak>。<Run>里面就可以放文字，而<LineBreak/>就是换行，跟网页中的<br />是一样的， 如下：

<Canvas 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <TextBlock>
        <Run>This is</Run>
        <Run>a test</Run>
        <LineBreak />
        <Run>This is another test</Run>
    </TextBlock>
</Canvas>

使用这种方式的好处就是可以单独设置每个Run的文字属性。如下：

<Canvas 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <TextBlock>
        <Run FontStyle="Italic" FontFamily="Verdana" Foreground="Red">Silverlight</Run>
        <Run FontSize="30" FontFamily="Arial" Foreground="Blue">is</Run>
        <Run FontSize="90" FontFamily="Georgia" Foreground="Orange">very</Run>
        <LineBreak />
        <Run FontFamily="Courier New" FontWeight="Bold" Foreground="Green" TextDecorations="Underline">cool</Run>
    </TextBlock>
</Canvas>

4. 最后说一下

如果编程取得TextBlock的宽高，不要用Width, Height, 而是用ActualWidth和ActualHeight. 也就是实际大小和所设大小很有可能是不一样的。

还有如果是编程设置Inlines属性来更改TextBlock的文本时，可以使用Text属性来取得，因为通过Inlines属性添加内容时，也会把无格式的文本添加到Text属性的后面。

二、图像显示

1. 基本用法

图像就是使用<image>来显示的，设置其Source属性就可以了。如：

<Canvas 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Image Canvas.Top="10" Canvas.Left="20" Source="Penguins_Small.jpg" />
</Canvas>

2. 主要属性

其它的主要属性还有：

Stretch: 拉伸。可以设为None, Uniform, UniformToFill, Fill四个值。None就是不拉伸。Unifrom就是按比例进行拉伸。UniformToFill也是按比例进行拉伸，但是多余部分会被裁掉。Fill就是不按比例拉伸，完全填充，会破坏图像的比例。

Clip：裁剪。这个和原来说过的几何形状中的裁剪是一回事，这里就不说了。

OpacityMask: 透明遮罩。这是一个画刷，现在还没说到画刷呢，以后再说。

例子:

将Canvas的背景色设为黄色, 好看出来. 当Stretch设为None时, 图像按原始大小显示出来.

<Canvas Width="250" Height="200" Background="yellow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Image Width="250" Height="200" Stretch="None" Source="Penguins_Small.jpg" />
</Canvas>

当Stretch设为Fill时, 将看不到背景黄色了，图像完全填充了，但这时图像也失真了。

<Canvas Width="250" Height="250" Background="yellow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Image Width="250" Height="250" Stretch="Fill" Source="Penguins_Small.jpg" />
</Canvas>

当Stretch设为Uniform时, 图像是按比例拉伸，但是宽度或高度有一个满足就不再拉伸，所以还是显示在背景上。

<Canvas Width="250" Height="250" Background="yellow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Image Width="250" Height="250" Stretch="Uniform" Source="Penguins_Small.jpg" />
</Canvas>

当Stretch设为UniformToFill时, 这时图像也是按比例拉伸，但是宽度和高度都会等比例拉伸，多出来的部分会裁掉。

<Canvas Width="250" Height="250" Background="yellow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Image Width="250" Height="250" Stretch="UniformToFill" Source="Penguins_Small.jpg" />
</Canvas>