Xamarin.Forms Views

Xamarin.Forms views are the building blocks of cross-platform mobile user interfaces.

Views are user-interface objects such as labels, buttons, and sliders that are commonly known as controls or widgets in other graphical programming environments. The views supported by Xamarin.Forms all derive from the View class. They can be divided into several categories:

Views for presentation

Label

Label displays single-line text strings or multi-line blocks of text, either with constant or variable formatting. Set the Text property to a string for constant formatting, or set the FormattedText property to a FormattedString object for variable formatting.

API Documentation / Guide / Sample
Label Example
C# code for this page / XAML page

Image

Image displays a bitmap. Bitmaps can be downloaded over the Web, embedded as resources in the common project or platform projects, or created using a .NET Stream object.

API Documentation / Guide / Sample
Image Example
C# code for this page / XAML page

BoxView

BoxView displays a solid rectangle colored by the Color property. BoxView has a default size request of 40x40. For other sizes, assign the WidthRequest and HeightRequest properties.

API Documentation / Guide / Sample 1, 2, 3, 4, 5, and 6
BoxView Example
C# code for this page / XAML page

WebView

WebView displays Web pages or HTML content, based on whether the Source property is set to a UriWebViewSource or an HtmlWebViewSource object.

API Documentation / Guide / Sample 1 and 2
WebView Example
C# code for this page / XAML page

OpenGLView

OpenGLView displays OpenGL graphics in iOS and Android projects. There is no support for the Universal Windows Platform. The iOS and Android projects require a reference to the OpenTK-1.0 assembly or the OpenTK version 1.0.0.0 assembly. OpenGLView is easier to use in a Shared Project; if used in a PCL or .NET Standard library, then a Dependency Service will also be required (as shown in the sample code).

This is the only graphics facility that is built into Xamarin.Forms, but a Xamarin.Forms application can also render graphics using CocosSharp, SkiaSharp, or UrhoSharp.

API Documentation

OpenGLView Example
C# code for this page / XAML page with code-behind

Map

Map displays a map. The Xamarin.Forms.Maps Nuget package must be installed. Android and Universal Windows Platform require a map authorization key.

API Documentation / Guide / Sample
Map Example
C# code for this page / XAML page

Views that initiate commands

Button

Button is a rectangular object that displays text, and which fires a Clicked event when it's been pressed.

API Documentation
Button Example
C# code for this page / XAML page with code-behind
SearchBar displays an area for the user to type a text string, and a button (or a keyboard key) that signals the application to perform a search. The Text property provides access to the text, and the SearchButtonPressed event indicates that the button has been pressed.

API Documentation
SearchBar Example
C# code for this page / XAML page with code-behind

Views for setting values

Slider

Slider allows the user to select a double value from a continuous range specified with the Minimum and Maximum properties.

API Documentation / Guide / Sample
Slider Example
C# code for this page / XAML page

Stepper

Stepper allows the user to select a double value from a range of incremental values specified with the Minimum, Maximum, and Increment properties.

API Documentation
Stepper Example
C# code for this page / XAML page

Switch

Switch takes the form of an on/off switch to allow the user to select a Boolean value. The IsToggled property is the state of the switch, and the Toggled event is fired when the state changes.

API Documentation
Switch Example
C# code for this page / XAML page

DatePicker

DatePicker allows the user to select a date with the platform date picker. Set a range of allowable dates with the MinimumDate and MaximumDate properties. The Date property is the selected date, and the DateSelected event is fired when that property changes.

API Documentation / Guide / Sample
DatePicker Example
C# code for this page / XAML page

TimePicker

TimePicker allows the user to select a time with the platform time picker. The Time property is the selected time. An application can monitor changes in the Time property by installing a handler for the PropertyChanged event.

API Documentation
TimePicker Example
C# code for this page / XAML page

Views for editing text

These two classes derive from the InputView class, which defines the Keyboard property.

Entry

Entry allows the user to enter and edit a single line of text. The text is available as the Text property, and the TextChanged and Completed events are fired when the text changes or the user signals completion by tapping the enter key.

Use an Editor for entering and editing multiple lines of text.

API Documentation / Guide / Sample
Entry Example
C# code for this page / XAML page

Editor

Editor allows the user to enter and edit multiple lines of text. The text is available as the Text property, and the TextChanged and Completed events are fired when the text changes or the user signals completion.

Use an Entry view for entering and editing a single line of text.

API Documentation / Guide / Sample
Entry Example
C# code for this page / XAML page

Views to indicate activity

ActivityIndicator

ActivityIndicator uses an animation to show that the application is engaged in a lengthy activity without giving any indication of progress. The IsRunning property controls the animation.

If the activity's progress is known, use a ProgressBar instead.

API Documentation
ActivityIndicator Example
C# code for this page / XAML page

ProgressBar

ProgressBar uses an animation to show that the application is progressing through a lengthy activity. Set the Progress property to values between 0 and 1 to indicate the progress.

If the activity's progress is not known, use an ActivityIndicator instead.

API Documentation
ProgressBar Example
C# code for this page / XAML page with code-behind

Views that display collections

Picker

Picker displays a selected item from a list of text strings, and allows selecting that item when the view is tapped. Set the Items property to a list of strings, or the ItemsSource property to a collection of objects. The SelectedIndexChanged event is fired when an item is selected.

The Picker displays the list of items only when it's selected. Use a ListView or TableView for a scrollable list that remains on the page.

API Documentation / Guide / Sample
Picker Example
C# code for this page / XAML page with code-behind

ListView

ListView derives from ItemsView[Cell] and displays a scrollable list of selectable data items. Set the ItemsSource property to a collection of objects, and set the ItemTemplate property to a DataTemplate object describing how the items are to be formatted. The ItemSelected event signals that a selection has been made, which is available as the SelectedItem property.

API Documentation / Guide / Sample
ListView Example
C# code for this page / XAML page

TableView

TableView displays a list of rows of type Cell with optional headers and subheaders. Set the Root property to an object of type TableRoot, and add TableSection objects to that TableRoot. Each TableSection is a collection of Cell objects.

API Documentation / Guide / Sample
TableView Example
C# code for this page / XAML page