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