XAML Controls

Download Sample Download the sample

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.

All of the views that are defined in Xamarin.Forms can be referenced from XAML files.

Views for presentation

BoxView

Displays a rectangle of a particular color.

Screenshot of a BoxView

API / Guide
<BoxView Color="Accent"
WidthRequest="150"
HeightRequest="150"
HorizontalOptions="Center">

Image

Displays a bitmap.

Screenshot of an Image

API / Guide
<Image Source="https://aka.ms/campus.jpg"
Aspect="AspectFit"
HorizontalOptions="Center" />

Label

Displays one or more lines of text.

Screenshot of a Label

API / Guide

<Label Text="Hello, Xamarin.Forms!"
FontSize="Large"
FontAttributes="Italic"
HorizontalTextAlignment="Center" />

Map

Displays a map.

Screenshot of a Map

API / Guide

<maps:Map ItemsSource="{Binding Locations}" />

WebView

Displays Web pages or HTML content.

Screenshot of a WebView

API / Guide

<WebView Source="https://docs.microsoft.com/xamarin/"
VerticalOptions="FillAndExpand" />

Views that initiate commands

Button

Displays text in a rectangular object.

Screenshot of a Button

API / Guide

<Button Text="Click Me!"
Font="Large"
BorderWidth="1"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
Clicked="OnButtonClicked" />

ImageButton

Displays an image in a rectangular object.

Screenshot of an ImageButton

API / Guide

<ImageButton Source="XamarinLogo.png"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand"
Clicked="OnImageButtonClicked" />

SearchBar

Displays a search bar, for performing a search.

Screenshot of a SearchBar

API

<SearchBar Placeholder="Xamarin.Forms Property"
SearchButtonPressed="OnSearchBarButtonPressed" />

Views for setting values

CheckBox

Allows the selection of a boolean value.

Screenshot of a CheckBox

Guide

<CheckBox IsChecked="true"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />

Slider

Allows the selection of a double value from a continuous range.

Screenshot of a Slider

API / Guide

<Slider Minimum="0"
Maximum="100"
VerticalOptions="CenterAndExpand" />

Stepper

Allows the selection of a double value from an incremental range.

Screenshot of a Stepper

API / Guide

<Stepper Minimum="0"
Maximum="10"
Increment="0.1"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />

Switch

Allows the selection of a boolean value.

Screenshot of a Switch

API / Guide

<Switch IsToggled="false"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />

DatePicker

Allows the selection of a date.

Screenshot of a DatePicker

API / Guide

<DatePicker Format="D"
VerticalOptions="CenterAndExpand" />

TimePicker

Allows the selection of a time.

Screenshot of a TimePicker

API / Guide

<TimePicker Format="T"
VerticalOptions="CenterAndExpand" />

Views for editing text

Entry

Allows a single line of text to be entered and edited.

Screenshot of an Entry

API / Guide

<Entry Keyboard="Email"
Placeholder="Enter email address"
VerticalOptions="CenterAndExpand" />

Editor

Allows multiple lines of text to be entered and edited.

Screenshot of an Editor

API / Guide

<Editor VerticalOptions="FillAndExpand" />

Views to indicate activity

ActivityIndicator

Displays an animation to show that the application is engaged in a lengthy activity, without giving any indication of progress.

Screenshot of an ActivityIndicator

API

<ActivityIndicator IsRunning="True"
VerticalOptions="CenterAndExpand" />

ProgressBar

Displays an animation to show that the application is progressing through a lengthy activity.

Screenshot of a ProgressBar

API

<ProgressBar Progress=".5"
VerticalOptions="CenterAndExpand" />

Views that display collections

CollectionView

Displays a scrollable list of selectable data items, using different layout specifications.

Screenshot of a CollectionView

Guide

<CollectionView ItemsSource="{Binding Monkeys}">
ItemTemplate="{StaticResource MonkeyTemplate}"
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
</CollectionView/>

ListView

Displays a scrollable list of selectable data items.

Screenshot of a ListView

API / Guide

<ListView ItemsSource="{Binding Monkeys}">
ItemTemplate="{StaticResource MonkeyTemplate}" />

Picker

Displays a select item from a list of text strings.

Screenshot of a Picker

API / Guide

<Picker Title="Select a monkey"
TitleColor="Red">
<Picker.ItemsSource<
<x:Array Type="{x:Type x:String}">
<x:String>Baboon</x:String>
<x:String>Capuchin Monkey</x:String>
<x:String>Blue Monkey</x:String>
<x:String>Squirrel Monkey</x:String>
<x:String>Golden Lion Tamarin</x:String>
<x:String>Howler Monkey</x:String>
<x:String>Japanese Macaque</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>

TableView

Displays a list of interactive rows.

Screenshot of a TableView

API / Guide

<TableView Intent="Settings">
<TableRoot>
<TableSection Title="Ring">
<SwitchCell Text="New Voice Mail" />
<SwitchCell Text="New Mail" On="true" />
</TableSection>
</TableRoot>
</TableView>