Original: Windows 8.1 app to start again-several common controls
This article provides a brief introduction to the use of controls in the Windows Store app, and for the convenience of explaining, we have selected representative controls in both the text Control and button control categories for detailed instructions.
1. Text controls
(1) TextBlock
TextBlock is the most commonly used text display control, focusing on the following properties:
- characterspacing characters before the uniform spacing, spacing = font size/1000. The default is 0, positive values increase tracking and relaxed 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; otherwise false. The default is true.
- The Linestackingstrategy enumeration value that determines the policy for each row row height. There are three kinds of maxheight (default), Baselinetobaseline and Blocklineheight. MaxHeight: Row height per row is the maximum value in lineheight and the natural height of the element, Baselinetobaseline: The distance between the lines of each row is higher to the baseline of the text, Blocklineheight: Each row is higher in lineheight.
- The Opticalmarginalignment enumeration value that specifies how to handle the side-by-side values in each character layout when aligned with the bounds of the text container. There are none (default) and trimsidebearings two kinds. None: Use side orientation from font layout values, Trimsidebearings: Do not use edge bits from font layout values, and do not align one side of the glyph with the position where the glyph "Ink" section begins
- A TextAlignment enumeration value that indicates the horizontal alignment of the text content. There are four kinds of left (default), right, Center, and Justify. Left: Align right: align to align, center: center, Justify: Inside the container.
- The Textlinebounds enumeration value that affects the formula for row height calculations. There are four kinds of full (default), tight, trimtobaseline, and Trimtocapheight. Full: Using the normal line height calculation, tight: The top height of the line is the font of high-letter, the bottom of the line is a text baseline, Trimtobaseline: The bottom of the line height is the text baseline, Trimtocapheight: The top of the line is the height of the font high-write.
- TextTrimming enumeration value that is taken when content overflows the content area. There are characterellipsis, Clip, None (default) and wordellipsis four kinds. CharacterEllipsis: Trims the text at the character boundary. The ellipsis (...) is drawn in place of the remaining text, clip: Trimming the text at the pixel level and visually cropping the extra glyphs, None: No rest text, WordEllipsis: trims the text at the word boundary. The ellipsis (...) is drawn to replace the remaining text.
- textwrapping The enumeration value, the way the text wraps. There are three kinds of nowrap, Wrap and Wrapwholewords. NoWrap: No wrap, Wrap: The line of text overflows the available width of the container, then wraps. Even if the last overflow is a single word, it still wraps, Wrapwholewords: The only difference with wrap is that the single word is not wrapped.
<TextBlockText= "I am a TextBlock??"characterspacing= "+"HorizontalAlignment= "Center"VerticalAlignment= "Center"FontFamily= "Arial"FontStyle= "Italic"FontSize= " the"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, otherwise 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 is 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-checking engine. True if the TextBox input interacts with the spell-checking engine; otherwise false. The default is False.
- istextpredictionenabled Determines whether the text prediction feature (AutoComplete) value for this textbox should be enabled. If true, the text prediction feature is enabled; otherwise false. The default is true.
<TextBoxAcceptsreturn= "True"Background= "AliceBlue"BorderBrush= "Blue"borderthickness= "2"Compositemode= "Inherit"flowdirection= "RightToLeft"FontFamily= "Arial"FontStyle= "Italic"FontSize= " the"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 common 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 means there is no limit. The default is 0.
- password PasswordBox The password that is currently reserved. The mask character for
- passwordchar PasswordBox, which is the default value.
- ispasswordrevealbuttonenabled Boolean value that specifies whether the visual UI of PasswordBox includes an ammonium button that toggles the display or hides typed characters. True Displays the password display button; False does not display the password display button. The default is False.
<Height= " Width= " " MaxLength=" 8 " Password = "123456" PasswordChar ="*" ispasswordrevealbuttonenabled = "True" />
2. Button Controls
(1) Button
button is the most commonly used pushbutton control, focusing on the following:
- A Clickmode enumeration value that indicates the time when the Click event occurred. There are three kinds of hover, press and Release (default). Hover: When you move the mouse pointer over the control, you should raise the Click event, press: When the mouse button is pressed and the mouse pointer is over the control, the click event should be raised, or if you are using a keyboard, specify that the click event should be raised when the SPACEBAR or ENTER key is pressed and the control has keyboard focus. Release: When you press and release the left mouse button and the mouse pointer is over the control, you should raise the click event, or if you are using a keyboard, specify that the click event should be raised when the SPACEBAR or Enter key is pressed and released and the control has keyboard focus.
- horizontalcontentalignment The value of the enumeration, the horizontal alignment of the content of the control. There are four kinds of center (default), left, right, and stretch. Center: Aligns elements to the centre of the parent element layout, left: aligns elements to the right side of the layout of the parent element, Stretch: The element that is aligned with the side of the layout of the parent element, and is stretched to fill the entire parent element layout slot.
- verticalcontentalignment The value of the enumeration, the vertical alignment of the content of the control. There are four kinds of center (default), Bottom, Top and stretch.
- flyout The flyout associated with this button. When the button is clicked, the flyout control floats, then clicks the button or the blank, flyout disappears.
<ButtonContent= "click Me."Clickmode= "Release"horizontalcontentalignment= "Left"verticalcontentalignment= "Top"FontSize= " the"HorizontalAlignment= "Center"VerticalAlignment= "Center"Height= "$"Width= "The "Click= "Button_Click"> <Button.flyout> <flyout> <TextBlockText= "I am flyout content."/> </flyout> </Button.flyout> </Button>
(2) Hyperlinkbutton
Hyperlinkbutton is a popular hyperlink button that focuses on the following topics:
- NavigateUri The Uniform Resource Identifier (URI) to navigate to when you click Hyperlinkbutton
<HyperlinkbuttonContent= "Go to google."Foreground= "Green"FontSize= " the"HorizontalAlignment= "Center"VerticalAlignment= "Center"horizontalcontentalignment= "Left"verticalcontentalignment= "Top"NavigateUri= "http://www.google.com.hk"/>
(3) ToggleButton
ToggleButton is a button that can toggle the status, focusing on the following:
- A isthreestate Boolean value that indicates whether the control supports three-state values. 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.
<ToggleButtonContent= "Toggle button"isthreestate= "True"FontSize= " the"IsChecked= "True"HorizontalAlignment= "Center"VerticalAlignment= "Center"Checked= "togglebutton_checked"unchecked= "togglebutton_unchecked"indeterminate= "Togglebutton_indeterminate"/>
//event triggered when the button becomes selected Private voidTogglebutton_checked (Objectsender, RoutedEventArgs e) {} //the button changes to an event that is triggered when the status is unchecked Private voidTogglebutton_unchecked (Objectsender, RoutedEventArgs e) {} //event that is triggered when the button becomes an indeterminate state Private voidTogglebutton_indeterminate (Objectsender, RoutedEventArgs e) {}
(4) RadioButton
RadioButton is a radio button that inherits from ToggleButton and focuses on the following topics:
- 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 state overrides the previous one.
< radiobutton Span style= "Color:rgb (255, 0, 0); >groupname = "GroupName" IsChecked = "True" Content < radiobutton groupname = "GroupName" IsChecked = "True" = "RadioButton"
(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.
<IsChecked= "True" Content= "CheckBox one"/> <IsChecked= "False" Content= "checkbox One" />
Here we have completed the introduction of several common controls, hoping to help you better understand the Windows Store app in the use of controls, thank you.
