Windows 8.1 应用再出发 - 几种常用控件

原文: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 商店应用中控件的用法,谢谢。

Windows 8.1 应用再出发 - 几种常用控件,布布扣,bubuko.com

时间: 2024-10-26 13:05:44

Windows 8.1 应用再出发 - 几种常用控件的相关文章

Windows 8.1 应用再出发 - 几种新增控件(1)

原文:Windows 8.1 应用再出发 - 几种新增控件(1) Windows 8.1 新增的一些控件,分别是:AppBar.CommandBar.DatePicker.TimePicker.Flyout.MenuFlyout.SettingsFlyout.Hub 和 Hyperlink.我们分成两篇来介绍,本篇先为大家介绍AppBar.CommandBar.DatePicker 和 TimePicker. 1. AppBar Windows 8.1引入了几种新的控件来帮助我们更快捷的创建应用

Windows 8.1 应用再出发 - 几种布局控件

原文:Windows 8.1 应用再出发 - 几种布局控件 本篇为大家介绍Windows 商店应用中几种布局控件的用法.分别是Canvas.Grid.StackPanel 和 VariableSizedWrapGrid. 1. Canvas Canvas使用绝对定位对子元素进行布局.元素使用Canvas.Left 和 Canvas.Top 附加属性进行绝对定位.元素可以使用Canvas.ZIndex附加属性指定分层,Canvas.ZIndex是int类型,值越大,分层越靠前. 所以下面代码中,如

Windows 8.1 应用再出发 - 几种新增控件(2)

原文:Windows 8.1 应用再出发 - 几种新增控件(2) 本篇我们接着来介绍Windows 8.1 的新增控件,分别是:Flyout.MenuFlyout.SettingsFlyout.Hub 和 Hyperlink. 1. Flyout Flyout被称为浮出控件,能起到提示或者简单交互作用.我们可以利用它来要求用户确认操作.收集用户输入信息或显示提示信息等.只有当用户点击时才显示Flyout,当点击外部任意点时,Flyout消失. Flyout通常会附加到Button上,所以Butt

Windows 8.1 应用再出发 - 几种更新的控件

原文:Windows 8.1 应用再出发 - 几种更新的控件 Windows 8.1 除了新增了很多很有用的控件外,还对一些控件做出了更新.接下来我们一起对这些更新的控件一一做出讲解. 1. FlipView 更新 翻转视图控件,在应用中常用作图片等内容的翻页/滑动显示.用户可以浏览多个项目,每次显示一个.下面我们来看看FlipView控件的简单用法: <FlipView Width="300" Height="300"> <FlipViewIte

Windows 8.1 应用再出发 (WinJS) - 几种新增控件(2)

原文:Windows 8.1 应用再出发 (WinJS) - 几种新增控件(2) 上篇我们介绍了Windows 8.1 和 WinJS 中新增控件中的 AppBarCommand.BackButton.Hub.ItemContainer,本篇我们接着来介绍 NavBar.Repeater 和 WebView. 1. NavBar NavBar 是专门用于导航命令的应用栏控件,它是AppBar 的子类.可以完成简单的链接,也可以完成多层链接. 类似XAML 中的 TopAppBar,NavBar

Windows 8.1 应用再出发 (WinJS) - 几种新增控件(1)

原文:Windows 8.1 应用再出发 (WinJS) - 几种新增控件(1) Windows 8.1 和 WinJS 引入了以下新控件和功能,分别是:AppBarCommand.BackButton.Hub.ItemContainer.NavBar.Repeater.WebView. 本篇我们先来介绍 AppBarCommand.BackButton.Hub.ItemContainer,其余三种放在下一篇中介绍. 1. AppBarCommand Windows 8.1 加入了AppBarC

Windows 8.1 应用再出发 - 视图状态的更新

原文:Windows 8.1 应用再出发 - 视图状态的更新 本篇我们来了解一下Windows 8.1 给应用的视图状态带来了哪些变化,以及我们怎么利用这些变化作出更好的界面视图. 首先我们来简单回顾一下Windows 8.0 时代的视图状态:     上图中,从左到右依次是Windows 8 应用的三种视图状态:Full Screen, Snapped 和 Filled. 其中Snapped 和 Filled 状态只能显示在横向分辨率在1366像素或更高的屏幕中.而Snapped视图固定宽度为

Windows 8.1 应用再出发 - 磁贴的更新

原文:Windows 8.1 应用再出发 - 磁贴的更新 本篇和大家一起了解一下Windows 8.1 中磁贴的更新,我们来看看如何利用它做出更好的应用磁贴. 首先我们从展现形式上来对比一下Windows 8 与 Windows 8.1 中的磁贴: Windows 8支持两种尺寸的磁贴,正方形磁贴(150 * 150 像素)和长方形磁贴(310 * 150 像素).如下图中邮件和日历属于长方形磁贴,地图和应用商店等属于正方形磁贴. Windows 8.1在8.0 的磁贴种类基础上,多支持了两种尺

Windows 8.1 应用再出发 (WinJS) - 创建一个简单项目

原文:Windows 8.1 应用再出发 (WinJS) - 创建一个简单项目 前面几篇我们介绍了如何利用 C# + XAML 完成Windows Store App 功能的实现,接下来的几篇我们来看看如何利用 Html + WinJS 来完成这些功能. 本篇我们使用WinJS 来创建一个简单的项目,来看看项目的构成是怎样的,与C#,XAML 的项目有哪些异同. 首先我们在Visual Studio 2013中选择模板 -> JavaScript -> Windows 应用商店来创建一个空白应