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:
PropertyArrow ButtonFlat Toggle SwitchGel ButtonGel Repeat ButtonGel Toggle ButtonGeneric ButtonGeneric Repeat ButtonGeneric Toggle ButtonIndustrial Push ButtonIndustrial Repeat ButtonIndustrial Toggle ButtonNavigate Gel ButtonNavigate Generic ButtonPower Toggle ButtonRotary Switch Three State ButtonToggle Switch Button
AllowDropXXXXXXXXXXXXXXXX
ArrowBackgroundX
ArrowBorderBrushX
ArrowDesignX
ArrowDirectionX
ArrowPaddingX
BackgroundXXXXXXXXXXXXXXX
BorderBrushXXXXXXXXXXXXXX
BorderThicknessXXXXXXXXXXXXXXX
ClickModeXXXXXXXXXXXXXX
ClipToBoundsXXXXXXXXXXXXXXXX
ColumnXXXXXXXXXXXXXXX
ColumnSpanXXXXXXXXXXXXXXX
CommandParameterXXXXXXXXXXXXXX
CommandTargetXXXXXXXXXXXXXX
ContentXXXXXXXXXXXXXX
ContentStringFormatXXXXXXXXXXXXXX
CornerRadiusXXXXXXXXXXXXXX
DelayXXX
EffectXXXXXXXXXXXXXXXX
FlowDirectionXXXXXXXXXXXXXXXX
FocusableXXXXXXXXXXXXXXXX
FocusBorderThicknessXXXXXXXXXXXXXX
FocusBrushXXXXXXXXXXXXXX
FocusVisualStyleXXXXXXXXXXXXXXXX
FontFamilyXXXXXXXXXXXXXXX
FontSizeXXXXXXXXXXXXXXX
FontStretchXXXXXXXXXXXXXXX
FontStyleXXXXXXXXXXXXXXX
FontWeightXXXXXXXXXXXXXXX
ForceCursorXXXXXXXXXXXXXXXX
ForegroundXXXXXXXXXXXXXXX
GlareBrushXXXXXXXXXXXXXX
HeightXXXXXXXXXXXXXXXX
HorizontalAlignmentXXXXXXXXXXXXXXXX
HorizontalContentAlignmentXXXXXXXXXXXXXXX
IncrementXXXXXXXX
InnerBorderBrushXXXXXXXXXXXXXX
InnerBorderThicknessXXXXXXXXXXX
InnerCornerRadiusXXXXXXXXXXXXXX
IntervalXXX
IsCancelXXXXXXXXX
IsCheckedXXXXX
IsDefaultXXXXXXXXX
IsEnabledXXXXXXXXXXXXXXXX
IsHitTestVisibleXXXXXXXXXXXXXXXX
IsManipulationEnabledXXXXXXXXXXXXXXXX
IsSharedSizeScopeXXXXXXXXXXXXXXX
IsTabStopXXXXXXXXXXXXXXX
IsThreeStateXXX
LocalizationXXXXXXXXXXXXXXXX
MarginXXXXXXXXXXXXXXXX
MaxHeightXXXXXXXXXXXXXXXX
MaxWidthXXXXXXXXXXXXXXXX
MinHeightXXXXXXXXXXXXXXXX
MinWidthXXXXXXXXXXXXXXXX
NameXXXXXXXXXXXXXXXX
OffCaptionX
OffValueX
OnCaptionX
OnValueX
OpacityXXXXXXXXXXXXXXXX
OpacityMaskXXXXXXXXXXXXXXXX
OverridesDefaultStyleXXXXXXXXXXXXXXXX
PaddingXXXXXXXXXXXXXXX
PowerNullBrushXX
PowerOffBrushXXXX
PowerOnBrushXXXX
PressedBrushXXXXXX
RenderTransformOriginXXXXXXXXXXXXXXXX
RowXXXXXXXXXXXXXXX
RowSpanXXXXXXXXXXXXXXX
ShowGridLinesX
SnapsToDevicePixelsXXXXXXXXXXXXXXXX
StrokeThicknessXXXXX
StyleXXXXXXXXXXXXXXXX
TabIndexXXXXXXXXXXXXXXX
TagXXXXXXXXXXXXXXXX
TemplateXXXXXXXXXXXXXXX
ToolTipXXXXXXXXXXXXXXXX
UidXXXXXXXXXXXXXXXX
UseLayoutRoundingXXXXXXXXXXXXXXXX
ValueXXXXXXXXX
VerticalAlignmentXXXXXXXXXXXXXXXX
VerticalContentAlignmentXXXXXXXXXXXXXXX
VisibilityXXXXXXXXXXXXXXXX
WidthXXXXXXXXXXXXXXXX

Button Controls Property Descriptions

The following table shows the properties descriptions used by all control button:
PropertyDescription
AllowDropSelect this check box to indicate that the control can accept data that is dragged onto it.
ArrowBackgroundExpand this field to select the background color for an arrow button control.
ArrowBorderBrushExpand this field to select the border color of the selected arrow control.
ArrowDesignSpecifies the appearance of the arrow. Available selections are:
  • Pointer
  • Barbed
  • Triangle
ArrowDirectionSpecifies the direction of the arrow. Available selections are:
  • Up
  • Down
  • Right
  • Left
ArrowPaddingSpecifies the horizontal and vertical alignment of the arrow within the button.
BackgroundExpand this field to select the background color of the selected control.
BorderBrushExpand this field to select the border color of the selected control.
BorderThicknessSpecifies the border thickness of a control, in pixels.
ClickModeSpecifies when the Click event occurs. Selections are:
  • Hover
  • Press
  • Release
ClipToBoundsSelect 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.
ColumnSpecifies the column within the grid where the control is located.
ColumnSpanSpecifies the total number of columns that child content spans within a grid.
CommandParameterSpecifies the parameter to pass to the Command property.
CommandTargetSpecifies the element on which to raise the specified command.
ContentSpecifies the content displayed on the control.
ContentStringFormatSpecifies a composite string that determines how to format the Content property if it is displayed as a string.
CornerRadiusSpecifies the degree to which the corners of a control are rounded.
DelaySpecifies the amount of time, in milliseconds, that the control waits while being pressed before a command executes.
EffectClick 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:
  • Blur
    • Kernel Type
    • Radius
  • Drop Shadow
    • Color
    • Direction
    • Opactiy
    • Shadow Depth
FlowDirectionSpecifies the direction that text and other user interface (UI) elements flow within any parent control. Selections are:
  • Left to Right
  • Right to Left
FocusableSelect this check box to indicate that the control can receive focus.
FocusBorderThicknessSpecifies the thickness of the focus ring on the outside of the button.
FocusBrushExpand this field to select the color that displays around the control's border when the control has focus.
FocusVisualStyleSpecifies a property that enables customization of appearance, effects, or other style characteristics that apply to this control when it has focus.
FontFamilySpecifies the font family for the control.
FontSizeSpecifies the font size for the control.
FontStretchSpecifies the degree to which a font is condensed or expanded on the screen.
FontStyleSpecifies the font style for the control.
FontWeightSpecifies the weight or thickness of the specified font.
ForceCursorSelect this check box to indicate that the user interface (UI) renders the cursor as declared by the Cursor property.
ForegroundExpand this field to select the foreground color.
GlareBrushExpand this field to specify the glare effect for the control.
HeightSpecifies the height of the control, in pixels.
HorizontalAlignmentSpecifies the horizontal alignment characteristics applied to this control. Selections are:
  • Left
  • Center
  • Right
  • Stretch
HorizontalContentAlignmentSpecifies the horizontal alignment of the control's content. Selections are:
  • Left
  • Center
  • Right
  • Stretch
IncrementSpecifies the amount by which the value is increased each time the button is clicked.
InnerBorderBrushExpand this field to select the color for the inner border.
InnerBorderThicknessExpand this field to select the color for the inner border.
InnerConrnerRadiusSpecifies the degree to which the corners of the inner border are rounded.
IntervalSpecifies the amount of time, in milliseconds, between increase or decrease commands when you click a Repeat Button or a Slider.
IsCancelSelect 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.
IsCheckedSelect this check box to indicate that the control is checked.
IsDefaultSelect 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.
IsEnabledSelect this check box to indicate that this control is enabled in the user interface (UI).
IsHitTestVisibleSelect this check box to indicate that the control can possibly be returned as a hit test result from some portion of its rendered content.
IsManipulationEnabledSelect this check box to indicate that the manipulation events for the control are enabled.
IsSharedSizeScopeSelect this check box to indicate that controls are sharing size information.
IsTabStopSelect this check box to indicate that a control is included in tab navigation.
IsThreeStateSelect this check box to indicate that the control supports three states; that is, selected, cleared, indeterminate (the control is selected but dimmed).
LocalizationClick 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.
MarginSpecifies the outer margin of a control.
MaxHeightSpecifies the maximum height of a control.
MaxWidthSpecifies the maximum width of a control.
MinHeightSpecifies the minimum height of a control.
MinWidthSpecifies the minimum width of a control.
NameSpecifies 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.
OffCaptionSpecifies the label to use for the Off position on the control.
OffValueSelect this check box to indicate that the switch on the control starts in the Off position.
OnCaptionSpecifies the label to use for the On position on the control.
OnValueSelect this check box to indicate that the switch on the control starts in the On position.
OpacitySpecifies the opacity factor applied to the entire control. Valid values are 0 through 1, with up to 15 decimal places.
OpacityMaskExpand 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.
OverridesDefaultStyleSelect this check box to indicate that this control incorporates style properties from theme styles.
PaddingSpecifies the amount of padding to apply to the inside edge of each side of a control.
PowerNullBrushExpand this field to select the color of the button when it is in the third state.
PowerOffBrushExpand this field to select the color of the button when the power is off.
PowerOnBrushExpand this field to select the color of the button when the power is on.
PressedBrushExpand this field to select the color for the button when it is pressed.
RenderTransformOriginSpecifies the center point of any possible render transform, relative to the bounds of the element.
  • X is the horizontal origin factor, given as a value between 0 and 1.
  • Y is the vertical origin factor, given as a value between 0 and 1.
RowRowBackground
RowSpanSpecifies the total number of rows that child content spans within a grid.
SnapsToDevicePixelsSelect this check box to indicate that rendering for this control uses device-specific pixel settings.
StrokeThicknessSpecifies the width of the control's outline.
StyleSpecifies the style used by this control when it is rendered.
TabIndexSpecifies the order in which controls receive focus when the Tab key is pressed.
TagSpecifies an arbitrary object value that can be used to store custom information about this control.
TemplateClick the ellipsis button to open the Open dialog box to select a template to use.
ToolTipSpecifies the tool-tip that displays for this control in the user interface (UI).
UidSpecifies the unique identifier (for localization) for this control.
UseLayoutRoundingSpecifies a value that determines whether rendering for the object and its visual subtree should use rounding behavior that aligns rendering to whole pixels.
ValueSpecifies the current magnitude of the range control.
VerticalAlignmentSpecifies the vertical alignment characteristics applied to this control. Selections are:
  • Bottom
  • Center
  • Top
  • Stretch
VerticalContentAlignmentSpecifies the vertical alignment of the control's content. Selections are:
  • Bottom
  • Center
  • Top
  • Stretch
VisiblilitySpecifies the visibility of this control. Selections are:
  • Collapsed
  • Hidden
  • Visible
WidthSpecifies the width of the control, in pixels.