Button Controls
A button is a control that causes an event to occur each time it is pressed and released.
Button controls include three categories: regular, repeat, and toggle, with multiple styles in each category. A repeat button causes an event to occur repeatedly from the time it is pressed until it is released. A toggle button can switch between two or three states; that is on/off and on/off/null.
Button Controls Property Usage
The following table shows the properties used by each control button:
Property | Arrow Button | Flat Toggle Switch | Gel Button | Gel Repeat Button | Gel Toggle Button | Generic Button | Generic Repeat Button | Generic Toggle Button | Industrial Push Button | Industrial Repeat Button | Industrial Toggle Button | Navigate Gel Button | Navigate Generic Button | Power Toggle Button | Rotary Switch Three State Button | Toggle Switch Button |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
AllowDrop | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
ArrowBackground | X | |||||||||||||||
ArrowBorderBrush | X | |||||||||||||||
ArrowDesign | X | |||||||||||||||
ArrowDirection | X | |||||||||||||||
ArrowPadding | X | |||||||||||||||
Background | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |
BorderBrush | X | X | X | X | X | X | X | X | X | X | X | X | X | X | ||
BorderThickness | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |
ClickMode | X | X | X | X | X | X | X | X | X | X | X | X | X | X | ||
ClipToBounds | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
Column | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |
ColumnSpan | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |
CommandParameter | X | X | X | X | X | X | X | X | X | X | X | X | X | X | ||
CommandTarget | X | X | X | X | X | X | X | X | X | X | X | X | X | X | ||
Content | X | X | X | X | X | X | X | X | X | X | X | X | X | X | ||
ContentStringFormat | X | X | X | X | X | X | X | X | X | X | X | X | X | X | ||
CornerRadius | X | X | X | X | X | X | X | X | X | X | X | X | X | X | ||
Delay | X | X | X | |||||||||||||
Effect | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
FlowDirection | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
Focusable | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
FocusBorderThickness | X | X | X | X | X | X | X | X | X | X | X | X | X | X | ||
FocusBrush | X | X | X | X | X | X | X | X | X | X | X | X | X | X | ||
FocusVisualStyle | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
FontFamily | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |
FontSize | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |
FontStretch | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |
FontStyle | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |
FontWeight | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |
ForceCursor | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
Foreground | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |
GlareBrush | X | X | X | X | X | X | X | X | X | X | X | X | X | X | ||
Height | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
HorizontalAlignment | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
HorizontalContentAlignment | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |
Increment | X | X | X | X | X | X | X | X | ||||||||
InnerBorderBrush | X | X | X | X | X | X | X | X | X | X | X | X | X | X | ||
InnerBorderThickness | X | X | X | X | X | X | X | X | X | X | X | |||||
InnerCornerRadius | X | X | X | X | X | X | X | X | X | X | X | X | X | X | ||
Interval | X | X | X | |||||||||||||
IsCancel | X | X | X | X | X | X | X | X | X | |||||||
IsChecked | X | X | X | X | X | |||||||||||
IsDefault | X | X | X | X | X | X | X | X | X | |||||||
IsEnabled | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
IsHitTestVisible | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
IsManipulationEnabled | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
IsSharedSizeScope | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |
IsTabStop | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |
IsThreeState | X | X | X | |||||||||||||
Localization | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
Margin | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
MaxHeight | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
MaxWidth | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
MinHeight | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
MinWidth | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
Name | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
OffCaption | X | |||||||||||||||
OffValue | X | |||||||||||||||
OnCaption | X | |||||||||||||||
OnValue | X | |||||||||||||||
Opacity | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
OpacityMask | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
OverridesDefaultStyle | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
Padding | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |
PowerNullBrush | X | X | ||||||||||||||
PowerOffBrush | X | X | X | X | ||||||||||||
PowerOnBrush | X | X | X | X | ||||||||||||
PressedBrush | X | X | X | X | X | X | ||||||||||
RenderTransformOrigin | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
Row | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |
RowSpan | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |
ShowGridLines | X | |||||||||||||||
SnapsToDevicePixels | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
StrokeThickness | X | X | X | X | X | |||||||||||
Style | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
TabIndex | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |
Tag | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
Template | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |
ToolTip | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
Uid | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
UseLayoutRounding | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
Value | X | X | X | X | X | X | X | X | X | |||||||
VerticalAlignment | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
VerticalContentAlignment | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | |
Visibility | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
Width | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X | X |
Button Controls Property Descriptions
The following table shows the properties descriptions used by all control button:
Property | Description |
---|---|
AllowDrop | Select this check box to indicate that the control can accept data that is dragged onto it. |
ArrowBackground | Expand this field to select the background color for an arrow button control. |
ArrowBorderBrush | Expand this field to select the border color of the selected arrow control. |
ArrowDesign | Specifies the appearance of the arrow. Available selections are:
|
ArrowDirection | Specifies the direction of the arrow. Available selections are:
|
ArrowPadding | Specifies the horizontal and vertical alignment of the arrow within the button. |
Background | Expand this field to select the background color of the selected control. |
BorderBrush | Expand this field to select the border color of the selected control. |
BorderThickness | Specifies the border thickness of a control, in pixels. |
ClickMode | Specifies when the Click event occurs. Selections are:
|
ClipToBounds | Select this check box to clip the content of this control (or content coming from the child elements of this control) to fit into the size of the containing control. |
Column | Specifies the column within the grid where the control is located. |
ColumnSpan | Specifies the total number of columns that child content spans within a grid. |
CommandParameter | Specifies the parameter to pass to the Command property. |
CommandTarget | Specifies the element on which to raise the specified command. |
Content | Specifies the content displayed on the control. |
ContentStringFormat | Specifies a composite string that determines how to format the Content property if it is displayed as a string. |
CornerRadius | Specifies the degree to which the corners of a control are rounded. |
Delay | Specifies the amount of time, in milliseconds, that the control waits while being pressed before a command executes. |
Effect | Click the arrow to expand the property, select the effect you want to apply to the control, and then configure the specific values for the effect. Valid values to select are:
|
FlowDirection | Specifies the direction that text and other user interface (UI) elements flow within any parent control. Selections are:
|
Focusable | Select this check box to indicate that the control can receive focus. |
FocusBorderThickness | Specifies the thickness of the focus ring on the outside of the button. |
FocusBrush | Expand this field to select the color that displays around the control's border when the control has focus. |
FocusVisualStyle | Specifies a property that enables customization of appearance, effects, or other style characteristics that apply to this control when it has focus. |
FontFamily | Specifies the font family for the control. |
FontSize | Specifies the font size for the control. |
FontStretch | Specifies the degree to which a font is condensed or expanded on the screen. |
FontStyle | Specifies the font style for the control. |
FontWeight | Specifies the weight or thickness of the specified font. |
ForceCursor | Select this check box to indicate that the user interface (UI) renders the cursor as declared by the Cursor property. |
Foreground | Expand this field to select the foreground color. |
GlareBrush | Expand this field to specify the glare effect for the control. |
Height | Specifies the height of the control, in pixels. |
HorizontalAlignment | Specifies the horizontal alignment characteristics applied to this control. Selections are:
|
HorizontalContentAlignment | Specifies the horizontal alignment of the control's content. Selections are:
|
Increment | Specifies the amount by which the value is increased each time the button is clicked. |
InnerBorderBrush | Expand this field to select the color for the inner border. |
InnerBorderThickness | Expand this field to select the color for the inner border. |
InnerConrnerRadius | Specifies the degree to which the corners of the inner border are rounded. |
Interval | Specifies the amount of time, in milliseconds, between increase or decrease commands when you click a Repeat Button or a Slider. |
IsCancel | Select this check box to indicate that a Button or Repeat Button acts as a Cancel button. Press the Esc key to select the actual Cancel button. |
IsChecked | Select this check box to indicate that the control is checked. |
IsDefault | Select this check box to indicate that a Button or Repeat Button is the default Submit button. Press the Enter key to select the actual Submit button. |
IsEnabled | Select this check box to indicate that this control is enabled in the user interface (UI). |
IsHitTestVisible | Select this check box to indicate that the control can possibly be returned as a hit test result from some portion of its rendered content. |
IsManipulationEnabled | Select this check box to indicate that the manipulation events for the control are enabled. |
IsSharedSizeScope | Select this check box to indicate that controls are sharing size information. |
IsTabStop | Select this check box to indicate that a control is included in tab navigation. |
IsThreeState | Select this check box to indicate that the control supports three states; that is, selected, cleared, indeterminate (the control is selected but dimmed). |
Localization | Click the ellipsis button to open the Localization Configuration dialog box where you can configure the property to localize, the language to use for localization, and the text to localize. |
Margin | Specifies the outer margin of a control. |
MaxHeight | Specifies the maximum height of a control. |
MaxWidth | Specifies the maximum width of a control. |
MinHeight | Specifies the minimum height of a control. |
MinWidth | Specifies the minimum width of a control. |
Name | Specifies the identifying name of the control. The name provides a reference so that code behind, such as event handler code, can refer to a markup element during processing by a XAML processor. |
OffCaption | Specifies the label to use for the Off position on the control. |
OffValue | Select this check box to indicate that the switch on the control starts in the Off position. |
OnCaption | Specifies the label to use for the On position on the control. |
OnValue | Select this check box to indicate that the switch on the control starts in the On position. |
Opacity | Specifies the opacity factor applied to the entire control. Valid values are 0 through 1, with up to 15 decimal places. |
OpacityMask | Expand this field to select a color for the opacity mask, which is applied to any alpha-channel masking for the rendered content of this control. |
OverridesDefaultStyle | Select this check box to indicate that this control incorporates style properties from theme styles. |
Padding | Specifies the amount of padding to apply to the inside edge of each side of a control. |
PowerNullBrush | Expand this field to select the color of the button when it is in the third state. |
PowerOffBrush | Expand this field to select the color of the button when the power is off. |
PowerOnBrush | Expand this field to select the color of the button when the power is on. |
PressedBrush | Expand this field to select the color for the button when it is pressed. |
RenderTransformOrigin | Specifies the center point of any possible render transform, relative to the bounds of the element.
|
Row | RowBackground |
RowSpan | Specifies the total number of rows that child content spans within a grid. |
SnapsToDevicePixels | Select this check box to indicate that rendering for this control uses device-specific pixel settings. |
StrokeThickness | Specifies the width of the control's outline. |
Style | Specifies the style used by this control when it is rendered. |
TabIndex | Specifies the order in which controls receive focus when the Tab key is pressed. |
Tag | Specifies an arbitrary object value that can be used to store custom information about this control. |
Template | Click the ellipsis button to open the Open dialog box to select a template to use. |
ToolTip | Specifies the tool-tip that displays for this control in the user interface (UI). |
Uid | Specifies the unique identifier (for localization) for this control. |
UseLayoutRounding | Specifies a value that determines whether rendering for the object and its visual subtree should use rounding behavior that aligns rendering to whole pixels. |
Value | Specifies the current magnitude of the range control. |
VerticalAlignment | Specifies the vertical alignment characteristics applied to this control. Selections are:
|
VerticalContentAlignment | Specifies the vertical alignment of the control's content. Selections are:
|
Visiblility | Specifies the visibility of this control. Selections are:
|
Width | Specifies the width of the control, in pixels. |