Controles XAML

Download SampleDescargar el ejemplo

Las vistas son objetos de interfaz de usuario, como etiquetas, botones y controles deslizantes que se conocen normalmente como controles o widgets en otros entornos de programación gráfica. Las vistas que Xamarin.Forms admite derivan todas de la clase View.

Se puede hacer referencia a todas las vistas definidas en Xamarin.Forms desde archivos XAML.

Vistas para presentación

Ver Ejemplo

BoxView

Muestra un rectángulo de un color determinado.

Screenshot of a BoxView

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

Elipse

Muestra una elipse o un círculo.

Screenshot of an Ellipse

API / Guía
<Ellipse Fill="Red"
WidthRequest="150"
HeightRequest="50"
HorizontalOptions="Center" />

Imagen

Muestra un mapa de bits.

Screenshot of an Image

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

Etiqueta

Muestra una o varias líneas de texto.

Screenshot of a Label

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

Línea

Muestra una línea.

Screenshot of a Line

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

Asignar

Muestra un mapa.

Screenshot of a Map

API / Guía
<maps:Map ItemsSource="{Binding Locations}" />

Path

Muestra curvas y formas complejas.

Screenshot of a Path

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

Polígono

Muestra un polígono.

Screenshot of a Polygon

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

Polilínea

Muestra una serie de líneas rectas conectadas.

Screenshot of a Polyline

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

Rectángulo

Muestra un rectángulo o un cuadrado.

Screenshot of a Rectangle

API / Guía
<Rectangle Fill="Red"
WidthRequest="150"
HeightRequest="50"
HorizontalOptions="Center" />

WebView

Muestra páginas web o contenido HTML.

Screenshot of a WebView

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

Vistas que inician comandos

Ver Ejemplo

Button

Muestra texto en un objeto rectangular.

Screenshot of a Button

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

ImageButton

Muestra una imagen en un objeto rectangular.

Screenshot of an ImageButton

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

RadioButton

Permite la selección de una opción de un conjunto.

Screenshot of a RadioButton

Guía
<RadioButton Text="Pineapple"
CheckedChanged="OnRadioButtonCheckedChanged" />

RefreshView

Proporciona la funcionalidad "deslizar para actualizar" para el contenido desplazable.

Screenshot of a RefreshView

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

Barra de búsqueda

Acepta la entrada del usuario que usa para realizar una búsqueda.

Screenshot of a SearchBar

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

SwipeView

Proporciona elementos de menú contextual que aparecen mediante un gesto de deslizar rápidamente.

Screenshot of a SwipeView

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

Vistas para establecer valores

Ver Ejemplo

CheckBox

Permite la selección de un valor boolean.

Screenshot of a CheckBox

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

Control deslizante

Permite la selección de un valor double de un intervalo continuo.

Screenshot of a Slider

API / Guía
<Slider Minimum="0"
Maximum="100"
VerticalOptions="CenterAndExpand" />

Control de incremento

Permite la selección de un valor double de un intervalo incremental.Screenshot of a Stepper

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

Switch

Permite la selección de un valor boolean.

Screenshot of a Switch

API / Guía
<Switch IsToggled="false"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />

DatePicker

Permite la selección de una fecha.

Screenshot of a DatePicker

API / Guía
<DatePicker Format="D"
VerticalOptions="CenterAndExpand" />

TimePicker

Permite la selección de una hora.

Screenshot of a TimePicker

API / Guía
<TimePicker Format="T"
VerticalOptions="CenterAndExpand" />

Vistas para editar texto

Ver Ejemplo

Entrada

Permite que se escriba una única línea de texto y que se edite.

Screenshot of an Entry

API / Guía
<
<Entry Keyboard="Email"
Placeholder="Enter email address"
VerticalOptions="CenterAndExpand" />

Editor

Permite escribir y editar varias líneas de texto.

Screenshot of an Editor

API / Guía
<Editor VerticalOptions="FillAndExpand" />

Vistas para indicar actividad

Ver Ejemplo

ActivityIndicator

Muestra una animación para mostrar que la aplicación se dedica a una actividad prolongada, sin dar ninguna indicación de progreso.

Screenshot of an ActivityIndicator

API / Guía
<ActivityIndicator IsRunning="True"
VerticalOptions="CenterAndExpand" />

ProgressBar

Muestra una animación para mostrar que la aplicación está progresando durante una actividad larga.

Screenshot of a ProgressBar

API / Guía
<ProgressBar Progress=".5"
VerticalOptions="CenterAndExpand" />

Vistas que muestran colecciones

Ver Ejemplo

CarouselView

Muestra una lista desplazable de elementos de datos.

Screenshot of a CarouselView

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

CollectionView

Muestra una lista desplazable de elementos de datos seleccionables que usan diferentes especificaciones de diseño.

Screenshot of a CollectionView

Guía
<CollectionView ItemsSource="{Binding Monkeys}">
ItemTemplate="{StaticResource MonkeyTemplate}"
ItemsLayout="VerticalGrid, 2" />

IndicatorView

Muestra indicadores que representan el número de elementos de una CarouselView.

Screenshot of an IndicatorView

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

ListView

Muestra una lista desplazable de elementos de datos seleccionables.

Screenshot of a ListView

API / Guía
<ListView ItemsSource="{Binding Monkeys}">
ItemTemplate="{StaticResource MonkeyTemplate}" />

Selector

Muestra un elemento de selección de una lista de cadenas de texto.

Screenshot of a Picker

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

Muestra una lista de filas interactivas.

Screenshot of a TableView

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