I participated at the .NET Conf Focus on Xamarin Latinoamérica online event with a talk about CarouselView. I detailed all its properties for displaying data collections as well as mentioning the IndicatorView element, which perfectly pairs up with CarouselView.

3. Xamarin.Forms es una plataforma que se encuentra
en constante evolución y mejora, buscando elevar la
productividad de los desarrolladores de apps móviles.
Una de las mejoras disponibles desde la versión 4.0 es
la implementación de nuevas vistas que permiten
desplegar colecciones de una manera optimizada y
funcional. Concretamente, estamos hablando de
CollectionView y CarouselView.

4. Vistas usadas para mostrar colecciones
• CarouselView
• CollectionView
• IndicatorView
• ListView
• Picker
• TableView

5. Aprende más sobre CollectionView
con los aportes de la comunidad:
A (r)evolution for displaying data: Xamarin.Forms CollectionView
https://www.luisbeltran.mx/2019/07/07/a-revolution-for-displaying-
data-xamarin-forms-collectionview/
CollectionView
https://www.youtube.com/watch?v=zavAeKDQWfE
Xamarin.Forms 4.0 CollectionView Challenge (English Version)
https://www.youtube.com/watch?v=rrZrTOvFmvY
Xamarin.Forms 4.0 CollectionView Challenge (en Español)
https://www.youtube.com/watch?v=b4XdbSMucAA

6. CarouselView

7. CarouselView es una vista para presentar datos en un
layout deslizable donde los usuarios hacen swipe para
moverse a lo largo de una colección de elementos.

8. • La colección de elementos que se mostrará en el
CarouselView es asignada mediante la propiedad
ItemsSource.

9. • La apariencia de cada
elemento se define
con la propiedad
ItemTemplate

10. • Por defecto, los elementos se muestran en una
lista horizontal; este comportamiento puede
modificarse cambiando el layout para mostrar
los datos de forma vertical por ejemplo.

11. • Por defecto, el CarouselView muestra elementos
completos, uno a la vez. Mediante la propiedad
PeekAreaInsets, es posible mostrar una parte de los
elementos anterior y posterior al actual. Esto es útil
para indicar al usuario que hay más datos.

12. • También se puede asignar un espacio vacío de
separación entre elementos mediante la propiedad
ItemSpacing.

13. • Por medio de las propiedades CurrentItem y
Position, es posible interactuar con el elemento que
se muestra en un determinado momento.

14. • De forma similar que en CollectionView, es posible
asignar una vista vacía (EmptyView) que indique al
usuario cuando no hay datos disponibles.

15. • Con el método ScrollTo es posible navegar a un
elemento particular para mostrarlo.

16. Cuando un usuario comienza el scroll sobre el
CarouselView, la posición final puede ser controlada
para que siempre se muestren los elementos por
completo (snapping). Esto se realiza con las
propiedades SnapPointsType y SnapPointsAlignment.

17. CarouselView soporta:
• Carga incremental de datos.
• Pull to refresh mediante el control RefreshView. Más información disponible
en https://www.luisbeltran.mx/2019/12/06/anadiendo-funcionalidad-pull-to-refresh-
con-xamarin-forms-refreshview/

18. Cabe destacar que CollectionView y CarouselView
tienen usos distintos:
• CollectionView es utilizado para mostrar listas de
datos de cualquier tamaño.
• CarouselView es utilizado para presentar
información en una lista de tamaño conocido.

19. • CarouselView está disponible a partir de la versión
4.3 de Xamarin.Forms.
• Actualmente está en fase preview, por lo que es
obligatorio agregar la siguiente sentencia en
AppDelegate (iOS) y/o MainActivity (Android):
Forms.SetFlags("CarouselView_Experimental");

21. IndicatorView

22. IndicatorView es una vista que
incluye indicadores que nos dicen
el número de elementos de la
colección y además señala cuál es
el elemento actual de la colección
de datos.

23. Algunas propiedades:
Count
Número de indicadores
HideSingle
Oculta el indicador si solo hay un elemento (por defecto, true)
IndicatorColor
Color del indicador

24. Algunas propiedades:
IndicatorSize
Tamaño del indicador (por defecto, 6.0)
IndicatorTemplate
Apariencia de cada indicador. Es un DataTemplate
IndicatorsShape
Forma de cada indicador: Circle o Square

25. Algunas propiedades:
ItemsSource
Colección para la cual se muestran los indicadores
MaximumVisible
Número máximo de indicadores a mostrar
Position
El índice del elemento actual seleccionado

26. Algunas propiedades:
SelectedIndicatorColor
Color del indicador que representa al elemento actualmente
seleccionado

27. • IndicatorView está disponible a partir de la versión
4.4 de Xamarin.Forms (Android/iOS) y 4.5 en UWP.
• Actualmente está en fase preview, por lo que es
obligatorio agregar la siguiente sentencia en
AppDelegate (iOS) y/o MainActivity (Android):
Forms.SetFlags(“IndicatorView_Experimental");

28. Ejemplo
<StackLayout>
<CarouselView ItemsSource="{Binding Monkeys}"
IndicatorView="indicatorView">
<CarouselView.ItemTemplate>
<!-- ... -->
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="indicatorView"
IndicatorColor="LightGray"
SelectedIndicatorColor="Black"
HorizontalOptions="Center">
</IndicatorView>
</StackLayout>

29. Cuando a un CarouselView se le asigna
la propiedad IndicatorView, también se
enlazan algunas propiedades:
• IndicatorView.Position se enlaza a
CarouselView.Position.
• IndicatorView.ItemsSource se enlaza
a CarouselView.ItemsSource.

31. Q & A

32. ¡Gracias!
Explorando Xamarin.Forms CarouselView
Luis Beltrán