Controles en Xamarin Forms

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!

curso de xamarin

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

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

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:

Ejemplo de botón
Ejemplo de botón
Button
Button

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");
}
DatePicker
DatePicker

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>
Editor
Editor

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

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

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

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

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

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>
stepper
Control Stepper

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

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>

Deja un comentario

Tu dirección de correo electrónico no será publicada.