TextBlock控件全攻略

[Silverlight]TextBlock控件全攻略

TextBlock是Silverlight中的一个既有用又常用的控件。我们可以通过TextBlock呈现只读的文本，如

<TextBlock Text="露露非典神鱼地雷炸弹什么的"></TextBlock>

 

很好很方便。

为了更好的控制呈现的文字，M$为该控件提供了很多属性，下面做一个介绍

1. FontFamily. 顾名思义，字体名称

<TextBlock Text="51MVC,just for MVC" FontFamily="Courier New"  Canvas.Top="100" Canvas.Left="100"></TextBlock>
<TextBlock Text="51MVC,just for MVC" FontFamily="Times New Roman" Canvas.Top="110" Canvas.Left="100"></TextBlock>
<TextBlock Text="51MVC,just for MVC" FontFamily="Verdana" Canvas.Top="120" Canvas.Left="100"></TextBlock>

注意，若需要在Silverlight中添加对中文字体的支持，请参考Silverlight 2 Beta 2 加载中文字体完全解决方案

2. FontSize. 文字大小，以像素为单位

<TextBlock Text="51MVC,just for MVC" FontSize="10" Canvas.Top="100" Canvas.Left="100"></TextBlock>
<TextBlock Text="51MVC,just for MVC" FontSize="20" Canvas.Top="110" Canvas.Left="100"></TextBlock>
<TextBlock Text="51MVC,just for MVC" FontSize="30" Canvas.Top="120" Canvas.Left="100"></TextBlock>

4 FontStyle: 可设置两种值: Normal, Italic（斜体）

<TextBlock Text="51MVC,just for MVC" FontStyle="Normal" FontSize="20" Canvas.Top="100" Canvas.Left="100"></TextBlock>
<TextBlock Text="51MVC,just for MVC" FontStyle="Italic"  FontSize="20" Canvas.Top="120" Canvas.Left="100"></TextBlock>

5 FontStetch. 按比例缩放文字，它提供一些枚举值 如下表

值	usWidthClass	普通纵横比的百分比
UltraCondensed	1	50.0%
ExtraCondensed	2	62.5%
Condensed	3	75.0%
SemiCondensed	4	87.5%
Normal	5	100.0%
Medium	5	100.0%
SemiExpanded	6	112.5%
Expanded	7	125.0%
ExtraExpanded	8	150.0%
UltraExpanded	9	200.0%

这里要注意，这些值是否起作用还要取决于你选择的字体。

6 FontWeight. 文字的胖瘦。可设置为Thin, ExtraLight, Light, Normal, Medium, SemiBold, Bold, ExtraBold, Black, ExtraBlack.这些值是否起作用还要取决于你所选择的字体。

<TextBlock Text="51MVC,just for MVC" FontWeight="Normal" Canvas.Top="100" Canvas.Left="100"></TextBlock>
<TextBlock Text="51MVC,just for MVC" FontWeight="Bold" Canvas.Top="120" Canvas.Left="100"></TextBlock>

7. Foreground.  通过这个属性可以设置文字的前景色填充。不但可以使用颜色值，还可以通过设置solid color, gradient, image 及 video笔刷进行填充。还是那句话：很好，很强大

<TextBlock Text="51MVC,just for MVC" Foreground="Purple" Canvas.Top="100" Canvas.Left="100"></TextBlock>
        <TextBlock Text="51MVC,just for MVC" Canvas.Top="120" Canvas.Left="100">
            <TextBlock.Foreground> 
                <LinearGradientBrush> 
                    <GradientStop Color="#FF0000FF" Offset="0.0" /> 
                    <GradientStop Color="#FFEEEEEE" Offset="1.0" /> 
                </LinearGradientBrush> 
            </TextBlock.Foreground>
        </TextBlock>

6. TextDecorations. 对文字的修饰，当前Silverlight2只支持underline.

<TextBlock Text="51MVC,just for MVC" TextDecorations="underline" Canvas.Top="100" Canvas.Left="100"></TextBlock>

7. Runs. 你可以在TextBlock中使用Run标签创建内联元素，每个Run都可以设置上面提到的属性。

<TextBlock Canvas.Top="100" Canvas.Left="100">
        <Run TextDecorations="underline">51MVC,</Run>
        <Run Foreground="Purple"> just for MVC</Run>
        </TextBlock>

另外这里还要介绍一下TextBlock中文字换行的技巧

当我们使用了一个固定宽度的TextBlock时，默认情况下文字会被截断而不自动换行，如下面的例子

<ContentControl Width="100" Canvas.Top="100" Canvas.Left="100">
            <TextBlock>         
            露露神鱼非典地雷炸弹化妆品等都是好人
            --年轻的F
            </TextBlock>
        </ContentControl>

我们可以通过设置TextWrapping属性的值为“Wrap”来强制其换行

<ContentControl Width="100" Canvas.Top="100" Canvas.Left="100">
    <TextBlock TextWrapping="Wrap">         
    露露神鱼非典地雷炸弹化妆品等都是好人
    --年轻的F
    </TextBlock>
</ContentControl>

另外Silverlight还提供了LineBreak标签，它的作用相当于html中的<br />,直接看例子

<ContentControl Width="100" Canvas.Top="100" Canvas.Left="100">
      <TextBlock>         
            露露神鱼非典
            <LineBreak/>
            地雷炸弹化妆品等
            <LineBreak/>
            都是好人
            <LineBreak/>
            --年轻的F
       </TextBlock>
</ContentControl>