Controles de XAML

1. Vistas que inician comandos

2. Vistas para establecer valores
3. Vistas para editar texto
4. Vistas para indicar actividad
5. Vistas que muestran colecciones
6. Vínculos relacionados
7. Vistas para presentación

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. Las vistas admitidas por
Xamarin.Forms todas derivan de la clase View.

A todas las vistas que se definen en se Xamarin.Forms se puede hacer referencia

desde archivos XAML.

Vistas para presentación

VIS TAS PARA PRES ENTA CIÓ N
Ver Ejemplo
<BoxView Color="Accent"
WidthRequest="150"
BoxView HeightRequest="150"
HorizontalOptions="Center">
Muestra un rectángulo de un color determinado.

<Ellipse Fill="Red"
WidthRequest="150"
Ellipse HeightRequest="50"
HorizontalOptions="Center" />
Muestra una elipse o un círculo.
 VIS TAS PARA PRES ENTA CIÓ N
Ver Ejemplo

<Expander>
<Expander.Header>
Expander <Label Text="Baboon" />
</Expander.Header>
Proporciona un contenedor expansible para <Image Source="Baboon.png"
hospedar cualquier contenido.
Aspect="AspectFill" />
</Expander>

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

Muestra un mapa de bits.

<Label Text="Hello, Xamarin.Forms!"

FontSize="Large"
Etiqueta FontAttributes="Italic"
HorizontalTextAlignment="Center"
Muestra una o varias líneas de texto. />
 VIS TAS PARA PRES ENTA CIÓ N
Ver Ejemplo

<Line X1="40"
Y1="0"
Línea X2="0"
Y2="120"
Mostrar una línea. Stroke="Red"
HorizontalOptions="Center" />

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

Muestra un mapa.

<MediaElement
Source="https://sec.ch9.ms/ch9/XamarinSho
MediaElement w_mid.mp4"
AutoPlay="True"
Reproducir vídeo o audio.
ShowsPlaybackControls="True" />
 VIS TAS PARA PRES ENTA CIÓ N
Ver Ejemplo
<Path Stroke="Black"
Aspect="Uniform"
Path HorizontalOptions="Center"
HeightRequest="100"
Mostrar curvas y formas complejas. 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 Points="0 48, 0 144, 96 150, 100
0, 192 0, 192 96,
Polygon 50 96, 48 192, 150 200
144 48"
Muestra un polígono. Fill="Blue"
Stroke="Red"
StrokeThickness="3"
HorizontalOptions="Center" />

<Polyline Points="0,0 10,30, 15,0 18,60

23,30 35,30 40,0
Polilínea 43,60 48,30 100,30"
Stroke="Red"
Muestra una serie de líneas rectas conectadas. HorizontalOptions="Center" />
 VIS TAS PARA PRES ENTA CIÓ N
Ver Ejemplo
<Rectangle Fill="Red"
WidthRequest="150"
Rectángulo HeightRequest="50"
HorizontalOptions="Center" />
Mostrar un rectángulo o un cuadrado.

<WebView
Source="https://docs.microsoft.com/xamari
WebView n/"
VerticalOptions="FillAndExpand"
Muestra páginas web o contenido HTML. />

Vistas que inician comandos

VIS TAS QUE INICIAN COMANDOS
Ver Ejemplo
<Button Text="Click Me!"
Font="Large"
Botón BorderWidth="1"
HorizontalOptions="Center"
Muestra texto en un objeto rectangular. VerticalOptions="CenterAndExpand"
Clicked="OnButtonClicked" />
 VIS TAS QUE INICIAN COMANDOS
Ver Ejemplo
<ImageButton Source="XamarinLogo.png"
HorizontalOptions="Center"
ImageButton VerticalOptions="CenterAndExpand"
Clicked="OnImageButtonClicked" />
Muestra una imagen en un objeto.

<RadioButton Text="Pineapple"

RadioButton CheckedChanged="OnRadioButtonCheckedChanged"

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

conjunto.

Guía
<RefreshView IsRefreshing="{Binding
IsRefreshing}"
RefreshView Command="{Binding
RefreshCommand}" >
Proporciona funcionalidad de extracción a <!-- Scrollable control goes here -->
actualización para el contenido desplazable.
</RefreshView>
 VIS TAS QUE INICIAN COMANDOS
Ver Ejemplo
<SearchBar Placeholder="Enter search term"

Barra de búsqueda SearchButtonPressed="OnSearchBarButtonPressed"

/>
Acepta los datos proporcionados por el
usuario que usa para realizar una búsqueda.

<SwipeView>
<SwipeView.LeftItems>
SwipeView <SwipeItems>
<SwipeItem Text="Delete"
Proporciona elementos de menú contextual
que se revelan mediante un gesto de deslizar
IconImageSource="delete.png"
rápidamente.
BackgroundColor="LightPink"

Invoked="OnDeleteInvoked" />
</SwipeItems>
</SwipeView.LeftItems>
<!-- Content -->
</SwipeView>

Vistas para establecer valores

VIS TAS PARA ES TABLEC ER VALO RES
Ver Ejemplo
<CheckBox IsChecked="true"

CheckBox HorizontalOptions="Center"

Permite la selección de un boolean valor. VerticalOptions="CenterAndExpand"

/>
 VIS TAS PARA ES TABLEC ER VALO RES
Ver Ejemplo
<Slider Minimum="0"
Maximum="100"
Control deslizante
VerticalOptions="CenterAndExpand"
Permite la selección de un double valor de un intervalo />
continuo.

<Stepper Minimum="0"
Maximum="10"
Control de incremento Increment="0.1"

Permite la selección de un double valor de un intervalo HorizontalOptions="Center"

incremental.
VerticalOptions="CenterAndExpand"
/>

<Switch IsToggled="false"

Modificador HorizontalOptions="Center"

Permite la selección de un valor boolean . VerticalOptions="CenterAndExpand"

/>

<DatePicker Format="D"

DatePicker VerticalOptions="CenterAndExpand"
/>
Permite seleccionar una fecha.
 VIS TAS PARA ES TABLEC ER VALO RES
Ver Ejemplo

<TimePicker Format="T"

TimePicker VerticalOptions="CenterAndExpand"
/>
Permite la selección de una vez.

Vistas para editar texto

 VIS TAS PARA EDITAR TEXTO
Ver Ejemplo
<Entry Keyboard="Email"
Placeholder="Enter email
Entrada address"

Permite escribir y editar una sola línea de texto. VerticalOptions="CenterAndExpand" />

<Editor
VerticalOptions="FillAndExpand" />
Editor

Permite escribir y editar varias líneas de texto.

Vistas para indicar actividad

VIS TAS PARA INDICAR ACTIVIDAD
Ver Ejemplo
<ActivityIndicator
IsRunning="True"
ActivityIndicator
VerticalOptions="CenterAndExpand"
Muestra una animación para mostrar que la aplicación />
está ocupada en una actividad prolongada, sin indicar
ningún progreso.

<ProgressBar Progress=".5"

ProgressBar VerticalOptions="CenterAndExpand"
/>
Muestra una animación para mostrar que la aplicación
progresa a través de una actividad prolongada.
 VIS TAS PARA INDICAR ACTIVIDAD
Ver Ejemplo

Vistas que muestran colecciones

VIS TAS QUE MUES TRAN COLECCIONES
Ver Ejemplo
<CarouselView
ItemsSource="{Bind
CarouselView ing Monkeys}">

Muestra una lista desplazable de elementos de datos. ItemTemplate="{Sta

ticResource
MonkeyTemplate}"
/>

<CollectionView
ItemsSource="{Bind
CollectionView ing Monkeys}">

Muestra una lista desplazable de elementos de datos seleccionables, con ItemTemplate="{Sta

distintas especificaciones de diseño.
ticResource
MonkeyTemplate}"

ItemsLayout="Verti
calGrid, 2" />
 VIS TAS QUE MUES TRAN COLECCIONES
Ver Ejemplo

<IndicatorView
x:Name="indicatorV
IndicatorView iew"

Muestra indicadores que representan el número de elementos de IndicatorColor="Li

un CarouselView .
ghtGray"

SelectedIndicatorC
olor="DarkGray" />

<ListView
ItemsSource="{Bind
ListView ing Monkeys}">

Muestra una lista desplazable de elementos de datos seleccionables. ItemTemplate="{Sta

ticResource
MonkeyTemplate}"
/>

<Picker
Title="Select a
Selector monkey"
 VIS TAS QUE MUES TRAN COLECCIONES
Ver Ejemplo
Muestra un elemento seleccionado en una lista de cadenas de texto. TitleColor="Red">

<Picker.ItemsSourc
e>
<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.ItemsSour
ce>
</Picker>