Skip to main content
Version: 11.0.0

Built-in Controls

Here are some of the more commonly-used Avalonia controls, organised by category:

Layout controls

ControlDescription
BorderDecorates a single child with a border and background.
CanvasDisplays child controls at specified positions.
Dock PanelArranges child controls along specified edges (top, bottom, left, right) with one filling any remaining space.
ExpanderHas a header area (always visible) and a collapsible content section (single child).
GridArranges child controls in the cells of a grid, positioned by row and column. The cells can span rows and columns.
Grid SplitterCan be added to a grid to allow the user to resize rows or columns at runtime.
PanelStacks child controls on top of one another.
Relative PanelAllows multiple child controls. The position and alignment of the child controls can be specified in relation to the panel itself, or in relation to other child controls. The size of child controls can be specified, or calculated from relations and alignments.
Scroll ViewerAdds scroll bars and scrolling behaviour if the (single) child is larger than the space available.
Split ViewAdds a collapsible pane to the edge of its (single child) content zone.
Stack PanelAllows multiple child controls, arranged in sequence, horizontally or vertically.
Tab ControlThe tab control allows you to sub-divide a view into tab items.
Uniform GridAllows multiple child controls, arranged in a grid with cells of uniform column and row size.
Wrap PanelArranges child controls in sequence from left to right, while they fit in the width. Starts a new line when there is no space left.

Buttons

ControlDescription
ButtonThe basic button control - can display text, an icon or both. Has standard 'click' behavior.
Repeat ButtonA button that raises its click event repeatedly when it is pressed and held.
Radio ButtonA button that has a selected state. It can be placed in a group so that selection of one button deselects all the others in the group.
Toggle ButtonA button that has a selected state and a unselected state. Subsequent clicks 'toggle' this state. A 'checked' pseudo class allows different styles to be allocated to the selected and unselected states.
Button SpinnerA control with two spin buttons and a content zone.
Split ButtonThis functions as a button with primary and secondary parts that can be pressed independently. The primary part behaves like standard button, and the secondary part opens a flyout with additional actions.
Toggle Split ButtonThis functions as a button with primary and secondary parts that can be pressed independently. The primary part behaves like toggle button, and the secondary part opens a flyout with additional actions.

Repeating Data Controls

These controls display repeating data, in either a tabular or list format:

ControlDescription
Data GridDisplays data in a customizable grid.
Items ControlDisplays a collection of items from a bound data source.
Items RepeaterDisplays repeating data from a bound data source. It has both a layout template and a data template.
List BoxA control with items that can be selected.
Combo BoxA control with a drop-down list with items that can be selected.

Text display and editing

ControlDescription
Auto Complete BoxA control that shows a text box for user input and a drop-down that contains possible matches based on what has been typed.
Text BlockA control that displays a block of text. Read-only.
Text BoxUsed to display or edit text without formatting restrictions.
Masked Text BoxUsed to display text in the format contained in a mask; or used to edit text using the format mask to prevent invalid user input.

Value selection

ControlTypeDescription
Check BoxBooleanTrue value presented as a check mark. Click interaction toggles the value. Has an option to display an 'unknown' value.
SliderDoubleRelative value compared to a maximum and minimum value presented as the position along the length of the slider track of the slider button. Drag interaction on the slider button can alter the value between the maximum and minimum values. Keyboard and click interactions can also nudge the value.
CalendarDateTimeThe calendar is a control for users to select dates or date ranges.
Calendar Date PickerDateTimeAn extension of the calendar control that includes a text box and button.
Color PickerColor / HsvColorThe color picker supports user-selection and editing of colors using a spectrum, palette and component sliders. It also supports an optional alpha component, RGB or HSV color models and hexadecimal color values.
Date PickerDateTimeThe date picker has three 'spinner' controls to allow the user to pick a date value.
Time PickerTimeSpanThe time picker has three 'spinner' controls to allow the user to pick a time from hours, minutes and seconds.

Displaying images

ControlDescription
ImageDisplays a bitmap or vector image.
Path IconDraws a vector image using the current Foreground.
ControlDescription
MenuDisplays an application menu.
FlyoutsAttaches a popup or a context menu to a control.
Tool TipDisplays a tool tip when a control is hovered.