Los controles en Xamarin Forms, son un elemento sumamente importante en cada una de nuestras aplicaciones basadas en Xamarin Forms. Y aunque no todos los controles “clásicos” se encuentran disponibles, aquí te mostramos detalladamente cuáles son los controles disponibles, y cómo utilizarlos desde tu código en XAML.
¡Adquiere el Máster en Xamarin Forms!
Antes de iniciar, te invito a visitar la página de la Membresía de mi academia, donde podrás encontrar:
– Cursos y talleres de Xamarin
– Cursos y talleres en C#
– Cursos y talleres de Blazor
– Cursos y talleres de ASP.NET
– Cursos y talleres en muchas otras tecnologías
¡Todo al precio más bajo posible por tiempo limitado!
Contents
Activity Indicator
El control ActivityIndicator en Xamarin Forms, según la documentación es un control visual que se usa para representar que algo se está ejecutando, es muy común verlo cuando un proceso se está ejecutando en segundo plano o cuando están cargando fotos, información ó algún archivo.
Principalmente sirve para que el usuario vea que se está ejecutando realmente la tarea y que vea que la aplicación no falló o que algo le pasó.
La etiqueta para desplegar el control es:
<ActivityIndicator/>
La cual, si escribimos y desplegamos en nuestro emulador, no aparecerá nada.
Propiedades del control ActivityIndicator
El control ActivityIndicator tiene 2 propieades:
Color: Indica el color del ActivityIndicator.
IsRunning: Indica si el ActivityIndicator se encuentra o no corriendo.
Ejemplo del control ActivityIndicator
Una vez indicada la propiedad “IsRunning” en “True”, podemos apreciar nuestro control desplegado.
<ActivityIndicator Color="Blue" IsRunning="True"/>
BoxView
El control BoxView en Xamarin Forms, según la documentación es un control o view usado para dibujar un rectángulo de color sólido. Puede ser de mucha utilidad cuando por ejemplo, deseamos dibujar líneas horizontales ó verticales sin tanto grosor.
La etiqueta para desplegar el control es:
<BoxView/>
La cual, si escribimos y desplegamos en nuestro emulador, no aparecerá nada.
Propiedades del control BoxView
El control ActivityIndicator tiene 1 propiead:
Color: Indica el color del BoxView.
Ejemplo del control BoxView
Una vez indicada la propiedad “Color” en algún color, podemos apreciar nuestro control desplegado.
<BoxView Color="Blue"/>
Button
El control Button en Xamarin Forms, es uno de los controles más utilizados, es un control que reacciona ante eventos touch ó clicks.
La etiqueta para desplegar el control es:
<BoxView/>
La cual, si escribimos y desplegamos en nuestro emulador, nos desplegará el botón sin ningún contenido.
Propiedades del control Button
El control Button tiene 10 propieades principales:
Text: Indica el contenido del texto dentro del botón.
TextColor: Indica el color del texto dentro del botón.
FontSize: Indica el tamaño del texto dentro del botón.
FontAttributes: Indica atributos de la fuente, tales como Italic o Bold.
BackgroundColor: Indica el color de fondo del botón.
BorderColor: Indica el color del borde del botón.
BorderWidth: Indica el grosor del borde del botón.
BorderRadius: Indica el radio del borde del botón.
Image: Indica la imagen que tendremos dentro del botón.
ContentLayout: Indica la posición de la imagen en caso de haber especificado alguna. Puede tener 4 valores: Top, Bottom, Left y Right. Se debe indicar también la cantidad de pixeles de separación entre la imagen y el texto, como se muestra en el ejemplo.
Eventos del control Button
Clicked: Se dispara cuando el usuario presiona el botón.
Ejemplo del control Button
Una vez indicadas las propiedades de nuestro botón, podemos apreciar nuestro control desplegado.
<StackLayout VerticalOptions="Center" HorizontalOptions="Center"> <Button Text="Clickéame" TextColor="Blue" FontSize="Large" FontAttributes="Italic" BackgroundColor="Red" BorderColor="Blue" BorderWidth="2" BorderRadius="5" Image="customer.png" ContentLayout="Top, 10"/> </StackLayout>
Imagen del botón desplegado a partir del código XAML anterior:
DatePicker
El control DatePicker en Xamarin Forms, según la documentación es un control o view que nos permite seleccionar una fecha.
La etiqueta para desplegar el control es:
<;DatePicker/>
La cual, si escribimos y desplegamos en nuestro emulador, desplegará el control en cuestión, con la fecha el día actual seleccionada.
Propiedades del control DatePicker
El control DatePicker tiene 4 propieades:
Format: Indica el formato desplegado por el control. Puedes consultar la página de msdn para ver todos los formatos.
Date: Propiedad para asignar u obtener la fecha del control.
MinimumDate: Tipo DateTime, especifica la fecha mínima para la selección de la fecha.
MaximumDate: Tipo DateTime, especifica la fecha máxima para la selección de la fecha.
Eventos del control DatePicker
DateSelected: Evento que se dispara en cuanto se selecciona una fecha.
Ejemplo del control DatePicker
Una vez indicada la propiedad “Format”, podemos apreciar nuestro control desplegado.
<StackLayout VerticalOptions="Center" HorizontalOptions="Center"> <DatePicker x:Name="datePicker" Format="dd/MM/yyyy" DateSelected="DatePicker_OnDateSelected"/> </StackLayout>
Code Behind:
public ViewsTest () { InitializeComponent (); datePicker.Date = DateTime.Now; datePicker.MinimumDate = new DateTime(1990,1,1); datePicker.MaximumDate = new DateTime(2020, 1, 1); } private void DatePicker_OnDateSelected(object sender, DateChangedEventArgs e) { DisplayAlert("Fecha", e.NewDate.ToString(), "OK"); }
Editor
El control Editor en Xamarin Forms, nos permite editar múltiples líneas de texto.
La etiqueta para desplegar el control es:
<Editor/>
La cual, si escribimos y desplegamos en nuestro emulador, nos desplegará el editor funcional.
Propiedades del control Editor
El control Editor tiene 4 propieades principales:
Text: Indica el contenido del texto dentro del Editor.
TextColor: Indica el color del texto dentro del Editor.
FontSize: Indica el tamaño del texto dentro del Editor.
FontAttributes: Indica atributos de la fuente, tales como Italic o Bold.
Eventos del control Editor
Completed: Se dispara cuando el control pierde el foco de la edición.
TextChanged: Se dispara cuando existe un cambio en el texto del Editor.
Ejemplo del control Editor
Una vez indicadas las propiedades de nuestro editor, podemos apreciar nuestro control desplegado.
<StackLayout VerticalOptions="Center" HorizontalOptions="Center"> <Editor x:Name="editor" HeightRequest="500" Text="Texto de prueba" FontAttributes="Bold" FontSize="Large" TextColor="Red" Completed="EventoCompleted" TextChanged="TextCambiado" /> </StackLayout>
Entry
El control Entry en Xamarin Forms, nos permite editar una única línea de texto.
La etiqueta para desplegar el control es:
<Entry/>
La cual, si escribimos y desplegamos en nuestro emulador, nos desplegará el Entry funcional.
Propiedades del control Entry
El control Entry tiene 7 propieades principales:
IsPassword: Asigna caracteres en forma de punto para ocultar el texto.
PlaceHolder: Permite especificar un texto como guía para el usuario.
PlaceHolderColor: Especifica el color del texto del PlaceHolder.
Text: Propiedad que almacena el valor del texto del control.
TextColor: Permite especificar el color del texto.
FontSize: Indica el tamaño del texto dentro del control.
FontAttributes: Indica atributos de la fuente, tales como Italic o Bold.
Eventos del control Entry
Completed: Se dispara cuando el control pierde el foco de la edición.
TextChanged: Se dispara cuando existe un cambio en el texto del control.
Ejemplo del control Entry
Una vez indicadas las propiedades de nuestro editor, podemos apreciar nuestro control desplegado.
<Entry IsPassword="False" Placeholder="Escribe tu contraseña" PlaceholderColor="Yellow" Text = "texto por defecto" TextColor="Yellow" FontAttributes="Bold" FontSize="Large" Completed="Entry_Completed" TextChanged="Entry_TextChanged" />
Image
El control Image en Xamarin Forms, según la documentación es un control o view que pemite mostrar una imagen.
La etiqueta para desplegar el control es:
<Image/>
La cual, si escribimos y desplegamos en nuestro emulador, no aparecerá nada.
Propiedades del control Image
El control Image tiene21 propiedades:
Source: Origen donde se encuentra la imagen.
Aspect: Propiedad que indica cómo se mostrará la imagen de acuerdo al tamaño del control. Puede ser AspectFill, AspectFit ó Fill.
[quads id=4]
Ejemplo del control Image
Una vez indicada la propiedad “Source”, podemos apreciar nuestro control desplegado.
<Image Apsect="AspectFit" Source="customer.png"/>
Label
El control Label en Xamarin Forms, según la documentación es un control o view que nos permite desplegar texto en formato sólo lectura. Puede desplegar tanto texto de una línea como bloques multilinea.
La etiqueta para desplegar el control es:
<Label/>
La cual, si escribimos y desplegamos en nuestro emulador, no aparecerá nada.
Propiedades del control Label
El control ActivityIndicator tiene 8 propieades principales:
Text: Propiedad que almacena el texto del control.
TextColor: Color del texto del control.
VerticalTextAlignment: Ubicación del texto verticalmente.
HorizontalTextAlignment: Ubicación del texto horizontalmente
XAlign: Ubicación del control respecto a su ubicación en X.
YAlign: Ubicación del control respecto a su ubicación en Y.
LineBreakMode: Se puede usar para truncar texto. Por ejemplo, para desplegar solo la primer parte de una noticia.
FormattedText: Nos permite crear etiquetas Span para ir formateando secciones de la etiqueta.
Ejemplo del control Label
Una vez indicada la propiedad “Text”, podemos apreciar nuestro control desplegado.
<Label VerticalOptions="Center" HorizontalOptions="Center" Text="Sample Text" TextColor="Yellow" VerticalTextAlignment="Center" HorizontalTextAlignment="End" BackgroundColor="Blue" WidthRequest="100"> <Label.FormattedText> <FormattedString> <Span Text="Horarios:" FontAttributes="Bold" FontSize="Large"/> <Span Text="Lunes a viernes 9 -12 am" ForegroundColor="Red"/> </FormattedString> </Label.FormattedText> </Label>
Picker
El control Picker en Xamarin Forms, según la documentación es un control o view usado para seleccionar un elemento en una lista.
La etiqueta para desplegar el control es:
<Picker/>
La cual, si escribimos y desplegamos en nuestro emulador, aparecerá el control sin ningún elemento.
Propiedades del control Picker
El control Picker tiene 1 propiead:
Title: Indica el título que aparecerá por defecto encima del control.
TextColor: Especifica el color de texto del control.
Items: Especifica los elementos de la lista.
Eventos del control Picker
SelectedIndexChanged: Se dispara cuando se selecciona un elemento diferente de la lista.
Ejemplo del control Picker
Una vez especificados los elementos de la lista, podemos apreciar nuestro control desplegado.
<Picker Title="Select an item" TextColor="Yellow" SelectedIndexChanged=""> <Picker.Items> <x:String>Halo</x:String> <x:String>Gears of War</x:String> <x:String>Final Fantasy</x:String> </Picker.Items> </Picker>
ProgressBar
El control ProgressBar en Xamarin Forms, según la documentación es un control o view usado para mostrar cierto progreso de una tarea.
La etiqueta para desplegar el control es:
<ProgressBar/>
La cual, si escribimos y desplegamos en nuestro emulador, nos desplegará el control con un valor de 0 en el progreso.
Propiedades del control ProgressBar
El control ProgressBar tiene 1 propiead:
Progress: Indica el progreso de la tarea. El rango va de 0 a .1
Métodos útiles del control ProgressBar
El control ProgressBar tiene 1 método que nos puede ser de mucha utilidad:
ProgressTo(valor, duración del progreso, Animación).
Ejemplo de su uso:
progress.ProgressTo(.1, 250, Easing.BounceIn);
Ejemplo del control ProgressBar
Una vez indicada la propiedad “Progress” en algún valor, podemos apreciar nuestro control desplegado.
<ProgressBar Progress=".5"/>
SearchBar
El control SearchBar en Xamarin Forms, según la documentación es un control o view que nos sirve para permitir a nuestros usuarios realizar búsquedas.
La etiqueta para desplegar el control es:
<SearchBar/>
La cual, si escribimos y desplegamos en nuestro emulador, nos desplegará el control de búsqueda.
Propiedades del control SearchBar
El control SearchBar tiene 3 propieades:
Placeholder: Permite especificar un texto como guía para el usuario.
CancelButtonColor: Permite especificar el color del botón de cancelar.
Text: Propiedad que almacena el valor del texto del control.
Eventos del control SearchBar
SearchButtonPressed: Evento que se dispara cuando se presiona el botón de Buscar.
Ejemplo del control SearchBar
<SearchBar Placeholder="Buscar" PlaceholderColor="Red" CancelButtonColor="Yellow" Text="Emma Watson" SearchButtonPressed="SearchBar_OnSearchButtonPressed"/>
Slider
El control Slider en Xamarin Forms, según la documentación es un control o view usado para seleccionar un valor lineal.
La etiqueta para desplegar el control es:
<Slider/>
La cual, si escribimos y desplegamos en nuestro emulador, nos dibujará el control con el slider en valor 0.
Propiedades del control Slider
El control Slider tiene 3 propieades:
Maximum: Delimita el tope superior de los valores que se pueden seleccionar.
Minimum: Delimita el tope inferior de los valores que se pueden seleccionar.
Value: Valor actual del slider
Ejemplo del control Slider
<Slider Maximum="100" Minimum="5" Value="30"/>
Stepper
El control Stepper en Xamarin Forms, según la documentación es un control o view que sirve para seleccionar un valor de una forma más precisa que el Slider.
La etiqueta para desplegar el control es:
<Stepper/>
La cual, si escribimos y desplegamos en nuestro emulador, nos dibujará el control con el stepper con un botón menos (-) y un control más (+).
Propiedades del control Stepper
El control Stepper tiene 3 propieades:
Maximum: Delimita el tope superior de los valores que se pueden seleccionar.
Minimum: Delimita el tope inferior de los valores que se pueden seleccionar.
Increment: Indica el salto o cantidad de valores que se incrementará al presionar el botón (-) ó (+)
Value: Valor actual del control Stepper
Eventos del control Stepper
El control Stepper, tiene 1 evento:
ValueChanged: Se dispara cuando ocurre un cambio de valor en el control Stepper.
Ejemplo del control Stepper
En el archivo .xaml:
<StackLayout> <Stepper Maximum="100" Minimum="50" Increment="25" x:Name="stepper"/> <Label Text="{Binding Source={x:Reference stepper},Path=Value}}" /> </StackLayout>
Switch
Según la documentación oficial, un control Switch nos permite mostrar al usuario la selección de un valor booleano.
Propiedades del control Switch
IsToggled: Propiedad que nos permite conocer ó asignar si el elemento está en modo On/Off.
Eventos del control Switch
Toggled: Evento que se dispara en cuanto el valor del control Switch es cambiado.
Ejemplo del control Switch
<StackLayout> <Label Text="Switch" FontSize="50" FontAttributes="Bold" HorizontalOptions="Center" /> <Switch x:Name="switch" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" /> <Label Text="Switch is now False" FontSize="Large" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"> <Label.Triggers> <DataTrigger TargetType="Label" Binding="{Binding Source={x:Reference switch}, Path=IsToggled}" Value="True"> <Setter Property="Text" Value="Switch is now True" /> </DataTrigger> </Label.Triggers> </Label> </StackLayout>
TableView
Según la documentación de Xamarin, este control sirve para desplegar listas de datos u opciones que no comparten la misma plantilla, como es el caso de un ListView. No es un control al que se le pueda hacer Binding, por lo que los elementos deben ser agregados de forma manual.
- Es recomendable utilizarlo cuando:
- Se presenta una lista de configuración de la aplicación
- Se muestra un formulario al usuario
- Se despliega información que es desplegada en diferentes controles a través de las filas
Su uso es a través de Secciones, lo cual es común en los escenarios mencionados antes.
Estructura de un TableView
La estructura de un TableView inicia con un TableRoot, dentro del cual se definen diferentes elementos tipo TableSections, es decir:
- TableView
- TableRoot
- TableSection
- TableSection
- TableSection
- TableRoot
Cada TableSection contiene una cabecera, y puede contener uno o mas controles dentro de él.
Propiedades de un TableView
HasUnevenRows: Especifica si las filas del TableView son uniformes o no, es decir, si tienen el mismo tamaño o no.
Intent: Enumeración que especifica la Intención de la tabla, es decir, para qué se ocupará. Se disponen de 4 valores: Data, Form, Menu y Settings.
Root: Especifica el elemento TableRoot de la tabla.
RowHeight: Describe el alto de los elementos en la lista. Es ignorada si se especifica la propiedad HasUnevenRows como verdadera.
Ejemplo del control TableView
<TableView Intent="Settings"> <TableRoot> <TableSection Title="Datos del Cliente"> <ViewCell> <StackLayout Orientation="Vertical"> <Label Text="Nombre" /> <Entry Placeholder="Nombre" /> </StackLayout> </ViewCell> </TableSection> </TableRoot> </TableView>
TimePicker
Según la documentación de Xamarin, el control TimePicker permite seleccionar un determinado momento del día en formato TimeSpan.
Propiedades del control TimePicker
Format (String): Permite especificar el formato del tiempo desplegado al usuario. Es una propiedad tipo Bindable.
TextColor (Color): Obtiene o permite especificar el color del texto.
Time (TimeSpan): Obtiene o permite especificar el tiempo desplegado. Es una propiedad tipo Bindable.
Ejemplo de uso de TimePicker
<StackLayout> <Label Text="TimePicker" FontSize="50" FontAttributes="Bold" HorizontalOptions="Center" /> <TimePicker Format="T" VerticalOptions="CenterAndExpand" Margin="10, 0" /> </StackLayout>
WebView
Según la documentación de Xamarin, este control nos permite desplegar páginas HTML Web ó contenido HTML, basado en su propiedad Source.
Propiedades del control WebView
CanGoBack (Boolean): Se puede obtener, más no asignar, si el usuario puede navegar hacia una página anterior.
CanGoForward (Boolean): Se puede obtener, más no asignar, si el usuario puede navegar hacia una página siguiente.
Source (WebViewSource): Obtiene o se puede asignar el objeto WebViewSource, que representa la ubicación que el control WebView desplegará.
Métodos del control WebView
Eval(String): Evalúa una pieza de código Script.
GoBack(): Permite navegar hacia la página anterior.
GoForward(): Permite navegar hacia la página siguiente:
Eventos del control WebView
Navigated: Evento lanzado cuando la navegación es completada.
Navigating: Evento lanzado cuando la navegación inicia.
Ejemplo del control WebView
<StackLayout> <Label Text="WebView" FontSize="50" FontAttributes="Bold" HorizontalOptions="Center" /> <WebView Source="https://elcamino.dev" VerticalOptions="FillAndExpand" /> </StackLayout>