Skip to content

Controls

The Collections group holds the controls that take data. A view (ListView, TileView, TreeView, TableView) is given .items and an .item template and adds selection and scrolling, ForEach turns a collection into plain children, and the item layouts arrange them. Controls that arrange children you write yourself are under Layout.

Page
CalendarDatePicker A field that shows a date and opens a CalendarView under itself to pick one.
CalendarView A month calendar: the days of one month in a grid of weeks, with the month's name above them and buttons to page through months.
DatePicker A field that shows a date in its parts (day, month and year, in the order the locale writes them) and opens a flyout of three spinning columns to pick one.
TimePicker A field that shows a time of day in its parts (hour, minute and, on a 12-hour clock, AM or PM) and opens a flyout of spinning columns to pick one.

Basic Input

Page
Button A push button, clicked by mouse (press and release inside), Enter/Space while focused, or UI Automation's Invoke.
CheckBox A box that is checked, unchecked or indeterminate, with an optional label to its right.
ColorPicker A hue/saturation/value/alpha color editor with channel, alpha and hex text entry and a preview swatch.
ComboBox A combo box: a closed box showing one item of a list of strings, and a chevron that opens the list as a popup floating above the rest of the tree, so opening it never reflows the layout.
DropdownButton A Button with a trailing chevron that says a click opens a menu or flyout.
RadioButton A round option button with a label, one of a set of mutually exclusive choices.
RadioButtons A headed group of mutually exclusive string options, as one element.
Rating A row of stars the user rates with a click, a drag or the keyboard.
Slider A thumb dragged along a track to pick a value in [min(), max()].
SplitButton A button with a second, chevron part that opens a flyout.
ToggleButton A Button that stays pressed, with a nullable checked state.
ToggleSwitch A boolean on/off switch: a pill-shaped track with a sliding thumb, an optional header above it and a label beside it that follows the state.

Text

Page
AutoSuggestBox A text box with a floating list of suggestions the app supplies as the user types, for search boxes and type-ahead pickers.
NumberBox A text box for a number, validated and formatted when committed.
PasswordBox A single-line field that masks what is typed into it.
RichEditBox An editable, formatted document that looks like a TextBox.
RichText Read-only paragraphs of formatted inlines, wrapping by default, selectable, with links and highlighters.
Text A non-interactive run of text, the label of every form.
TextBox Single- or multi-line editable text.

Collections

Page
ForEach A repeater: a collection laid out by an attachable Layout that realizes only the items in view.
Item Layouts The base of every attachable layout.
ListView A vertical, virtualized, selectable list of templated items.
ListViewBase The shared base of ListView and TileView: a scrolling, virtualized, selectable collection of templated items.
TableView A table: a header strip over virtualized rows, with sorting, resizable columns, frozen leading and trailing columns, four selection modes, cell templates, cell editing and collapsible groups.
TileView Templated items in wrapping rows of equal cells, virtualized and selectable.
TreeView A hierarchy of expandable rows, with single or multiple (check box) selection, templated rows, and rearranging by drag and drop.
VirtualList A list that scrolls itself and creates Elements only for the rows in view.
Page
Breadcrumb A navigation trail (Home > Folder > File) of plain text items, root first.
Carousel Shows one item at a time, filling the whole view, and flips between them with previous/next buttons, the mouse wheel or the keyboard.
NavigationFrame A page host with a back and forward stack: shows one page at a time, built by a PageFactory on each navigation, and animates between pages with a NavigationTransition.
NavigationShell A navigation view: a pane of navigation items (left, compact, minimal or a top bar) beside a content area that shows the selected item's page.
Pager A pager: First / Previous buttons, a page selector ("Page [n] of N" in a NumberBox or drop-down, or a row of page buttons), and Next / Last buttons.
PipsPager A strip of small dots, one per page, for paging through a large item set such as a Carousel's pictures.
Sections A row of large text headers over the selected item's content.
SelectorBar A row of text segments, each with an optional icon.
Tabs A strip of tabs over the selected tab's content.
Page
AppBarButton A command-bar button: an icon over a small label that changes shape with where it sits.
CommandBar A toolbar of app-bar buttons with an overflow menu behind a More ("...") button.
CommandBarFlyout The mini-toolbar of an in-app object: a small row of icon-only commands in a flyout, with a menu of more commands under it behind a "More" button.
ContextMenu A child with a context menu.
MenuBar A horizontal menu bar: a row of headers, each dropping down a cascading MenuFlyout-style menu that floats in the overlay layer under the header's left edge.
MenuFlyout A list of commands in a popup: hung from an anchor element (a click on a Button anchor toggles it) or opened at a point with show_at() for a context menu.

Dialogs and Flyouts

Page
Dialog A modal dialog over the whole window, with a title, arbitrary content and up to three buttons.
Flyout Arbitrary content floating in a popup next to an owned anchor.
Popup Floats one child above the tree, at an offset from where the Popup sits.
TeachingTip A card that points at a control (or sits against the window) to teach something about it.
ToolTip Hover text for an element, opened after the pointer rests on the anchor and closed when the pointer leaves or clicks.

Status and Info

Page
InfoBadge A small non-interactive badge showing a number, an icon or a plain dot, typically over a navigation item or a button to flag new or pending items.
InfoBar An inline, closable banner that shows an app-wide status message with a severity color and icon.
ProgressBar A thin horizontal bar showing determinate progress, or an endless sweep while the duration is unknown.
ProgressRing Circular progress, by default an indeterminate spinner.

Media and Icons

Page
AnimatedIcon An icon that animates between named visual states by playing segments of an AnimatedIconSource.
AnimatedVisualPlayer Plays a caller-supplied AnimatedVisualSource by advancing its progress over time and drawing each frame with the source's render_frame().
Icon A non-interactive icon: a symbol, a font glyph, a path, a bitmap or a picture.
Image Shows an ImageSource (a still picture, an animated GIF or an SVG document) stretched into the space layout gives it.
InkCanvas A surface the user draws ink on with the pointer.
InkToolbar A row of ink tools bound to a ui::InkCanvasControl.
PersonPicture A circular avatar showing a photo, initials or a placeholder glyph, with an optional badge.
Shapes The base of the shapes.

Windowing and Hosting

Page
DragArea A wrapper whose content the window can be dragged by.
Match A node that owns exactly one child and can replace it at runtime.
NativeControl An Element that hosts a real platform child window (an HWND on Windows) of any window class, the escape hatch for OS controls the framework does not draw itself.
TitleBar A chrome row with an icon, title and subtitle, optional back and pane-toggle (hamburger) buttons, and three content slots (left header, content, right header).