Controles XAMLXAML Controls

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

Las vistas son objetos de la interfaz de usuario, como etiquetas, botones y controles deslizantes que normalmente se conocen como controles o widgets en otros entornos de programación gráficos.Views are user-interface objects such as labels, buttons, and sliders that are commonly known as controls or widgets in other graphical programming environments. Las vistas admitidas por Xamarin.Forms todas derivan de la View clase.The views supported by Xamarin.Forms all derive from the View class.

A todas las vistas que se definen en se Xamarin.Forms puede hacer referencia desde archivos XAML.All of the views that are defined in Xamarin.Forms can be referenced from XAML files.

Vistas para presentaciónViews for presentation

BoxViewBoxView

Muestra un rectángulo de un color determinado.Displays a rectangle of a particular color.

Captura de pantalla de un BoxViewScreenshot of a BoxView

API / de Guía deAPI / Guide
<BoxView Color="Accent"
WidthRequest="150"
HeightRequest="150"
HorizontalOptions="Center">

ExpanderExpander

Proporciona un contenedor expansible para hospedar cualquier contenido.Provides an expandable container to host any content.

Captura de pantalla de un expansorScreenshot of an Expander

GuíeGuide
<Expander>
<Expander.Header>
<Label Text="Baboon" />
</Expander.Header>
<Image Source="Baboon.png"
Aspect="AspectFill" />
</Expander>

ImagenImage

Muestra un mapa de bits.Displays a bitmap.

Captura de pantalla de una imagenScreenshot of an Image

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

EtiquetaLabel

Muestra una o varias líneas de texto.Displays one or more lines of text.

Captura de pantalla de una etiquetaScreenshot of a Label

API / de Guía deAPI / Guide

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

MapaMap

Muestra un mapa.Displays a map.

Captura de pantalla de un mapaScreenshot of a Map

API / de Guía deAPI / Guide

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

MediaElementMediaElement

Reproducir vídeo o audio.Play video or audio.

Captura de pantalla de un MediaElementScreenshot of a MediaElement

API / de Guía deAPI / Guide

<MediaElement Source="https://sec.ch9.ms/ch9/XamarinShow_mid.mp4"
AutoPlay="True"
ShowsPlaybackControls="True" />

WebViewWebView

Muestra páginas web o contenido HTML.Displays Web pages or HTML content.

Captura de pantalla de un WebViewScreenshot of a WebView

API / de Guía deAPI / Guide

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

Vistas que inician comandosViews that initiate commands

BotónButton

Muestra texto en un objeto rectangular.Displays text in a rectangular object.

Captura de pantalla de un botónScreenshot of a Button

API / de Guía deAPI / Guide

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

ImageButtonImageButton

Muestra una imagen en un objeto rectangular.Displays an image in a rectangular object.

Captura de pantalla de un ImageButtonScreenshot of an ImageButton

API / de Guía deAPI / Guide

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

RadioButtonRadioButton

Permite la selección de una opción de un conjunto.Allows the selection of one option from a set.

Captura de pantalla de un RadioButtonScreenshot of a RadioButton

GuíeGuide

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

RefreshViewRefreshView

Proporciona funcionalidad de extracción a actualización para el contenido desplazable.Provides pull-to-refresh functionality for scrollable content.

Captura de pantalla de un RefreshViewScreenshot of a RefreshView

GuíeGuide

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

Barra de búsquedaSearchBar

Acepta los datos proporcionados por el usuario que usa para realizar una búsqueda.Accepts user input that it uses to perform a search.

Captura de pantalla de un barraScreenshot of a SearchBar

GuíeGuide

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

SwipeViewSwipeView

Proporciona elementos de menú contextual que se revelan mediante un gesto de deslizar rápidamente.Provides context menu items that are revealed by a swipe gesture.

Captura de pantalla de un SwipeViewScreenshot of a SwipeView

GuíeGuide

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

Vistas para establecer valoresViews for setting values

CheckBoxCheckBox

Permite la selección de un boolean valor.Allows the selection of a boolean value.

Captura de pantalla de una casillaScreenshot of a CheckBox

GuíeGuide

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

Control deslizanteSlider

Permite la selección de un double valor de un intervalo continuo.Allows the selection of a double value from a continuous range.

Captura de pantalla de un control deslizanteScreenshot of a Slider

API / de Guía deAPI / Guide

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

Control de incrementoStepper

Permite la selección de un double valor de un intervalo incremental.Allows the selection of a double value from an incremental range.

Captura de pantalla de un stepperScreenshot of a Stepper

API / de Guía deAPI / Guide

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

ModificadorSwitch

Permite la selección de un boolean valor.Allows the selection of a boolean value.

Captura de pantalla de un conmutadorScreenshot of a Switch

API / de Guía deAPI / Guide

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

DatePickerDatePicker

Permite seleccionar una fecha.Allows the selection of a date.

Captura de pantalla de un DatePickerScreenshot of a DatePicker

API / de Guía deAPI / Guide

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

TimePickerTimePicker

Permite la selección de una vez.Allows the selection of a time.

Captura de pantalla de un TimePickerScreenshot of a TimePicker

API / de Guía deAPI / Guide

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

Vistas para editar textoViews for editing text

EntradaEntry

Permite escribir y editar una sola línea de texto.Allows a single line of text to be entered and edited.

Captura de pantalla de una entradaScreenshot of an Entry

API / de Guía deAPI / Guide

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

EditorEditor

Permite escribir y editar varias líneas de texto.Allows multiple lines of text to be entered and edited.

Captura de pantalla de un editorScreenshot of an Editor

API / de Guía deAPI / Guide

<Editor VerticalOptions="FillAndExpand" />

Vistas para indicar actividadViews to indicate activity

ActivityIndicatorActivityIndicator

Muestra una animación para mostrar que la aplicación está ocupada en una actividad prolongada, sin indicar ningún progreso.Displays an animation to show that the application is engaged in a lengthy activity, without giving any indication of progress.

Captura de pantalla de un ActivityIndicatorScreenshot of an ActivityIndicator

API / de Guía deAPI / Guide

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

ProgressBarProgressBar

Muestra una animación para mostrar que la aplicación progresa a través de una actividad prolongada.Displays an animation to show that the application is progressing through a lengthy activity.

Captura de pantalla de un ProgressBarScreenshot of a ProgressBar

API / de Guía deAPI / Guide

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

Vistas que muestran coleccionesViews that display collections

CarouselViewCarouselView

Muestra una lista desplazable de elementos de datos.Displays a scrollable list of data items.

Captura de pantalla de un CarouselViewScreenshot of a CarouselView

GuíeGuide

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

CollectionViewCollectionView

Muestra una lista desplazable de elementos de datos seleccionables, con distintas especificaciones de diseño.Displays a scrollable list of selectable data items, using different layout specifications.

Captura de pantalla de una CollectionViewScreenshot of a CollectionView

GuíeGuide

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

IndicatorViewIndicatorView

Muestra indicadores que representan el número de elementos de un CarouselView .Displays indicators that represent the number of items in a CarouselView.

Captura de pantalla de un IndicatorViewScreenshot of an IndicatorView

GuíeGuide

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

ListViewListView

Muestra una lista desplazable de elementos de datos seleccionables.Displays a scrollable list of selectable data items.

Captura de pantalla de un control ListViewScreenshot of a ListView

API / de Guía deAPI / Guide

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

SelectorPicker

Muestra un elemento seleccionado en una lista de cadenas de texto.Displays a select item from a list of text strings.

Captura de pantalla de un selectorScreenshot of a Picker

API / de Guía deAPI / 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>

TableViewTableView

Muestra una lista de filas interactivas.Displays a list of interactive rows.

Captura de pantalla de un TableViewScreenshot of a TableView

API / de Guía deAPI / Guide

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