Button

Regular and toggle buttons are controls that can be clicked, which then executes a command or raises an event.

Control Implementations

There are separate regular and toggle button concept control implementations based on the usage context.

Ribbon and Toolbar Contexts

Use the BarButton control to implement a regular non-checkable button within a ribbon or toolbar context.

If the button should be checkable, use the BarToggleButton control instead. This control class inherits BarButton and all its features but adds toggle support.

BarButton examples in several variant sizes (large, medium, and small)

xmlns:bars="http://schemas.actiprosoftware.com/winfx/xaml/bars"
...
<bars:StandaloneToolBar>
	<!-- Label is auto-generated from Key, but we want to override the auto-generated KeyTipText -->
	<bars:BarButton
		Key="Undo"
		KeyTipText="AZ"
		SmallImageSource="/Images/Undo16.png"
		Command="{Binding UndoCommand}"
		/>
	...
</bars:StandaloneToolBar>

Menu Contexts

Use the BarMenuItem control to implement a regular or toggle button concept within a menu context.

A BarMenuItem example

xmlns:bars="http://schemas.actiprosoftware.com/winfx/xaml/bars"
...
<bars:BarContextMenu>
	<!-- Label is auto-generated from Key, but we want to override the auto-generated KeyTipText -->
	<bars:BarMenuItem
		Key="Undo"
		KeyTipText="AZ"
		SmallImageSource="/Images/Undo16.png"
		Command="{Binding UndoCommand}"
		/>
	...
</bars:BarContextMenu>

Appearance

There are several appearance-related properties that determine how the controls render.

Label

The controls have a string Label that can be set, which is visible in UI.

The Label can be auto-generated based on the control's Key property. For instance, a control with Key of "FormatPainter" will automatically assign "Format Painter" as the Label value. The auto-generated default can be overridden by setting the Label property.

The BarButton.Label is rendered on the button when it is in a Medium or Large variant size. When using a Large variant size button, the label will wrap words to two lines to minimize overall width. In cases where a run of label text should not be broken up into two lines, use a non-breaking space character (ASCII code 160) in place of any whitespace, like this:

xmlns:bars="http://schemas.actiprosoftware.com/winfx/xaml/bars"
...
<bars:BarButton ... Label="Data&#160;Set" />

The BarMenuItem.Label is rendered on the menu item as its primary content.

Images

The controls can display images that help identify their function.

All BarButton instances should set a SmallImageSource at a minimum, which is generally used for Small and Medium variants, as well as in the Ribbon Quick Access Toolbar and if the control overflows to a menu. If the button supports a Large variant size, it should also define a LargeImageSource. When the button has a Spacious UI density, it will try to use MediumImageSource.

BarMenuItem instances can optionally define a SmallImageSource that appears in the menu's icon column. When UseLargeSize is set to create a large menu item, the LargeImageSource property is used instead. When the menu item is checked, a highlight box will appear around the image. If no image is specified, a standard check glyph will be used in place of the image.

Description (BarMenuItem only)

When UseLargeSize is set to create a large menu item, the Description property's string value is displayed under the menu item's bold label as an extended description.

Title

An optional string BarButton.Title and BarMenuItem.Title can be specified, which are intended to override the control's Label when displayed in screen tips and customization UI.

Variant Sizes

BarButton supports multiple variant sizes via its VariantSize property. This feature can be used in conjunction with RibbonControlGroup within a ribbon in Classic layout mode to achieve various button layouts as available width changes.

When a ribbon is in Simplified layout mode, the BarButton control will render in a Small variant size by default and will collapse to an overflow menu when necessary. The ToolBarItemVariantBehavior property can be set to All to show a label. Alternatively, the ToolBarItemCollapseBehavior property can be set to Always to always have the button in the overflow menu.

While BarMenuItem doesn't support variant sizes, it does have a UseLargeSize property that can be set to show a large version of the menu item. This large version uses a large image and can display an extended Description.

See the Resizing and Variants topic for more information on ribbon's variant sizing features.

User Interface Density (BarButton only)

The UserInterfaceDensity property can alter the appearance of the button, such as its size, padding, and image used. This property is not generally set on the button instance itself, and is instead meant to be set on the root bar control to inherit down, such as with the Ribbon.UserInterfaceDensity property.

Checked State (BarToggleButton and BarMenuItem only)

Whereas BarButton implements a non-toggleable button, the BarToggleButton and BarMenuItem controls both support a checked state.

Set the BarToggleButton.IsChecked or BarMenuItem.IsChecked property to true to render the control in a checked state.

Key Tips

The controls support key tips. When a control's key tip is accessed, a click is simulated.

The KeyTipText can be auto-generated based on the control's Label property. For instance, a control with Label of "Copy" will automatically assign "C" as the KeyTipText value. The auto-generated default can be overridden by setting the KeyTipText property.

The BarButton.KeyTipText and BarMenuItem.KeyTipText properties designate the key tip text to use for the control.

See the Key Tips topic for more information on key tips.

Commands and Events

The ICommand in the BarButton.Command and BarMenuItem.Command properties is executed when the control is clicked or a key tip accesses the control.

A BarButton.Click and BarMenuItem.Click event is also raised in these scenarios.

See the Using Commands topic for more information on commands.

Input Gesture Text

The control can have input gesture text associated with it that describes a related keyboard shortcut, and is displayed in the screen tip for the control or in the menu item itself.

This input gesture text is automatically derived from commands that inherit RoutedCommand and have a KeyGesture set. Or input gesture text can be specified in the BarButton.InputGestureText and BarMenuItem.InputGestureText properties.

Input gesture text may be hidden altogether in UI by setting the BarButton.IsInputGestureTextVisible and BarMenuItem.IsInputGestureTextVisible properties to false.

Screen Tips

The controls support screen tips, which are formatted tool tips.

The control's Title is used as the default screen tip header, falling back to Label if no Title is available. The BarButton.ScreenTipHeader and BarMenuItem.ScreenTipHeader properties can override the default screen tip header value if desired.

If the control's ToolTip property is set to a value that doesn't derive from a native ToolTip control, such as a string, the value will be used in the screen tip's content area, with the screen tip header becoming bold. The screen tip's content area is where extended descriptions are displayed.

If the optional BarButton.ScreenTipFooter and BarMenuItem.ScreenTipFooter properties are specified, they will appear in a footer area of the screen tip.

See the Screen Tips topic for more information on screen tips.

MVVM Support

The optional companion MVVM Library defines BarButtonViewModel (regular buttons) and BarToggleButtonViewModel (toggle buttons) classes that are intended to be used as view models for buttons.

These view model classes map over to the appropriate view controls described above based on usage context and configure all necessary bindings between the view models and the view controls.