Windows 8.1 Application Learning: Several layout controls

This article is a brief introduction to the use of controls in Windows Store applications, and for ease of explanation, we select a representative control in both the text control and the button control categories for detailed instructions.

1. Text control

(1) TextBlock

TextBlock is the most commonly used text display control, focusing on the following properties:

Characterspacing the uniform spacing before the character, spacing = font size/1000. The default is 0, and positive values improve tracking and relaxation of character spacing. Negative values reduce tracking and tightening character spacing.

Iscolorfontenabled Boolean value that determines whether the color glyph is displayed in color. True if the color glyph is displayed in color, or false. The default is true.

Linestackingstrategy the enumeration value to determine the policy for the row height per row. There are maxheight (default values), Baselinetobaseline and blocklineheight three species. MaxHeight: Each row is high in lineheight and the maximum of the natural height of the element, Baselinetobaseline: Each row is higher in line with the distance between the text baseline, Blocklineheight: Each row height is lineheight.

Opticalmarginalignment enumeration value that specifies how to handle the side-by-side value of each character layout when aligning with the text container boundary. There are none (default) and Trimsidebearings two species. None: Use the side orientation from the font layout values, Trimsidebearings: Do not use the side bits from the font layout values, and do not align the side of the glyph with the position of the glyph "Ink" section

TextAlignment enumeration value that indicates the horizontal alignment of the text content. has left (default), right, Center, and justify four kinds. Left: Align Right: right-aligned, center: centered, justify: inside the container.

Textlinebounds enumeration value that affects the formula for the row height calculation. There are four kinds of full (default), tight, trimtobaseline, and Trimtocapheight. Full: Using regular row height calculations, tight: The top height of the line is the font's high write height, the line at the bottom tells the text baseline, Trimtobaseline: The bottom of the line is the text baseline, Trimtocapheight: The top of the line is the font of the high writing height.

TextTrimming enumeration value, the rest behavior taken when content overflows the content area. There are four kinds of characterellipsis, Clip, None (default) and WordEllipsis. CharacterEllipsis: Trims text at character boundaries. The ellipsis (...) will be drawn in place of the remaining text, Clip: Trim the text at the pixel level and visually crop the extra glyphs, none: Do not rest the text, WordEllipsis: Trim the text at the word boundary. An ellipsis (...) is drawn to replace the remaining text.

TextWrapping enumeration value, the way text wraps. There are three kinds of nowrap, Wrap and Wrapwholewords. NoWrap: Do not wrap, Wrap: Text line overflows the available width of the container, then wrap. Even if the last overflow is a single word, it still wraps, Wrapwholewords: The only difference with wrap is that the single word does not wrap.

<textblock text= "I am a TextBlock"

characterspacing= "100"

Horizontalalignment= "Center" verticalalignment= "center"

Fontfamily= "Arial" fontstyle= "italic" fontsize= "a" fontweight= "black"

Iscolorfontenabled= "True"

Linestackingstrategy= "Blocklineheight"

Opticalmarginalignment= "Trimsidebearings"

Textalignment= "Center" textlinebounds= "Trimtobaseline" textreadingorder= "Detectfromcontent"

texttrimming= "WordEllipsis" textwrapping= "Wrapwholewords"

height= "Width="/>

(2) TextBox

A textbox is a text input control that focuses on the following properties:

Acceptsreturn Boolean value that determines whether the text box allows line breaks or carriage returns. True if the text box allows line breaks, or false. The default is False.

FlowDirection Boolean value that determines the flow direction of the content in the text box. There are two kinds of lefttoright and RightToLeft. LeftToRight: Content flows from left to right, RightToLeft: Content oh that flows from right to left.

Header text box header content, default to NULL.

INPUTSCOPE Specifies the SIP type to change the control's input range.

Isspellcheckenabled Boolean value that specifies whether the TextBox input should interact with the spell-check engine. True if the TextBox input interacts with the spell checker engine, or false. The default is False.

Istextpredictionenabled determines whether the text prediction feature (AutoComplete) for this TextBox should be enabled. True to enable the text prediction feature, otherwise false. The default is true.

<textbox acceptsreturn= "True" background= "AliceBlue" borderbrush= "Blue" borderthickness= "2"

Compositemode= "Inherit" flowdirection= "RightToLeft" fontfamily= "Arial" fontstyle= "italic" fontsize= "FontWeight=" "Black"

header= "Header Text" inputscope= "number" isreadonly= "False" isspellcheckenabled= "True" istextpredictionenabled= " False "

selectedtext= "123" selectionhighlightcolor= "AliceBlue" horizontalalignment= "center" verticalalignment= "center" >

(3) PasswordBox

PasswordBox is a commonly used password input control that focuses on the following properties:

MaxLength the maximum length of the password processed by this passwordbox, and a value of 0 indicates no limit. The default is 0.

Password passwordbox the currently reserved password.

PasswordChar PasswordBox The mask character, the default value is.

Ispasswordrevealbuttonenabled Boolean value that specifies whether the visual UI of PasswordBox includes toggle to show or hide the ammonium button elements of the type character. True Displays the password display button; False does not display the password display button. The default is False.

<passwordbox height= "width=" maxlength= "8" password= "123456" passwordchar= "*" ispasswordrevealbuttonenabled= "True"/>

2. Button control

(1) Button

Buttons are the most commonly used button controls, focusing on the following:

Clickmode An enumeration value that indicates the value of the time the Click event occurred. There are three kinds of hover, press and release (default value). Hover: When you move the mouse pointer over the control, the click event should be raised, press: The Click event should be raised while the mouse pointer is over the control, and if the keyboard is used, specifies that the click event should be raised when the SPACEBAR or ENTER key is pressed and the control has keyboard focus. Release: The Click event should be raised when the left mouse button is pressed and released and the mouse pointer is over the control, and if the keyboard is used, specifies that the click event should be raised when the space or Enter key is pressed and released and the control has keyboard focus.

Horizontalcontentalignment enumeration value, the horizontal alignment of the content of the control. There are four kinds of center (default), left, right, and stretch. Center: Aligns elements with the layout of the parent element, left: aligns the elements with the left-hand side of the layout of the parent element, right: aligns elements with the right-hand side of the layout of the parent element, Stretch: Stretches to fill the elements of the entire parent element's layout slot.

Verticalcontentalignment enumeration value, the vertical alignment of the content of the control. There are four kinds of center (default), Bottom, top and stretch.

Flyout the surfacing control associated with this button. When the button clicks, the flyout control surfaces, then clicks the button or the blank place, flyout disappears.

<button content= "click Me." Clickmode= ' release ' horizontalcontentalignment= ' left ' verticalcontentalignment= ' top '

Fontsize= "horizontalalignment=" center "verticalalignment=" center "height=" "width=" click= "Button_Click" >

<Button.Flyout>

<Flyout>

<textblock text= "I am flyout content." />

</Flyout>

</Button.Flyout>

</Button>

See more highlights of this column: http://www.bianceng.cnhttp://www.bianceng.cn/Programming/net/

(2) Hyperlinkbutton

Hyperlinkbutton is a popular hyperlink button that focuses on the following:

NavigateUri the Uniform Resource Identifier (URI) to navigate to when the Hyperlinkbutton is clicked

Horizontalcontentalignment= "left" verticalcontentalignment= "Top" navigateuri= "http://www.google.com.hk"/>

(3) ToggleButton

ToggleButton is a button that can toggle state, focusing on the following:

Isthreestate A Boolean value that indicates whether the control supports values of three states. True if the control supports three states, otherwise false. The default is False.

IsChecked Boolean value that specifies whether ToggleButton is selected. True if ToggleButton is selected, False if ToggleButton is not selected, otherwise null. The default is False.

<togglebutton content= "Toggle button" isthreestate= "true" Fontsize= "ischecked=" true "horizontalalignment=" Center "verticalalignment=" center "

Checked= "togglebutton_checked" unchecked= "togglebutton_unchecked" indeterminate= "togglebutton_indeterminate"/ >

event that triggers when the button becomes selected

private void Togglebutton_checked (object sender, RoutedEventArgs e)

{}

The button changes to an event that is triggered when the state is unchecked

private void Togglebutton_unchecked (object sender, RoutedEventArgs e)

{}

event that triggers when the button becomes an indeterminate state

private void Togglebutton_indeterminate (object sender, RoutedEventArgs e)

{}

(4) RadioButton

RadioButton is a radio button that inherits from ToggleButton and focuses on the following:

GroupName specifies which RadioButton controls are mutually exclusive names, and RadioButton of the same groupname cannot be selected at the same time.

IsChecked Boolean value that specifies whether the button is selected. Note If the same GroupName control is set to true at the same time, the subsequent control selection will overwrite the previous one.

<radiobutton groupname= "groupname" ischecked= "True" content= "RadioButton One"/>

<radiobutton groupname= "groupname" ischecked= "True" content= "RadioButton two"/>

(5) CheckBox

The checkbox is a check button that inherits from ToggleButton and focuses on the following:

IsChecked Boolean value that specifies whether the button is selected.

<checkbox ischecked= "True" content= "CheckBox One"/>

<checkbox ischecked= "False" content= "CheckBox One"/>

Here we have completed the introduction of several commonly used controls, hoping to help you better understand the Windows Store application control, thank you.