[深入浅出WP8.1(Runtime)]文本块（TextBlock）

时间：2022-12-08 18:21:31

4.3 文本块（TextBlock）

文本块（TextBlock）控件是用于显示少量文本的轻量控件，可以通过TextBlock呈现只读的文本，你可以把TextBlock控件理解为一种纯文本的展示控件。控件的XAML语法如下：

<TextBlock .../>

或者

<TextBlock ...>内容</TextBlock>

TextBlock在Windows Phone应用中非常普遍，它就相当于一个只是用于呈现文本的标签一样。写过HTML页面的开发者都知道，在HTML语法中，可以直接将文本写在各种HTML的标签外面，但是在XAML语法中，不能直接把文本写在XAML的各种控件之外，如果要这样做就必须将文本写到TextBlock控件中才能展示出来。文本内容可以直接放在<TextBlock>和</TextBlock>标签之间，也可以赋值给TextBlock的Text属性，这两种语法都是等效的。下面我们再来介绍TextBlock控件中的一些常用的功能特性。

（1）文字的相关属性

既然TextBlock控件是一种文本的展示的控件，那么在控件里面经常会使用到与展示文本相关的属性，如FontFamily属性（字体名称，可以设置为Courier New、Times New Roman、Verdana等字体）、FontSize属性（文字大小，以像素为单位，可以赋值为1、2等数字）、FontStyle属性字体样式，可以赋值为Arial,verdana等）、FontWeight属性（文字的粗细，可设置为Thin、ExtraLight、Light、Normal、Medium、SemiBold、Bold、ExtraBold、Black、ExtraBlack，这些值是否起作用还要取决于所选择的字体）。使用这4个文字相关的属性可以对TextBlock的文本信息的外观进行修改，搭配出一种符合你的应用程序风格的文字UI效果。

（2）文本折行的实现

除了文字的相关属性之外，对于文本的折行也是非常常用的功能。TextBlock控件默认并不会对文本字符串进行折行的，当文本过长就会直接把文本截断，所以要让TextBlock控件的文本折行是需要我们自行来实现的。TextBlock控件提供了两种方式来实现文本的折行，一种是把TextWrapping属性设置为Wrap或者WrapWithOverflow，当文本的长度超过了TextBlock控件的宽度将会另起一行来进行排列，那么Wrap和WrapWithOverflow会有一点小区别，这个区别主要是针对英文单词的，如果当这个单词的长度比TextBlock控件的宽度还长，那么设置为Wrap值就会把这个单词进行折行，如果是设置为WrapWithOverflow值则不会对一个完整的单词进行折行显示，对于中文本文这两个值是没有明显的区别的。另外一种折行的方式就是使用<LineBreak/>标签来实现，在文本和文本之间添加<LineBreak/>标签则可以实现另起一行的效果。

（3）分割TextBlock控件的文本信息

分割TextBlock控件的文本信息是指把一个TextBlock控件的文本信息分成多个部分进行展示，例如在一个TextBlock控件里面你可以把一部分的字符串设置成红色，一部分设置成绿色，这种分割的实现需要依赖TextBlock控件Inlines属性。在Inlines属性里面可以通过Run元素标签来把文本的内容分割开来，对不同部分的文本信息设置不同的样式属性，如字体，颜色等。分割TextBlock控件的文本信息对于我们在一段文字中，对不同的部分的文字设置不同的样式效果的实现提供了很好的支持。

下面给出设置文本块样式设置的示例： 演示如何在一个TextBlock控件里面的文字定义多种样式、文字断行、内容自动折行和cs文件生成TextBlock控件。
    代码清单4-2：文本块控件演示（源代码：第4章\Examples_4_2）

MainPage.xaml文件主要代码
------------------------------------------------------------------------------------------------------------------
    <StackPanel x:Name="stackPanel">
        <!—创建一个简单的TextBlock 控件-->
        <TextBlock x:Name="TextBlock2" FontSize="20" Height="30" Text="你好，我是TextBlock控件" Foreground="Red" ></TextBlock>
        <!—给同一TextBlock 控件的文字内容设置多种不同的样式-->
        <TextBlock FontSize="20">
            <TextBlock.Inlines>
                <Run  FontWeight="Bold" FontSize="14" Text="TextBlock. " />
                <Run FontStyle="Italic" Foreground="Red" Text="red text. " />
                <Run FontStyle="Italic" FontSize="18" Text="linear gradient text. ">
                    <Run.Foreground>
                        <LinearGradientBrush>
                            <GradientStop Color="Green" Offset="0.0" />
                            <GradientStop Color="Purple" Offset="0.25" />
                            <GradientStop Color="Orange" Offset="0.5" />
                            <GradientStop Color="Blue" Offset="0.75" />
                        </LinearGradientBrush>
                    </Run.Foreground>
                </Run>
                <Run FontStyle="Italic" Foreground="Green" Text=" green " />
            </TextBlock.Inlines>
        </TextBlock>
        <!—使用LineBreak设置TextBlock 控件折行-->
        <TextBlock FontSize="20"> 
            你好!
            <LineBreak/>
            我是TextBlock
            <LineBreak/>
            再见
            <LineBreak/>
            --2014年6月8日
        </TextBlock>
        <!—设置TextBlock 控件自动折行-->
        <TextBlock TextWrapping="Wrap" FontSize="30">         
            好像内容太长长长长长长长长长长长长长长长长长长了
        </TextBlock>
        <!—不设置TextBlock 控件自动折行-->
        <TextBlock FontSize="20">         
            好像内容太长长长长长长长长长长长长长长长长长长了
        </TextBlock>
        <!—设置TextBlock 控件内容的颜色渐变-->
        <TextBlock Text="颜色变变变变变变" FontSize="30">
            <TextBlock.Foreground>
                <LinearGradientBrush>
                    <GradientStop Color="#FF0000FF" Offset="0.0" />
                    <GradientStop Color="#FFEEEEEE" Offset="1.0" />
                </LinearGradientBrush>
            </TextBlock.Foreground>
        </TextBlock>
    </StackPanel>
MainPage.xam.cs文件主要代码
------------------------------------------------------------------------------------------------------------------
    public MainPage()
    {
        this.InitializeComponent();
        //在.xaml.cs页面动态生成TextBlock控件
        TextBlock txtBlock = new TextBlock();
        txtBlock.Height = 50;
        txtBlock.Width = 200;
        txtBlock.FontSize = 18;
        txtBlock.Text = "在CS页面生成的TextBlock";
        txtBlock.Foreground = new SolidColorBrush(Colors.Blue);
        stackPanel.Children.Add(txtBlock);
    }

[深入浅出WP8.1(Runtime)]文本块（TextBlock）

本文来源于《深入浅出Windows Phone 8.1 应用开发》

WP8.1 Runtime文章列表：http://www.cnblogs.com/linzheng/p/3998037.html

源代码下载：http://vdisk.weibo.com/s/zt_pyrfNHb99O

欢迎关注我的微博@WP林政   微信公众号：wp开发（号：wpkaifa）

WP8.1技术交流群：372552293

标签：

相关文章