Xamarin CarouselView Automatic slider

Question

I want to use CarouselView to create a slideshow with automatic playing. here is my code : this is my xaml page :

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:DrLink.Controls;assembly=DrLink"
             xmlns:forms="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
             x:Class="DrLink.Login.Login">
  <ContentPage.Resources>
    <ResourceDictionary>
      <!--Female template-->
      <DataTemplate x:Key="Template">
        <StackLayout BackgroundColor="Pink"
                         Orientation="Horizontal">
          <Image Source="{Binding ImageUrl}"
                   VerticalOptions="Center"
                   Margin="50,0,0,0" WidthRequest="100"
                   HeightRequest="200" />
          <Label VerticalOptions="Center"
                   Margin="60,0,0,0"
                   Text="{Binding Name}"
                   TextColor="Black"
                   FontSize="30" />
        </StackLayout>
      </DataTemplate>


    </ResourceDictionary>
  </ContentPage.Resources>
  <!--Carousel View-->

  <ContentPage.Content>

    <StackLayout Spacing="20">
      <StackLayout.Padding>
        <OnPlatform x:TypeArguments="Thickness">
          <OnPlatform.iOS>
            20, 20, 20, 5
          </OnPlatform.iOS>
          <OnPlatform.Android>
            20, 0, 20, 5
          </OnPlatform.Android>
          <OnPlatform.WinPhone>
            20, 0, 20, 5
          </OnPlatform.WinPhone>
        </OnPlatform>
      </StackLayout.Padding>

      <StackLayout.Children>
        <AbsoluteLayout>
          <AbsoluteLayout.Children>
            <!--<controls:CarouselView  />-->

          </AbsoluteLayout.Children>

        </AbsoluteLayout>
        <RelativeLayout>
          <RelativeLayout.Children>
            <ContentView RelativeLayout.XConstraint="0" RelativeLayout.YConstraint="0" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
              <ContentView.Content>
                <forms:CarouselView x:Name="CarouselZoos" ItemSelected="CarouselZoos_OnItemSelected" >
                  <forms:CarouselView.ItemTemplate>
                    <DataTemplate>
                      <Grid>
                        <Grid.RowDefinitions>
                          <RowDefinition Height="*"/>
                          <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding ImageUrl}"/>
                      </Grid>
                    </DataTemplate>
                  </forms:CarouselView.ItemTemplate>
                </forms:CarouselView>
              </ContentView.Content>
            </ContentView>

          </RelativeLayout.Children>

        </RelativeLayout>
      </StackLayout.Children>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

and I bound my CarouselView to an observablecollection :

    CarouselZoos.ItemsSource = new sliderCarousel().Slides;

    namespace DrLink.Controls
{
    public class slide
    {
        public string ImageUrl { get; set; }
        public string Name { get; set; }
    }

    public class sliderCarousel
    {
        public ObservableCollection<slide> Slides { get; set; }
        //public ObservableCollection<Grouping<string, slide>> MonkeysGrouped { get; set; }

        //public ObservableCollection<Zoo> Zoos { get; set; }

        public sliderCarousel()
        {

            //Monkeys = MonkeyHelper.Monkeys;
            //MonkeysGrouped = MonkeyHelper.MonkeysGrouped;
            Slides = new ObservableCollection<slide>
        {
            new slide
            {
                ImageUrl = "http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/23c1dd13-333a-459e-9e23-c3784e7cb434/2016-06-02_1049.png",
                Name = "Woodland Park Zoo"
            },
                new slide
            {
                ImageUrl =    "http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/6b60d27e-c1ec-4fe6-bebe-7386d545bb62/2016-06-02_1051.png",
                Name = "Cleveland Zoo"
                },
            new slide
            {
                ImageUrl = "http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/e8179889-8189-4acb-bac5-812611199a03/2016-06-02_1053.png",
                Name = "Phoenix Zoo"
            }
        };


        }
    }
}

now my question is : I want to autoplay slides without user click. 2- I want to change animation types (animating from left to right , animating from right to left ,...) how can I do this? thanks a lot

Answer 1

How I did it in Maui.

    carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Carousel");
    carouselView.ItemTemplate = new DataTemplate(() =>
    {

        Image image = new Image { Aspect = Aspect.Fill };
        image.SetBinding(Image.SourceProperty, "ImageSource");


        return image;
    });

    carouselView.Dispatcher.StartTimer(TimeSpan.FromSeconds(5), (Func<bool>)(() =>
    {
        carouselView.Position = (carouselView.Position + 1) % viewModel.Carousel.Count;

        return true;
    }));

Answer 2

Just adjusting the Position property seems to work just fine (tested on Android):

FileImageSource[] imageSources = new[] {
      FileImageSource.FromFile("GSP1.png"),
      FileImageSource.FromFile("GSP2.png")
    };

ObservableCollection<FileImageSource> imageCollection = new ObservableCollection<FileImageSource>(imageSources);

CarouselViewer.ItemsSource = imageSources;
Device.StartTimer(TimeSpan.FromSeconds(2), (Func<bool>)(() =>
    {
        CarouselViewer.Position = (CarouselViewer.Position + 1) % imageSources.Length;

         return true;
     }));

Answer 3

As far as I know, CarouselView only supports gesture-based page switching. However, you could grab the source code and create your own custom implementation of it with just a little bit of extra work. Internally the control uses a private SwitchView method that you could use to switch pages automatically.

Autoplaying slides could be achieved using Animation Extensions. Take a look at this article (Custom Animations section near the end) for an example on how to animate something repeatedly.

Animating the slides to appear from any direction can be done using View Extensions. Again, refer to the article linked above and the Xamarin documentation.