[深刻淺出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屬性（文字大小，以像素爲單位，能夠賦值爲一、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 應用開發》

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

源代碼下載：http://vdisk.weibo.com/s/zt_pyrfNHb99O

歡迎關注個人微博@WP林政   微信公衆號：wp開發（號：wpkaifa）

WP8.1技術交流羣：372552293