Silverlight-TextBlock換行-LineBreak

TextBlock 設定文字時,也可以使用較直覺的內部文字格式,而不使用明確的 Text 屬性集,如以下範例:

Copy Code
<TextBlock>Hello, world!</TextBlock>
注意注意事項:

設定 Text 屬性時並不會保留前置或尾端空白字元,只會保留內部空白字元。 如需以 XAML 處理空白字元的詳細資訊,請參閱 XAML 概觀

使用 Run 和 LineBreak 物件

TextBlock 並不會呈現單一字串,它也可以呈現不同 Run 項目中所包含的一系列字串,其中每一個項目可以擁有不同的字元層級字型屬性。 LineBreak 物件表示 TextBlock 中的明確新行,而且通常用於周圍 Run 項目之間。LineBreak Run 共用一個基礎類別 (Inline),該類別能夠讓 TextBlock 保留其文字模型內容的強型別 InlineCollection。 該 InlineCollection 也是 TextBlock XAML 內容屬性,只要將多個 Run LineBreak 項目 (Element) 指定為 TextBlock 的子項目 (Element),即可指定 TextBlock 模型中的項目 (Item)。

下列 XAML 範例示範如何在 TextBlock 中,藉由使用 Run 物件定義數個不同格式的文字字串,以 LineBreak 分隔。

XAML
Copy Code
<!-- Display formatted text as Run objects within a TextBlock. -->
<Canvas>
<TextBlock
  FontFamily="Arial" Width="400" Text="Sample text formatting runs">
  <LineBreak/>
  <Run Foreground="Maroon" FontFamily="Courier New" FontSize="24">Courier New 24</Run>
  <LineBreak/>
  <Run Foreground="Teal" FontFamily="Times New Roman" FontSize="18" FontStyle="Italic">Times New Roman Italic 18</Run>
  <LineBreak/>
  <Run Foreground="SteelBlue" FontFamily="Verdana" FontSize="14" FontWeight="Bold">Verdana Bold 14</Run>
</TextBlock>
</Canvas>

下圖顯示先前 XAML 內容範例所轉譯的格式化文字。

TextBlock rendering multiple Run objects

Cc189010.JOLT_run_in_xaml_01(zh-tw,VS.95).png

LineBreak 會強制每個 Run 中的文字換行,以顯示為獨立的一行。 如果沒有使用 LineBreak,每個 Run 中的文字就會連成一行,最後會因為超過 TextBlock 物件寬度或是 Silverlight 內容區域的寬度而遭到裁剪。 下圖顯示格式化文字在沒有使用 LineBreak 物件的情況下的呈現方式。

多個 Run 物件的 TextBlock 呈現方式:沒有 LineBreak 物件的情況下

Cc189010.JOLT_run_in_xaml_02(zh-tw,VS.95).png

以程式碼存取 TextBlock 文字模型

TextBlock 文字模型中實際包含兩種屬性:Text Inlines。 並不建議您一定要變更 Text 的值,因為它會造成個別 Run 項目 (Item) 上的任一字型項目 (Element) 變得扁平,而且會移除 TextBlock LineBreak 項目 (Element),這個項目原本是以內嵌項目形式建構,而且並不單純的只是 Text。 如需詳細資訊,請參閱 Inlines

文字換行

TextWrapping 屬性 (Property) 宣告 TextBlock 中文字的換行方式。 依預設,TextBlock 中的文字不會自動換行。 因為沒有換行,所以根據其他設定,文字可能發生下列其中一種情況:

  • 如果 TextBlock 沒有明確設定 WidthTextBlock 會根據其中文字的大小而擴展,並且更新 ActualWidth 的值。 不過,TextBlock 一定會在某個其他的容器父項目中,而且會到達配置父項的鏈結 (Chain),此處也一定是寬度條件約束。 如果超過執行的配置條件約束寬度,則會導致文字被剪裁。

  • 如果 TextBlock 已明確設定 Width,則如果超過固定的 WidthTextBlock 會自行進行文字剪裁。

如果要使用自動換行,請將 TextWrapping 設定為列舉值 Wrap。 例如,XAML 中的 <TextBlock Text="The quick red fox jumped over the lazy brown dog." TextWrapping="Wrap" />。 開啟文字換行:

  • 如果 TextBlock 沒有明確設定 Width,則文字會在目前執行的配置條件約速寬度的位置進行自動換行。

  • 如果 TextBlock 已明確設定 Width,則文字會在固定的 Width 位置進行自動換行。

因為 TextBlock ActualWidth 一定會回報文字已擴展的大小 (即使與配置容器不符也是如此) 所以您可以透過程式設計的方式偵測被剪裁的文字。 只要您確切知道在哪裡讀取執行剪裁之配置容器的 Width,便可以比較這兩個值。

如需詳細資訊,請參閱 TextBlock TextWrapping

未換行與換行文字的 TextBlock 呈現方式

Cc189010.LazyDog(zh-tw,VS.95).png
TextWrapping 對 ActualWidth 和 ActualHeight 的影響方式

Cc189010.NewWrap(zh-tw,VS.95).png

多行 TextBlock 文字

會因為自動換行或明確 LineBreak 項目這兩種因素,TextBlock 中的文字,可能會以多行顯示。 TextBlock 的下列兩個屬性會影響多行文字的顯示方式:LineHeight 以及 LineStackingStrategy LineHeight 設定整體 TextBlock 中的每一行內容的高度。 LineHeight 其實是基準高度的基準,如此一來,如果您設定小於 FontSize LineHeight,文字可能會以垂直維度被切斷。 通常,您會保留不設定 LineHeight,而仰賴,根據 FontSize 加上位移呈現有效文字行高度的預設值。如果使用 LineStackingStrategy,則它會影響預設的演算法。 LineStackingStrategy..::.MaxHeight (預設值) 會以字型中任一字元的最大高度做為有效文字行高度的基準。LineStackingStrategy..::.BlockLineHeight 會以「區塊」字型設計度量 (也會儲存為字型中的值) 做為有效文字行高度的基準。

套用轉換到 TextBlock 文字

轉換可改變您的應用程式中所顯示的文字。 轉換是一般的 UI 項目概念,適用於許多不同的類別,包括文字項目。 您會在文字上使用轉換效果以及其他可能的使用案例包含下列:

RotateTransform,反轉文字

ScaleTransform,用於大於字型中所繼承之支援大小上限的文字

SkewTransform,用於切變或斜體模擬

TranslateTransform,用於位移與陰影效果

當您在文字中套用轉換時,首先應該考慮是否還有其他方法可以使用文字項目屬性而產生類似的效果。 例如,如果字型家旅支援斜體 FontStyle,那麼比起套用 SkewTransform,它的結果在視覺上能夠產生更吸引人的效果,或者,設定 FontSize 並使用字型啟用的提示與特點時,比較在文字上設定 ScaleTransform,也可以獲得較理想的效果。

您可能需要在文字上使用轉換的一個使用案例是,您可以設定轉換的動畫,以產生視覺效果。

建立 TextBlock 文字的動畫

許多文字屬性 (Property) 的值可以建立成動畫,包含 FontSize 的文字大小、透過 TranslateTransform 的位置和色彩。 如需哪些屬性值類型支援動畫的詳細資訊,請參閱動畫概觀

將文字屬性 (尤其是大小或前景筆刷) 建立成動畫可能會耗用許多系統資源。 這是因為 Silverlight 在呈現文字時,會使用提示來使每個文字圖像變平滑。 如果您建立文字大小的動畫 (藉由使用 Transform FontSize),則 Silverlight 會提示每個畫面的圖像,這是很耗費資源的,並可能會造成畫面捨棄。 如果應用程式需要對大型文字進行動態縮放變更,則建議您使用下列其中一種替代方案:

利用LineBreak實現文本豎排:實做見 泡菜肉絲 的博客 http://www.cnblogs.com/JinDin/archive/2010/03/21/1691206.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章