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>      

（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 商店應用中控件的用法，謝謝。