Carousel View Auto Sliding in Xamarin Forms

Question

I have a Carousel View at the bottom of my page. Now i want the images to keep scrolling automatically every 2 seconds. I have implemented the same and its working fine.

`Device.StartTimer(TimeSpan.FromSeconds(2), () =>
            {
                SlidePosition++;
                if (SlidePosition == Zoos.Count)
                {
                    SlidePosition = 0;
                }
                CarouselZoos.Position = SlidePosition;
                return true; 
            });`

Now images are loaded L->R, the first image scrolls, second image scrolls and so on.

After the last image, A Rewind action takes place from R->L and the first image is loaded again.

I need the 1st image to be shown after the last image without this rewind action.

if you could please throw some more light into fading in/out different images in an infinite loop.... — MainakChoudhury

Yuri S Yuri S · Accepted Answer · 2017-07-25T22:07:05

All possible :-) animations.

Files "icon1.png","icon2.png","icon3.png" are in PCL Resources folder

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonRendererDemo.RollingAnimPage">
    <ContentPage.Content>
        <ScrollView>
            <StackLayout>
                <Button x:Name="btnScaleAnim" Text="Start Scale Animations" Clicked="ButtonScaleAnim_Clicked" ></Button>
                <StackLayout BackgroundColor="Aqua" >
                    <Image x:Name="scaleImage" WidthRequest="80" HeightRequest="66" Aspect="AspectFit"></Image>
                </StackLayout>

                <Button x:Name="btnFadeAnim" Text="Start Fade Animations" Clicked="ButtonFadeAnim_Clicked" ></Button>
                <StackLayout BackgroundColor="Aqua">
                    <Image x:Name="fadeImage" WidthRequest="80" HeightRequest="66" Aspect="AspectFit"></Image>
                </StackLayout>

                <Button x:Name="btnFade2Anim" Text="Start Fade 2 Animations" Clicked="ButtonFade2Anim_Clicked" ></Button>
                <StackLayout>
                    <RelativeLayout x:Name="fadeRelativeLayout" BackgroundColor="Aqua" HeightRequest="70"></RelativeLayout>
                </StackLayout>

                <Button x:Name="btnScrollAnim" Text="Start Scroll Animations" Clicked="ButtonScrollAnim_Clicked" ></Button>
                <AbsoluteLayout BackgroundColor="Aqua" >
                    <Image x:Name="scrollImage1" WidthRequest="80" HeightRequest="66" Aspect="AspectFit" ></Image>
                    <Image x:Name="scrollImage2" WidthRequest="80" HeightRequest="66" Aspect="AspectFit" ></Image>
                </AbsoluteLayout>

            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

And code behind:

namespace ButtonRendererDemo
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class RollingAnimPage : ContentPage
    {
        Image fadeImage1, fadeImage2;

        string[] images = new string[]
            {
                "icon1.png",
                "icon2.png",
                "icon3.png",
            };

        int nextScaleImageIndex = 0;
        int nextFadeImageIndex = 0;
        int nextFade2ImageIndex = 0;
        int nextScrollImageIndex = 0;

        public RollingAnimPage()
        {
            InitializeComponent();

            scaleImage.Scale = 0;
            fadeImage.Opacity = 0;

            fadeRelativeLayout.Children.Add(fadeImage1 = new Image
            {
                Opacity = 0,
                WidthRequest = 80,
                HeightRequest = 66
            },
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width / 2 - fadeImage1.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Width / 2;
            }),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Height / 2 - fadeImage1.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Height / 2;
            })
            );

            fadeRelativeLayout.Children.Add(fadeImage2 = new Image
            {
                Opacity = 0,
                WidthRequest = 80,
                HeightRequest = 66
            },
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Width / 2 - fadeImage2.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Width / 2;
            }),
            Constraint.RelativeToParent((parent) =>
            {
                return parent.Height / 2 - fadeImage2.Measure(double.PositiveInfinity, double.PositiveInfinity).Request.Height / 2;
            })
            );

        }



        bool scaleAnimRunning = false;
        private void ButtonScaleAnim_Clicked(object sender, EventArgs e)
        {
            scaleAnimRunning = !scaleAnimRunning;
            btnScaleAnim.Text = scaleAnimRunning ? "Stop Scale Animation" : "Start Scale Animation";

            Task.Run(() =>
            {
                Device.BeginInvokeOnMainThread(async () =>
                {
                    while (scaleAnimRunning)
                    {
                        await scaleImage.ScaleTo(0, 250, Easing.Linear);
                        scaleImage.Source = ImageSource.FromResource("ButtonRendererDemo.Resources." + images[nextScaleImageIndex]);
                        await scaleImage.ScaleTo(1, 250, Easing.Linear);

                        nextScaleImageIndex = ++nextScaleImageIndex % images.Length;
                        await Task.Delay(1000);
                    }
                });
            });
        }


        bool fadeAnimRunning = false;
        private void ButtonFadeAnim_Clicked(object sender, EventArgs e)
        {
            fadeAnimRunning = !fadeAnimRunning;
            btnFadeAnim.Text = fadeAnimRunning ? "Stop Fade Animation" : "Start Fade Animation";

            Task.Run(() =>
            {
                Device.BeginInvokeOnMainThread(async () =>
                {
                    while (fadeAnimRunning)
                    {
                        await fadeImage.FadeTo(0, 250, Easing.Linear);
                        fadeImage.Source = ImageSource.FromResource("ButtonRendererDemo.Resources." + images[nextFadeImageIndex]);
                        await fadeImage.FadeTo(1, 250, Easing.Linear);

                        nextFadeImageIndex = ++nextFadeImageIndex % images.Length;
                        await Task.Delay(1000);
                    }
                });
            });
        }


        bool fade2AnimRunning = false;
        bool image1Visible = false;
        private void ButtonFade2Anim_Clicked(object sender, EventArgs e)
        {
            fade2AnimRunning = !fade2AnimRunning;
            btnFade2Anim.Text = fade2AnimRunning ? "Stop Fade 2 Animation" : "Start Fade 2 Animation";

            Task.Run(() =>
            {
                Device.BeginInvokeOnMainThread(async () =>
                {

                    while (fade2AnimRunning)
                    {
                        if (image1Visible)
                        {
                            fadeImage2.Source = ImageSource.FromResource("ButtonRendererDemo.Resources." + images[nextFade2ImageIndex]);
                            fadeImage1.FadeTo(0, 250, Easing.Linear);
                            await fadeImage2.FadeTo(1, 250, Easing.Linear);
                        }
                        else
                        {
                            fadeImage1.Source = ImageSource.FromResource("ButtonRendererDemo.Resources." + images[nextFade2ImageIndex]);
                            fadeImage2.FadeTo(0, 250, Easing.Linear);
                            await fadeImage1.FadeTo(1, 250, Easing.Linear);
                        }

                        image1Visible = !image1Visible;
                        nextFade2ImageIndex = ++nextFade2ImageIndex % images.Length;
                        await Task.Delay(1000);
                    }
                });
            });
        }



        bool scrollAnimRunning = false;
        bool scrollImage1Visible = false;
        private void ButtonScrollAnim_Clicked(object sender, EventArgs e)
        {
            scrollAnimRunning = !scrollAnimRunning;
            btnScrollAnim.Text = scrollAnimRunning ? "Stop Scroll Animation" : "Start Scroll Animation";

            if (scrollAnimRunning) //anim started
            {
                if (scrollImage1Visible)
                    scrollImage2.TranslateTo(Width, scrollImage2.Y, 0);
                else
                    scrollImage1.TranslateTo(Width, scrollImage1.Y, 0);
            }

            Task.Run(() =>
            {
                Device.BeginInvokeOnMainThread(async () =>
                {

                    while (scrollAnimRunning)
                    {
                        if (scrollImage1Visible)
                        {
                            scrollImage2.Source = ImageSource.FromResource("ButtonRendererDemo.Resources." + images[nextScrollImageIndex]);
                            scrollImage1.TranslateTo(-scrollImage1.Width, scrollImage1.Y, 250);
                            await scrollImage2.TranslateTo(Width / 2 - scrollImage2.Width / 2, scrollImage2.Y, 250);
                            scrollImage1.TranslateTo(Width, scrollImage1.Y, 0);
                        }
                        else
                        {
                            scrollImage1.Source = ImageSource.FromResource("ButtonRendererDemo.Resources." + images[nextScrollImageIndex]);
                            scrollImage2.TranslateTo(-scrollImage2.Width, scrollImage2.Y, 250);
                            await scrollImage1.TranslateTo(Width / 2 - scrollImage1.Width / 2, scrollImage1.Y, 250);
                            scrollImage2.TranslateTo(Width, scrollImage2.Y, 0);
                        }

                        scrollImage1Visible = !scrollImage1Visible;
                        nextScrollImageIndex = ++nextScrollImageIndex % images.Length;
                        await Task.Delay(1000);
                    }
                });
            });    
        }           
    }
}

Carousel View Auto Sliding in Xamarin Forms

1 Answers