背水一戰 Windows 10 之 控制項（文本類）: TextBlock ...
背水一戰 Windows 10 (27) - 控制項（文本類）: TextBlock
作者：webabcd
介紹
背水一戰 Windows 10 之 控制項（文本類）
- TextBlock
示例
1、TextBlock 的示例 1
Controls/TextControl/TextBlockDemo1.xaml
<Page x:Class="Windows10.Controls.TextControl.TextBlockDemo1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.TextControl" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10"> <!-- TextBlock 的常用屬性 Text - 顯示的文本,如果需要顯示引號等特殊字元需要使用相應的 HTML 編碼 Foreground - 文本顏色 FontFamily - 首選字體，多個用“,”分隔，找不到第 1 個就用第 2 個，找不到第 2 個就用第 3 個，以此類推 FontSize - 字型大小大小（單位：像素） FontWeight - 字體粗細，預設值是 Normal FontStyle - 字體樣式，預設值是 Normal Italic - 使用字體自帶的斜體 Oblique - 通過程式讓正常字體傾斜（對於自身不帶斜體的字體可以使用此值讓字體傾斜） FontStretch - 字體的拉伸值，預設值是 Normal（大部分字體都不支持這個屬性） Padding - Padding IsTextScaleFactorEnabled - 是否啟用文本自動放大功能（預設值是 true） 在“設置”->“輕鬆使用”中可以調整文本縮放大小，IsTextScaleFactorEnabled 就是用於決定 TextBlock 顯示的文本是否跟著這個設置走 --> <TextBlock Text="i am a "TextBlock"" Margin="5" Foreground="Blue" FontFamily="微軟雅黑" FontSize="24" FontWeight="Bold" FontStyle="Italic" FontStretch="Normal" Padding="5" /> <!-- TextAlignment - 文本的水平對齊方式 Center, Left（預設值）, Right, Justify（兩端對齊） --> <TextBlock Text="i am a "TextBlock"" Margin="5" TextAlignment="Justify" /> <!-- TextWrapping - 換行方式 NoWrap - 不換行 Wrap - 換行，必要時可截斷單詞 WrapWholeWords - 換行，但是絕不截斷單詞，即使單詞可能會顯示不全 --> <TextBlock Width="100" HorizontalAlignment="Left" Text="abcdefghijklmnopq www" Margin="5" TextWrapping="NoWrap" /> <TextBlock Width="100" HorizontalAlignment="Left" Text="abcdefghijklmnopq www" Margin="5" TextWrapping="Wrap" /> <TextBlock Width="100" HorizontalAlignment="Left" Text="abcdefghijklmnopq www" Margin="5" TextWrapping="WrapWholeWords" /> <!-- TextTrimming - 內容溢出時的修整方式 None - 不修整文本 Clip - 在像素級別修整文本 WordEllipsis - 在單詞級別修整文本，同時用省略號代替剩餘文本 CharacterEllipsis - 在字元級別修整文本，同時用省略號代替剩餘文本 --> <TextBlock Width="100" HorizontalAlignment="Left" Text="abcdefghi jklmnopqrstuvwxyz" Margin="5" TextTrimming="None"/> <TextBlock Width="100" HorizontalAlignment="Left" Text="abcdefghi jklmnopqrstuvwxyz" Margin="5" TextTrimming="Clip"/> <TextBlock Width="100" HorizontalAlignment="Left" Text="abcdefghi jklmnopqrstuvwxyz" Margin="5" TextTrimming="WordEllipsis"/> <TextBlock Width="100" HorizontalAlignment="Left" Text="abcdefghi jklmnopqrstuvwxyz" Margin="5" TextTrimming="CharacterEllipsis"/> <!-- MaxLines - 用於指定文本最大的顯示行數 --> <TextBlock MaxLines="3" Margin="5"> <TextBlock.Inlines> <Run>111111</Run> <LineBreak /> <Run>222222</Run> <LineBreak /> <Run>333333</Run> <LineBreak /> <Run>444444</Run> <LineBreak /> <Run>555555</Run> </TextBlock.Inlines> </TextBlock> <!-- CharacterSpacing - 用於設置字元間距 具體字元間隔像素計算公式如下：字體大小 * CharacterSpacing值 / 1000 = 字元間距像素值 LineHeight - 行高 LineStackingStrategy - 控制行高的策略 MaxHeight - 每行的行高以 LineHeight 值和每行的自然行高中的最大值為準。預設值 BlockLineHeight - 每行的行高以 LineHeight 值為準，以字元區域為參考 BaselineToBaseline - 每行的行高以 LineHeight 值為準，以基線為參考（什麼是基線：英文字元的基線基本相當於單詞本4條線中的第3條線） Inlines - 內聯元素的集合。包括 span, bold, italic, underline 等，但是 InlineUIContainer 不可用，其需要在 RichTextBlock 中使用 --> <TextBlock Margin="5" CharacterSpacing="100" LineStackingStrategy="MaxHeight" LineHeight="50"> <TextBlock.Inlines> <Run Foreground="Red">Run</Run> <Span Foreground="Blue">Span</Span> <LineBreak /> <Bold>Bold</Bold> <Italic>Italic</Italic> <Underline>Underline</Underline> </TextBlock.Inlines> </TextBlock> <!-- TextLineBounds - 行框的繪製方式 Full - 正常，預設值 TrimToCapHeight - 行框頂部和大寫字體的頂部一致 TrimToBaseline - 行框底部與文本基線一致（什麼是基線：英文字元的基線基本相當於單詞本4條線中的第3條線） Tight - 行框頂部和大寫字體的頂部一致，行框底部與文本基線一致 --> <Grid Background="Red" Margin="5"> <TextBlock Text="Aj" FontSize="24" TextLineBounds="Full" /> </Grid> <Grid Background="Red" Margin="5"> <TextBlock Text="Aj" FontSize="24" TextLineBounds="TrimToCapHeight" /> </Grid> <Grid Background="Red" Margin="5"> <TextBlock Text="Aj" FontSize="24" TextLineBounds="TrimToBaseline" /> </Grid> <Grid Background="Red" Margin="5"> <TextBlock Text="Aj" FontSize="24" TextLineBounds="Tight" /> </Grid> </StackPanel> </Grid> </Page>
Controls/TextControl/TextBlockDemo1.xaml.cs
/* * TextBlock - 文本顯示框（繼承自 FrameworkElement, 請參見 /Controls/BaseControl/FrameworkElementDemo.xaml） */ using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; namespace Windows10.Controls.TextControl { public sealed partial class TextBlockDemo1 : Page { public TextBlockDemo1() { this.InitializeComponent(); } } }
2、TextBlock 的示例 2
Controls/TextControl/TextBlockDemo2.xaml
<Page x:Class="Windows10.Controls.TextControl.TextBlockDemo2" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.TextControl" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10"> <!-- IsTextSelectionEnabled - 文本是否可以被選中 SelectionHighlightColor - 選中文本的顏色 --> <TextBlock Name="textBlock1" Margin="5" IsTextSelectionEnabled="True" SelectionHighlightColor="Red"> <TextBlock.Inlines> <Run>abcdefg</Run> <LineBreak /> <Run>hijklmn</Run> <LineBreak /> <Run>opqrst</Run> </TextBlock.Inlines> </TextBlock> <!--顯示 textBlock1 中被用戶選中的文本--> <TextBlock Name="lblMsg1" Margin="5" /> <TextBlock Name="textBlock2" Margin="5" IsTextSelectionEnabled="True" SelectionHighlightColor="Red"> <Run>abcdefghijklmn</Run> <LineBreak /> <Run>opqrstuvwxyz</Run> </TextBlock> <TextBlock Name="lblMsg2" Margin="5" /> <Grid Background="Red" Margin="5"> <TextBlock Name="textBlock3" Text="abcdefghijklmnopqrstuvwxyz" FontSize="24" /> <!--用於繪製基線--> <Line Name="line" Stroke="Blue" StrokeThickness="1" X1="0" X2="300" /> </Grid> <TextBlock Name="lblMsg3" Margin="5" /> <!--用於顯示 Segoe UI Emoji 字元--> <TextBlock Name="textBlock4" Margin="5" FontSize="24" TextWrapping="Wrap" /> <!--用於演示如何計算 TextBlock 的實際寬度和實際高度--> <Grid Name="grid" Margin="5"> <Grid.ColumnDefinitions> <ColumnDefinition x:Name="gridColumn1" Width="Auto" /> <ColumnDefinition x:Name="gridColumn2" Width="*" /> </Grid.ColumnDefinitions> <TextBlock Name="textBlock5" FontSize="24"> <Run>abc</Run> <LineBreak /> <Run>xyz</Run> </TextBlock> </Grid> <TextBlock Name="lblMsg5" Margin="5" /> </StackPanel> </Grid> </Page>
Controls/TextControl/TextBlockDemo2.xaml.cs
/* * TextBlock - 文本顯示框（繼承自 FrameworkElement, 請參見 /Controls/BaseControl/FrameworkElementDemo.xaml） * SelectedText - 獲取選中的文本內容 * SelectionChanged - 選中的文本內容發生變化後觸發的事件 * ContentStart - 開頭內容的 TextPointer 對象 * ContentEnd - 結尾內容的 TextPointer 對象 * Focus(FocusState value) - 獲取焦點 * SelectAll() - 選中全部內容（先要獲取焦點後，才能做這個操作） * Select(TextPointer start, TextPointer end) - 選中指定範圍的內容（先要獲取焦點後，才能做這個操作） * SelectionStart - 選中內容的起始位置（TextPointer 對象） * SelectionEnd - 選中內容的結束位置（TextPointer 對象） * BaselineOffset - 獲取基線的位置（什麼是基線：英文字元的基線基本相當於單詞本4條線中的第3條線） * IsColorFontEnabled - 是否以彩色方式顯示 Segoe UI Emoji 之類的字元（預設值是 true） * * * TextPointer - 文本框中的指針對象 * Offset - 指針的位置 * LogicalDirection - 指針的邏輯方向 * Backward - 向後，即從右到左（比如，如果插入字元的話，就會在指針位置的左邊插入） * Forward - 向前，即從左到右（比如，如果插入字元的話，就會在指針位置的右邊插入） * Rect GetCharacterRect(LogicalDirection direction) - 返回當前指針的矩形框 * TextPointer GetPositionAtOffset(offset, LogicalDirection direction) - 將指針位置偏移指定的距離（正代表向右偏移，負代表向左偏移） */ using System; using System.Text; using Windows.Foundation; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Documents; namespace Windows10.Controls.TextControl { public sealed partial class TextBlockDemo2 : Page { public TextBlockDemo2() { this.InitializeComponent(); this.Loaded += TextBlockDemo2_Loaded; } private void TextBlockDemo2_Loaded(object sender, RoutedEventArgs e) { textBlock1.SelectionChanged += (x, y) => { // 顯示用戶選中的文本內容 lblMsg1.Text = textBlock1.SelectedText; }; textBlock1.ContextMenuOpening += (x, y) => { // 觸發條件：觸摸屏長按或滑鼠右鍵 }; // 獲取焦點 textBlock2.Focus(FocusState.Programmatic); TextPointer start = textBlock2.ContentStart; TextPointer end = textBlock2.ContentEnd; // textBlock2 的 Text 的內容一共有 26 個字元，但是這裡的指針位置 offset 是從 0 到 34，一共 35 個指針位置 // <LineBreak /> 占 4 個指針位置，開頭占 2 個指針位置，結尾占 2 個指針位置。剩下的就比較好理解了，就是 26 個字元擁有 27 個指針位置 lblMsg2.Text = $"ContentStart.Offset: {start.Offset}, ContentEnd.Offset: {end.Offset}"; lblMsg2.Text += Environment.NewLine; // 從左到右偏移 3 個位置，即指針位置在第 1 個字元的右邊 start = start.GetPositionAtOffset(3, LogicalDirection.Backward); // 從右到左偏移 3 個位置，即指針位置在最後一個字元的左邊 end = end.GetPositionAtOffset(-3, LogicalDirection.Forward); textBlock2.Select(start, end); // SelectAll() - 選中全部 lblMsg2.Text += $"SelectionStart.Offset: {textBlock2.SelectionStart.Offset}, SelectionEnd.Offset: {textBlock2.SelectionEnd.Offset}"; // 獲取基線的位置，並通過 Line 繪製基線 lblMsg3.Text += $"BaselineOffset: {textBlock3.BaselineOffset}"; line.Y1 = textBlock3.BaselineOffset; line.Y2 = textBlock3.BaselineOffset; // 顯示 Segoe UI Emoji 字元 StringBuilder strContect = new StringBuilder(); for (int code = 0x1F600; code < 0x1F6C6; code++) { strContect.Append(char.ConvertFromUtf32(code)); } // 是否以彩色方式顯示 Segoe UI Emoji 之類的字元（預設值是 true） textBlock4.IsColorFontEnabled = true; textBlock4.Text = strContect.ToString(); // 通過封一層 Grid 的方式計算 TextBlock 的實際寬度和實際高度 lblMsg5.Text = $"textBlock5 的實際高度: {grid.ActualHeight}"; lblMsg5.Text += Environment.NewLine; lblMsg5.Text += $"textBlock5 的實際寬度: {gridColumn1.ActualWidth}"; lblMsg5.Text += Environment.NewLine; // 通過 TextPointer 的方式計算 TextBlock 的實際高度 TextPointer last = textBlock5.ContentEnd; last = last.GetPositionAtOffset(-3, LogicalDirection.Forward); Rect rectLast = last.GetCharacterRect(LogicalDirection.Forward); lblMsg5.Text += $"textBlock5 的實際高度: {rectLast.Bottom}"; lblMsg5.Text += Environment.NewLine; // 通過 TextPointer 的方式計算 TextBlock 的實際寬度 int count = textBlock5.ContentEnd.Offset - textBlock5.ContentStart.Offset; double width = 0; for (int i = 0; i < count; i++) { TextPointer current = textBlock5.ContentStart.GetPositionAtOffset(i, LogicalDirection.Backward); width = Math.Max(width, current.GetCharacterRect(LogicalDirection.Backward).Right); } lblMsg5.Text += $"textBlock5 的實際寬度: {width}"; } } }
3、使用自定義字體, 使用 Unicode 編碼
Controls/TextControl/Tips.xaml
<Page x:Class="Windows10.Controls.TextControl.Tips" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Windows10.Controls.TextControl" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="10 0 10 10"> <!-- 使用自定義字體 1、將字體文件複製到項目中 2、通過 FontFamily 指定字體文件的路徑，在路徑後加“#”併在其後寫上字體名稱（通過“Windows 字體查看器”可以查看字體文件的字體名稱） --> <TextBlock Text="逐浪大雪鋼筆體" FontSize="36" Margin="5" FontFamily="/Controls/TextControl/MyFont.otf#逐浪大雪鋼筆體"> </TextBlock> <!-- 使用 Unicode 編碼 1、無法在 xaml 中使用 \u（在 code-behind 中可以） 2、通過 � 的方式來顯示 Unicode 字元（註：unicode 的 0 - 127 與 ascii 一樣） --> <TextBlock Text=""123"
123" FontSize="36" Margin="5" /> </StackPanel> </Grid> </Page>
Controls/TextControl/Tips.xaml.cs
/* * 演示如何使用自定義字體，以及使用 Unicode 編碼 */ using Windows.UI.Xaml.Controls; namespace Windows10.Controls.TextControl { public sealed partial class Tips : Page { public Tips() { this.InitializeComponent(); } } }
OK
[源碼下載]
