= $u_time + 86400) { $modifiedDate = get_the_modified_time('F jS, Y'); echo 'Última modificación: '.$modifiedDate.''; } }?>

Carrusel para Xamarin Forms

Basándome en la implementación de https://github.com/chrisriesgo he adaptado su Carousel para mostrar imágenes usando Xaml.

carousel

El autor original ha desarrollado su ejemplo por código, lo que para algunos puede parecer un poco complicado; independientemente de que te guste más o menos Xaml, siempre es mas intuitivo ver como esta construida la página de esta manera que con código XD.

Básicamente he hecho uso de las clases CarouselLayout y PagerIndicatorDots en mi Xaml. La clave es usar un contenedor que se ajuste a nuestras necesidades, en mi caso para mostrar un banner que ocupe el ancho completo de la página: un Grid.

<Grid Margin="10">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label Grid.Row="0"
           Text="Carousel Example"
           VerticalOptions="Center"
           HorizontalOptions="Center" />

    <controls:CarouselLayout Grid.Row="1"
                             ItemsSource="{Binding ImagesList}"
                             IndicatorStyle="Dots"
                             x:Name="Carousel">
      <controls:CarouselLayout.ItemTemplate>
        <DataTemplate>
          <Image Source="{Binding}"
                 Aspect="Fill"></Image>
        </DataTemplate>
      </controls:CarouselLayout.ItemTemplate>
    </controls:CarouselLayout>
    <controls:PagerIndicatorDots Grid.Row="1"
                                 DotColor="Red"
                                 DotSize="20"
                                 ItemsSource="{Binding Source={x:Reference Carousel}, Path=ItemsSource}"
                                 SelectedItem="{Binding Source={x:Reference Carousel}, Path=SelectedItem}"></controls:PagerIndicatorDots>
  </Grid>

 

Notar que para que la selección del puntito correspondiente a la imagen que se esta mostrando se actualice es necesario bindar el SelectedItem de los puntitos al Carousel:

SelectedItem="{Binding Source={x:Reference Carousel}, Path=SelectedItem}"

 

Para esto he hecho unas modificaciones en CarouselLayout

private void ItemsSourceChanged()
{
   ...

   if(this.selectedIndex >= 0)
   {
      SelectedIndex = this.selectedIndex;
      this.UpdateSelectedItem();
   }
}

private void UpdateSelectedIndex()
{
    if(this.SelectedIndex > -1)
    {
       if(this.Children != null && this.Children.Any())
       {
          try
          {
             this.SelectedItem = this.Children[this.SelectedIndex].BindingContext;
          }
          catch(IndexOutOfRangeException exception)
          {
              Debug.WriteLine($"Carousel Layout Exception: Index out of range: {exception.Message}.");
              this.SelectedItem = null;
           }
        }
        else
        {
            this.SelectedItem = null;
        }
    }
    else
    {
        this.SelectedItem = null;
    }
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *