Share via

XAML Controls

  • Article

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

View Example

BoxView

Displays a rectangle of a particular color.

Screenshot of a BoxView

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

Ellipse

Displays an ellipse or circle.

Screenshot of an Ellipse

API / Guide		 
<Ellipse Fill="Red"
         WidthRequest="150"
         HeightRequest="50"
         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" />

Line

Display a line.

Screenshot of a Line

API / Guide		 
<Line X1="40"
      Y1="0"
      X2="0"
      Y2="120"
      Stroke="Red"
      HorizontalOptions="Center" />

Map

Displays a map.

Screenshot of a Map

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

Path

Display curves and complex shapes.

Screenshot of a Path

API / Guide		 
<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.9,16.2
            L32,16.2 32,31.9 13.9,30.1Z
            M0,16.2
            L11.9,16.2 11.9,29.9 0,28.6Z
            M11.9,2
            L11.9,14.2 0,14.2 0,3.3Z
            M32,0
            L32,14.2 13.9,14.2 13.9,1.8Z" />

Polygon

Display a polygon.

Screenshot of a Polygon

API / Guide		 
<Polygon Points="0 48, 0 144, 96 150, 100 0, 192 0, 192 96,
                 50 96, 48 192, 150 200 144 48"
         Fill="Blue"
         Stroke="Red"
         StrokeThickness="3"
         HorizontalOptions="Center" />

Polyline

Display a series of connected straight lines.

Screenshot of a Polyline

API / Guide		 
<Polyline Points="0,0 10,30, 15,0 18,60 23,30 35,30 40,0
                  43,60 48,30 100,30"
          Stroke="Red"
          HorizontalOptions="Center" />

Rectangle

Display a rectangle or square.

Screenshot of a Rectangle

API / Guide		 
<Rectangle Fill="Red"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Center" />

WebView

Displays Web pages or HTML content.

Screenshot of a WebView

API / Guide		 
<WebView Source="https://learn.microsoft.com/xamarin/"
         VerticalOptions="FillAndExpand" />

Views that initiate commands

View Example

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" />

RadioButton

Allows the selection of one option from a set.

Screenshot of a RadioButton

Guide		 
<RadioButton Text="Pineapple"
             CheckedChanged="OnRadioButtonCheckedChanged" />

RefreshView

Provides pull-to-refresh functionality for scrollable content.

Screenshot of a RefreshView

Guide		 
<RefreshView IsRefreshing="{Binding IsRefreshing}"
             Command="{Binding RefreshCommand}" >
    <!-- Scrollable control goes here -->
</RefreshView>

SearchBar

Accepts user input that it uses to perform a search.

Screenshot of a SearchBar

Guide		 
<SearchBar Placeholder="Enter search term"
           SearchButtonPressed="OnSearchBarButtonPressed" />

SwipeView

Provides context menu items that are revealed by a swipe gesture.

Screenshot of a SwipeView

Guide		 
<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

Views for setting values

View Example

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

View Example

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

View Example

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 / Guide		 
<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 / Guide		 
<ProgressBar Progress=".5"
             VerticalOptions="CenterAndExpand" />

Views that display collections

View Example

CarouselView

Displays a scrollable list of data items.

Screenshot of a CarouselView

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

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}"
                ItemsLayout="VerticalGrid, 2" />

IndicatorView

Displays indicators that represent the number of items in a CarouselView.

Screenshot of an IndicatorView

Guide		 
<IndicatorView x:Name="indicatorView"
               IndicatorColor="LightGray"
               SelectedIndicatorColor="DarkGray" />

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>