Forum Xamarin.Forms

CarouselView won't swipe between images automatically

MowCeffMowCeff Member ✭✭
edited March 31 in Xamarin.Forms

Hello,

I'm trying to have an automatic CarouselView that has images in it. The CarouselView has correctly its images, I can swipe manually. To make it automatic I used a timer so after x seconds it'll change the carousel's position. The thing is that it doesn't want to change the image. My timer works because I tried to increment an int variable, it works.

Here's how I've done it :

XAML:

and the code:

Extra informations: my timer and the carousel are in a button. That's how I want it to work. Whenever the users clicks on this button, it starts the slideshow. I also work with the Tizen tech.

Anyone can help me out? :)

PS: Sorry for putting the screens instead of the codes, it wouldn't display correctly.

Best Answer

  • MowCeffMowCeff ✭✭
    Accepted Answer

    But all good. I did my slideshow without using a CarouselView.

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    Sorry, I couldn't reproduce this question, could you please post a basic demo or some code snippets so that we can test on our side?

  • MowCeffMowCeff Member ✭✭
    edited April 1

    @jezh said:
    Sorry, I couldn't reproduce this question, could you please post a basic demo or some code snippets so that we can test on our side?

    As you can see, the image doesn't swipe but the "debug int" does increment after x seconds.

  • jezhjezh Member, Xamarin Team Xamurai

    According to the code you post, I couldn't find the wrong clue.

    If it is convenient for you , could you please post a basic demo or more code snippets so that we can test on our side?

  • MowCeffMowCeff Member ✭✭

    @jezh said:
    According to the code you post, I couldn't find the wrong clue.

    If it is convenient for you , could you please post a basic demo or more code snippets so that we can test on our side?

    I get the sources of the images from I webserver that I host. The images's extension and name are known.

    public List GetImageSourceFromServer()
    {
    List sources = new List();

    for (int i = 1; i < 16; i++)
     {
         sources.Add(servAddress + i + ".jpg");
     }
    
      return sources;
    

    }

    I don't really know what other code snippets would be useful.

  • jezhjezh Member, Xamarin Team Xamurai

    I created a simple demo according to your code, it works properly.The main code is as follows:

    MainPage.xaml

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 mc:Ignorable="d"
                 x:Class="MyCarouselApp.MainPage">
    
        <StackLayout Orientation="Vertical">
            <Button  Text="Scroll Image"  Clicked="Button_Clicked">
            </Button>
    
            <CarouselView  x:Name="carou_slideshow" ItemsSource="{Binding sources}" IsVisible="False">
                <CarouselView.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding }"></Image>
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>
        </StackLayout>
    </ContentPage>
    

    MainPage.xaml.cs

    public partial class MainPage : ContentPage
        {
            List<string> sources;
            public MainPage()
            {
                InitializeComponent();
    
                GetImageSourceFromServer();
            }
    
            public void GetImageSourceFromServer()
            {
    
                sources = new List<string>();
                sources.Add("http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg");
                sources.Add("http://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg");
                sources.Add("http://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg");
                sources.Add("http://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Saimiri_sciureus-1_Luc_Viatour.jpg/220px-Saimiri_sciureus-1_Luc_Viatour.jpg");
                sources.Add("http://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Golden_lion_tamarin_portrait3.jpg/220px-Golden_lion_tamarin_portrait3.jpg");
                sources.Add("http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Alouatta_guariba.jpg/200px-Alouatta_guariba.jpg");
                sources.Add("http://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Macaca_fuscata_fuscata1.jpg/220px-Macaca_fuscata_fuscata1.jpg");
                sources.Add("http://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Mandrill_at_san_francisco_zoo.jpg/220px-Mandrill_at_san_francisco_zoo.jpg");
            }
    
            private void Button_Clicked(object sender, EventArgs e)
            {
                carou_slideshow.IsVisible = true;
                carou_slideshow.ItemsSource = sources;
    
                Device.StartTimer(TimeSpan.FromSeconds(2), (Func<bool>)(() =>
                {
                    carou_slideshow.Position = (carou_slideshow.Position + 1) % sources.Count;
                    return true;
                })
                );
            }
        }
    

    The result is:

  • MowCeffMowCeff Member ✭✭

    @jezh said:
    I created a simple demo according to your code, it works properly.The main code is as follows:

    MainPage.xaml

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 mc:Ignorable="d"
                 x:Class="MyCarouselApp.MainPage">
    
        <StackLayout Orientation="Vertical">
            <Button  Text="Scroll Image"  Clicked="Button_Clicked">
            </Button>
    
            <CarouselView  x:Name="carou_slideshow" ItemsSource="{Binding sources}" IsVisible="False">
                <CarouselView.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding }"></Image>
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>
        </StackLayout>
    </ContentPage>
    

    MainPage.xaml.cs

    public partial class MainPage : ContentPage
        {
            List<string> sources;
            public MainPage()
            {
                InitializeComponent();
    
                GetImageSourceFromServer();
            }
    
            public void GetImageSourceFromServer()
            {
    
                sources = new List<string>();
                sources.Add("http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg");
                sources.Add("http://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg");
                sources.Add("http://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg");
                sources.Add("http://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Saimiri_sciureus-1_Luc_Viatour.jpg/220px-Saimiri_sciureus-1_Luc_Viatour.jpg");
                sources.Add("http://upload.wikimedia.org/wikipedia/commons/thumb/8/87/Golden_lion_tamarin_portrait3.jpg/220px-Golden_lion_tamarin_portrait3.jpg");
                sources.Add("http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Alouatta_guariba.jpg/200px-Alouatta_guariba.jpg");
                sources.Add("http://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Macaca_fuscata_fuscata1.jpg/220px-Macaca_fuscata_fuscata1.jpg");
                sources.Add("http://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Mandrill_at_san_francisco_zoo.jpg/220px-Mandrill_at_san_francisco_zoo.jpg");
            }
    
            private void Button_Clicked(object sender, EventArgs e)
            {
                carou_slideshow.IsVisible = true;
                carou_slideshow.ItemsSource = sources;
    
                Device.StartTimer(TimeSpan.FromSeconds(2), (Func<bool>)(() =>
                {
                    carou_slideshow.Position = (carou_slideshow.Position + 1) % sources.Count;
                    return true;
                })
                );
            }
        }
    

    The result is:

    Well, this is what I have. Do you think it is because I'm working with Tizen on a TV?

  • jezhjezh Member, Xamarin Team Xamurai

    I don't have TV to test, maybe you can test on a mobile. :)

  • MowCeffMowCeff Member ✭✭

    @jezh said:
    I don't have TV to test, maybe you can test on a mobile. :)

    I can't since it is a Tizen project only for TV. :(

  • MowCeffMowCeff Member ✭✭
    Accepted Answer

    But all good. I did my slideshow without using a CarouselView.

Sign In or Register to comment.