首页 > 代码库 > [深入浅出WP8.1(Runtime)]文本块(TextBlock)

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

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);    }

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

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

欢迎关注我的微博@WP林政   微信公众号:wp开发(号:wpkaifa)

WP8.1技术交流群:372552293

 

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