Edit

Share via

Controls

  • Article

Browse sample. Browse the sample

The user interface of a .NET Multi-platform App UI (.NET MAUI) app is constructed of objects that map to the native controls of each target platform.

The main control groups used to create the user interface of a .NET MAUI app are pages, layouts, and views. A .NET MAUI page generally occupies the full screen or window. The page usually contains a layout, which contains views and possibly other layouts. Pages, layouts, and views derive from the VisualElement class. This class provides a variety of properties, methods, and events that are useful in derived classes.

Note

ListView and TableView also support the use of cells. Cells are specialized elements used for items in a table, that describe how each item should be rendered.

Pages

.NET MAUI apps consist of one or more pages. A page usually occupies all of the screen, or window, and each page typically contains at least one layout.

.NET MAUI contains the following pages:

Page Description
ContentPage ContentPage displays a single view, and is the most common page type. For more information, see ContentPage.
FlyoutPage FlyoutPage is a page that manages two related pages of information – a flyout page that presents items, and a detail page that presents details about items on the flyout page. For more information, see FlyoutPage.
NavigationPage NavigationPage provides a hierarchical navigation experience where you're able to navigate through pages, forwards and backwards, as desired. For more information, see NavigationPage.
TabbedPage TabbedPage consists of a series of pages that are navigable by tabs across the top or bottom of the page, with each tab loading the page content. For more information, see TabbedPage.

Layouts

.NET MAUI layouts are used to compose user-interface controls into visual structures, and each layout typically contains multiple views. Layout classes typically contain logic to set the position and size of child elements.

.NET MAUI contains the following layouts:

Layout Description
AbsoluteLayout AbsoluteLayout positions child elements at specific locations relative to its parent. For more information, see AbsoluteLayout.
BindableLayout BindableLayout enables any layout class to generate its content by binding to a collection of items, with the option to set the appearance of each item. For more information, see BindableLayout.
FlexLayout FlexLayout enables its children to be stacked or wrapped with different alignment and orientation options. FlexLayout is based on the CSS Flexible Box Layout Module, known as flex layout or flex-box. For more information, see FlexLayout.
Grid Grid positions its child elements in a grid of rows and columns. For more information, see Grid.
HorizontalStackLayout HorizontalStackLayout positions child elements in a horizontal stack. For more information, see HorizontalStackLayout.
StackLayout StackLayout positions child elements in either a vertical or horizontal stack. For more information, see StackLayout.
VerticalStackLayout VerticalStackLayout positions child elements in a vertical stack. For more information, see VerticalStackLayout.

Views

.NET MAUI views are the UI objects such as labels, buttons, and sliders that are commonly known as controls or widgets in other environments.

.NET MAUI contains the following views:

View Description
ActivityIndicator ActivityIndicator uses an animation to show that the app is engaged in a lengthy activity, without giving any indication of progress. For more information, see ActivityIndicator.
BlazorWebView BlazorWebView enables you to host a Blazor web app in your .NET MAUI app. For more information, see BlazorWebView.
Border Border is a container control that draws a border, background, or both, around another control. For more information, see Border.
BoxView BoxView draws a rectangle or square, of a specified width, height, and color. For more information, see BoxView.
Button Button displays text and responds to a tap or click that directs an app to carry out a task. For more information, see Button.
CarouselView CarouselView displays a scrollable list of data items, where users swipe to move through the collection. For more information, see CarouselView.
CheckBox CheckBox enables you to select a boolean value using a type of button that can either be checked or empty. For more information, see CheckBox.
CollectionView CollectionView displays a scrollable list of selectable data items, using different layout specifications. For more information, see CollectionView.
ContentView ContentView is a control that enables the creation of custom, reusable controls. For more information, see ContentView.
DatePicker DatePicker enables you to select a date with the platform date picker. For more information, see DatePicker.
Editor Editor enables you to enter and edit multiple lines of text. For more information, see Editor.
Ellipse Ellipse displays an ellipse or circle. For more information, see Ellipse.
Entry Entry enables you to enter and edit a single line of text. For more information, see Entry.
Frame Frame is used to wrap a view or layout with a border that can be configured with color, shadow, and other options. For more information, see Frame.
GraphicsView GraphicsView is a graphics canvas on which 2D graphics can be drawn using types from the Microsoft.Maui.Graphics namespace. For more information, see GraphicsView.
Image Image displays an image that can be loaded from a local file, a URI, an embedded resource, or a stream. For more information, see Image.
ImageButton ImageButton displays an image and responds to a tap or click that direct an app to carry out a task. For more information, see ImageButton.
IndicatorView IndicatorView displays indicators that represent the number of items in a CarouselView. For more information, see IndicatorView.
Label Label displays single-line and multi-line text. For more information, see Label.
Line Line displays a line from a start point to an end point. For more information, see Line.
ListView ListView displays a scrollable list of selectable data items. For more information, see ListView.
Map Map displays a map, and requires the Microsoft.Maui.Controls.Maps NuGet package to be installed in your app.
Path Path display curves and complex shapes. For more information, see Path.
Picker Picker displays a short list of items, from which an item can be selected. For more information, see Picker.
Polygon Polygon displays a polygon. For more information, see Polygon.
Polyline Polyline displays a series of connected straight lines. For more information, see Polyline.
ProgressBar ProgressBar uses an animation to show that the app is progressing through a lengthy activity. For more information, see ProgressBar.
RadioButton RadioButton is a type of button that allows the selection of one option from a set. For more information, see RadioButton.
Rectangle Rectangle displays a rectangle or square. For more information, see Rectangle.
RefreshView RefreshView is a container control that provides pull-to-refresh functionality for scrollable content. For more information, see RefreshView.
RoundRectangle RoundRectangle displays a rectangle or square with rounded corners. For more information, see Rectangle.
ScrollView ScrollView provides scrolling of its content, which is typically a layout. For more information, see ScrollView.
SearchBar SearchBar is a user input control used to initiate a search. For more information, see SearchBar.
Slider Slider enables you to select a double value from a continuous range. For more information, see Slider.
Stepper Stepper enables you to select a double value from a range of incremental values. For more information, see Stepper.
SwipeView SwipeView is a container control that wraps around an item of content, and provides context menu items that are revealed by a swipe gesture. For more information, see SwipeView.
Switch Switch enables you to select a boolean value using a type of button that can either be on or off. For more information, see Switch.
TableView TableView displays a table of scrollable items that can be grouped into sections. For more information, see TableView.
TimePicker TimePicker enables you to select a time with the platform time picker. For more information, see TimePicker.
TwoPaneView TwoPaneView represents a container with two views that size and position their content in the available space, either side-by-side or top-to-bottom. For more information, see TwoPaneView.
WebView WebView displays web pages or local HTML content. For more information, see WebView.