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 商店应用中控件的用法，谢谢。