Windows 8.1應用學習：幾種布局控制項

本篇為大家簡單介紹Windows 商店應用中控制項的用法，為方便講解，我們在文本控制項和按鈕控制項這兩類中分別挑選有代表性的控制項進行詳細說明。

1. 文本控制項

（1） TextBlock

TextBlock是最常用的文本顯示控制項，重點關注以下屬性：

CharacterSpacing 字元之前的統一間距，間距 = 字型大小 / 1000。預設為0，正值增進跟蹤和放寬字元間距。負值減少跟蹤和收緊字元調間距。

IsColorFontEnabled 布爾值，確定顏色標誌符號是否以彩色顯示。如果顏色標誌符號以彩色顯示，則為 true；否則為 false。 預設為 true。

LineStackingStrategy 枚舉值，確定每行行高的策略。有MaxHeight（預設值）、BaselineToBaseline 和 BlockLineHeight 三種。MaxHeight：每行行高以LineHeight和元素的自然高度中的最大值為準，BaselineToBaseline：每行行高以文本基準之間的距離為準，BlockLineHeight：每行行高以LineHeight為準。

OpticalMarginAlignment 枚舉值，指定在與文本容器邊界對齊時如何處理每個字元版式中靠邊的值。有None（預設值） 和 TrimSideBearings 兩種。None：使用來自字型版式值的側方位，TrimSideBearings：不使用來自字型版式值的邊位，且不將字形的一側與字形"墨跡"部分開始的位置對齊

TextAlignment 枚舉值，指示常值內容的水平對齊。有Left（預設值）、Right、Center 和 Justify 四種。Left：靠左對齊，Right：靠右對齊，Center：置中，Justify：容器內對齊。

TextLineBounds 枚舉值，影響行高計算的公式。有Full（預設值）、Tight、TrimToBaseline 和 TrimToCapHeight 四種。Full：使用常規行高計算，Tight：行頂部高度是字型的大寫字高，行底部告訴是文本基準，TrimToBaseline：行高的底部是文本基準，TrimToCapHeight：行頂部高度是字型的大寫字高。

TextTrimming 枚舉值，內容溢出內容地區時採取的休整行為。有CharacterEllipsis、Clip、None（預設值） 和 WordEllipsis 四種。CharacterEllipsis：在字元邊界處修整文本。將繪製省略符號 (...) 來替代剩餘的文本，Clip：在像素層級修整文本，並以可視方式裁剪多餘的字形，None：不休整文本，WordEllipsis：在單詞邊界處修整文本。將繪製省略符號 (...) 來替代剩餘的文本。

TextWrapping 枚舉值，文本進行換行的方式。有NoWrap、Wrap 和 WrapWholeWords 三種。NoWrap：不換行，Wrap：文本行溢出容器的可用寬度，則進行換行。即使最後溢出的是單一單詞，也仍然換行，WrapWholeWords：與Wrap的唯一不同是，對單一單詞不換行。

<TextBlock Text="I am a TextBlock "

CharacterSpacing="100"

HorizontalAlignment="Center" VerticalAlignment="Center"

FontFamily="Arial" FontStyle="Italic" FontSize="50" FontWeight="Black"

IsColorFontEnabled="True"

LineStackingStrategy="BlockLineHeight"

OpticalMarginAlignment="TrimSideBearings"

TextAlignment="Center" TextLineBounds="TrimToBaseline" TextReadingOrder="DetectFromContent"

TextTrimming="WordEllipsis" TextWrapping="WrapWholeWords"

Height="120" Width="500"/>

（2） TextBox

TextBox是文本輸入控制項，重點關注以下屬性：

AcceptsReturn 布爾值，確定文字框是否允許換行或斷行符號符。如果文字框允許分行符號，則為 true；否則為 false。預設為 false。

FlowDirection 布爾值，確定文字框中內容的流動方向。有LeftToRight 和 RightToLeft 兩種。LeftToRight：內容從左向右流動，RightToLeft：內容哦那個從右向左流動。

Header 文字框標題內容，預設為null。

InputScope 指定SIP類型，來改變控制項輸入範圍。

IsSpellCheckEnabled 布爾值，指定 TextBox 輸入是否應與拼字檢查引擎互動。如果 TextBox 輸入與拼字檢查引擎進行互動，則為 True；否則為 false。預設為 false。

IsTextPredictionEnabled 確定是否應啟用此 TextBox 的文字預測功能（"自動完成"）的值。如果為 true，則啟用文字預測功能；否則為 false。預設為 true。

<TextBox AcceptsReturn="True" Background="AliceBlue" BorderBrush="Blue" BorderThickness="2"

CompositeMode="Inherit" FlowDirection="RightToLeft" FontFamily="Arial" FontStyle="Italic" FontSize="50" FontWeight="Black"

Header="Header Text" InputScope="Number" IsReadOnly="False" IsSpellCheckEnabled="True" IsTextPredictionEnabled="False"

SelectedText="123" SelectionHighlightColor="AliceBlue" HorizontalAlignment="Center" VerticalAlignment="Center"/>

（3）PasswordBox

PasswordBox 是常用的密碼輸入控制項，重點關注以下屬性：

MaxLength 由此 PasswordBox 處理的密碼的最大長度, 值為 0 表示沒有限制。預設為 0。

Password PasswordBox 當前保留的密碼。

PasswordChar PasswordBox 的掩碼字元，預設值為 ●。

IsPasswordRevealButtonEnabled 布爾值，指定 PasswordBox 的可視 UI 是否包括切換顯示或隱藏鍵入字元的銨鈕元素。True 顯示密碼顯示按鈕；false 不顯示密碼顯示按鈕。預設為 false。

<PasswordBox Height="50" Width="200" MaxLength="8" Password="123456" PasswordChar="*" IsPasswordRevealButtonEnabled="True"/>

2. 按鈕控制項

（1） Button

Button是最常用的按鈕控制項，重點關注以下內容：

ClickMode 枚舉值，指示 Click 事件發生時間的值。有Hover、Press 和 Release（預設值）三種。Hover：將滑鼠指標移到控制項上方時應引發 Click 事件，Press：按下滑鼠按鍵且滑鼠指標位於控制項上方時應引發 Click 事件，如果使用的是鍵盤，則指定在按下空格鍵或 ENTER 鍵且控制項具有鍵盤焦點時應引發 Click 事件，Release：按下並鬆開滑鼠左鍵且滑鼠指標位於控制項上方時應引發 Click 事件，如果使用的是鍵盤，則指定在按下並鬆開空格鍵或 Enter 鍵且控制項具有鍵盤焦點時應引發 Click 事件。

HorizontalContentAlignment 枚舉值，控制項內容的水平對齊。有Center（預設值）、Left、Right 和 Stretch四種。Center：與父元素布局的中心對齊元素，Left：與父元素布局的左側對齊元素，Right：與父元素布局的右側對齊元素，Stretch：展開以填充整個父元素布局槽的元素。

VerticalContentAlignment 枚舉值，控制項內容的垂直對齊。有Center（預設值）、Bottom、Top 和 Stretch四種。

Flyout 與此按鈕關聯的飛出視窗。當按鈕點擊時，Flyout控制項浮出，再點擊按鈕或空白處，Flyout消失。

<Button Content="Click Me." ClickMode="Release" HorizontalContentAlignment="Left" VerticalContentAlignment="Top"

FontSize="50" HorizontalAlignment="Center" VerticalAlignment="Center" Height="200" Width="400" Click="Button_Click">

<Button.Flyout>

<Flyout>

<TextBlock Text="I am flyout content."/>

</Flyout>

</Button.Flyout>

</Button>

查看本欄目更多精彩內容：http://www.bianceng.cnhttp://www.bianceng.cn/Programming/net/

（2） HyperlinkButton

HyperlinkButton 是常用的超連結按鈕，重點關注以下內容：

NavigateUri 單擊 HyperlinkButton 時要導航到的統一資源識別項 (URI)

<HyperlinkButton Content="go to google." Foreground="Green" FontSize="50" HorizontalAlignment="Center" VerticalAlignment="Center"

HorizontalContentAlignment="Left" VerticalContentAlignment="Top" NavigateUri="http://www.google.com.hk"/>

（3） ToggleButton

ToggleButton 是可以切換狀態的按鈕，重點關注以下內容：

IsThreeState 布爾值，指示控制項是否支援三個狀態的值。如果控制項支援三種狀態，則為 True；否則為 false。預設為 false。

IsChecked 布爾值，指定是否選中 ToggleButton。如果已選中 ToggleButton，則為 true；如果未選中 ToggleButton，則為 false；否則為 null。預設為 false。

<ToggleButton Content="Toggle Button" IsThreeState="True" FontSize="50" IsChecked="True" HorizontalAlignment="Center" VerticalAlignment="Center"

Checked="ToggleButton_Checked" Unchecked="ToggleButton_Unchecked" Indeterminate="ToggleButton_Indeterminate"/>

// 按鈕變為選中狀態後觸發的事件

private void ToggleButton_Checked(object sender, RoutedEventArgs e)

{}

// 按鈕變為選中未狀態後觸發的事件

private void ToggleButton_Unchecked(object sender, RoutedEventArgs e)

{}

// 按鈕變為不確定狀態後觸發的事件

private void ToggleButton_Indeterminate(object sender, RoutedEventArgs e)

{}

（4） RadioButton

RadioButton是選項按鈕，繼承自ToggleButton，重點關注以下內容：

GroupName 指定哪些 RadioButton 控制項互斥的名稱，同一GroupName的RadioButton不能同時被選中。

IsChecked 布爾值，指定是否選中按鈕。注意如果同一GroupName的控制項同時設定為true，則後面的控制項選中狀態會覆蓋前面的。

<RadioButton GroupName="groupName" IsChecked="True" Content="RadioButton One"/>

<RadioButton GroupName="groupName" IsChecked="True" Content="RadioButton Two"/>

（5） CheckBox

CheckBox是複選按鈕，繼承自ToggleButton，重點關注以下內容：

IsChecked 布爾值，指定是否選中按鈕。

<CheckBox IsChecked="True" Content="CheckBox One"/>

<CheckBox IsChecked="False" Content="CheckBox One"/>

到這裡我們就完成了幾種常用控制項的介紹，希望能協助大家更好的理解Windows 商店應用中控制項的用法，謝謝。