[Xamarin.Forms] IndicatorView

Introducción

Recientemente recibíamos en Xamarin.Forms un nuevo CarouselView. El CarouselView permite mostrar una colección donde se pueden desplazar los elementos haciendo deslizamientos (gestos de Swipe). A pesar de contar con diferentes opciones para gestionar el layout, orientación, espaciado, etc. una de las peticiones más habituales a la hora de trabajar con el nuevo Carousel es poder mostrar un indicador con el número de elementos y la posición.

Indicador de posición

Llega en Xamarin.Forms 4.4 un nuevo control, IndicatorView, que tiene como objetivo permitir mostrar el número de elementos y la posición del elemento actual.

IndicatorView

IndicatorView sale en forma de Preview y para poder usarlo en estos momentos es necesario usar la etiqueta IndicatorView_Preview.

Xamarin.Forms.Forms.SetFlags("IndicatorView_Experimental");

IndicatorView nos permite mostrar un indicador de posición de diferentes formas, bien usando una forma sencilla o incluso usando una plantilla personalizada. Normalmente, el indicador va asociado a un Carousel:

<CarouselView 
     x:Name="Carousel" 
     ItemsSource="{Binding Items}">
     <CarouselView.ItemTemplate>
          <DataTemplate>
               <Frame 
                    BackgroundColor="{Binding Color}">
                    <Grid 
                         HorizontalOptions="Center" 
                         VerticalOptions="Center">
                         <Label 
                              Text="{Binding Name}" 
                              FontSize="25" />
                    </Grid>
               </Frame>
          </DataTemplate>
     </CarouselView.ItemTemplate>
</CarouselView>

A continaución, vamos a ver todas las propiedades básicas que definen la apariencia de IndicatorView.

Formas básicas

La forma más sencilla de usar IndicatorView es la siguiente:

<IndicatorView 
     ItemsSourceBy="Carousel" 
     IndicatorsShape="Circle" 
     IndicatorColor="Gray" 
     SelectedIndicatorColor="White" 
     HorizontalOptions="Center" />

Vaya, hemos utilizado varias propiedades. Vamos a revisar el conjunto de propiedades usadas:

  • ItemsSourceBy: El control muestra el conjunto de elementos disponibles en una colección y el elemento seleccionado (o actual) correspondiente a otro control (normalmente, un CarouselView). Esta propiedad permite indicar el control que será fuente de datos.
  • IndicatorShape: Permite definir la apariencia visual de la forma del indicador. Por ahora se soportan dos opciones, Circle o Square.
  • IndicatorColor: Color que se aplicará al fondo de todas los elementos que componen el IndicatorView.
  • SelectedIndicatorColor: Color aplicado al elemento seleccionado o actual.

El resultado:

IndicatorView usando formas básicas

Usando plantillas

¿Y qué ocurre si no nos encaja el uso de una forma básica (circulo o cuadrado)?. IndicatorView también cuenta con la propiedad IndicatorTemplate  que permite usando cualquier contenido personalizado:

<IndicatorView 
     x:Name="IndicatorsForms" 
     ItemsSourceBy="Carousel" 
     IndicatorColor="Transparent" 
     SelectedIndicatorColor="Gray" 
     HorizontalOptions="Center" 
     Visual="Forms">
     <IndicatorView.IndicatorTemplate>
          <DataTemplate>
               <Image>
                    <Image.Source>
                         <FontImageSource 
                              Glyph="{StaticResource Indicator}" 
                              FontFamily="{StaticResource IonicsFontFamily}" 
                              Color="Pink" />
                    </Image.Source>
               </Image>
          </DataTemplate>
     </IndicatorView.IndicatorTemplate>
</IndicatorView>

El resultado:

Usando plantillas

IndicatorView es una opción interesante que llega como un complemente perfecto ante determinadas necesidades relacionadas con colecciones (principalmente CarouselView). ¿Qué te parece el control?. Recuerda que cualquier duda o pregunta es bienvenida en los comentarios!.

Más información

6 pensamientos en “[Xamarin.Forms] IndicatorView

  1. Hola Javier, excelente este control, lo estaba esperando! Tengo dos preguntas y es en que momento dejan de ser preview? Y si hay la posibilidad de hacer infinite scroll con el CarouselView y IndicatorView?

    Gracias!

    • Tenemos que completar aún funcionalidad. No puedo decirte fecha exacta de cuando dejará de ser Preview pero estamos trabajando en ello.
      Puedes conseguir cargar mas datos al ir completando el scroll usando RemainingItemsThreshold.

  2. Thanks for the reply. Indicator view working fine for Android but not rendering in UWP (Windows) . It does not appear at all. Also, Is indicator click option available or we need to use Indicator Template (button) to achieve Indicator click?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s