Bdtjtk

How to do carousel view in Xamarin Forms. I have a splash page after the splash page I need to show the four instruction page with dot indicator in the bottom of the page. each page has a different image, text. I tried but not able to get it.
Here is My Code:

   public Carousel(ObservableCollection<CarouselContent> pages)

    {

        HorizontalOptions = LayoutOptions.FillAndExpand;

        HorizontalOptions = LayoutOptions.FillAndExpand;

        carousel = new CarouselView();

        carousel.HorizontalOptions = LayoutOptions.FillAndExpand;

        carousel.VerticalOptions = LayoutOptions.FillAndExpand;



        var template = new DataTemplate(() => {

            var page1 = new AbsoluteLayout();

            page1.BackgroundColor = Color.FromHex("050C29");

            page1.HorizontalOptions = LayoutOptions.FillAndExpand;

            page1.VerticalOptions = LayoutOptions.FillAndExpand;

            page1.SetBinding(AbsoluteLayout.BackgroundColorProperty, "BackgroundColor");

            var image = new Image();

            image.SetBinding(Image.SourceProperty, "Image");

            image.HorizontalOptions = LayoutOptions.FillAndExpand;

            image.VerticalOptions = LayoutOptions.Center;

            var lab = new Label()

            {

                FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)) + 10,

                FontAttributes = FontAttributes.Bold

            };

            lab.TextColor = Color.White;

            lab.HorizontalOptions = LayoutOptions.Center;

            lab.VerticalOptions = LayoutOptions.Center;

            lab.FontFamily = "BrandonGrotesque-Bold.otf";

            lab.FontSize = 30;

            lab.SetBinding(Label.TextProperty, "Header");

            var lab2 = new Label()

            {

                FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label))

            };

            lab2.TextColor = Color.White;

            lab2.HorizontalOptions = LayoutOptions.Center;

            lab2.VerticalOptions = LayoutOptions.Center;

            lab.FontFamily = "BrandonGrotesque-Bold.otf";

            lab.FontSize = 24;

            lab2.SetBinding(Label.TextProperty, "Content1");

            page1.Children.Add(image);

            page1.Children.Add(lab);

            page1.Children.Add(lab2);

            StackLayout stackLayout = new StackLayout();

            stackLayout.Children.Add(page1);



            AbsoluteLayout.SetLayoutBounds(image, new Rectangle(2, 0, 1, 0));

            AbsoluteLayout.SetLayoutFlags(image, AbsoluteLayoutFlags.All);

            AbsoluteLayout.SetLayoutBounds(lab, new Rectangle(0, 0.3, 1, 0.2));

            AbsoluteLayout.SetLayoutFlags(lab, AbsoluteLayoutFlags.All);

            AbsoluteLayout.SetLayoutBounds(lab2, new Rectangle(0, 0.4, 1, 0.2));

            AbsoluteLayout.SetLayoutFlags(lab2, AbsoluteLayoutFlags.All);



            return page1;

        });



        carousel.ItemsSource = pages;

        carousel.ItemTemplate = template;

        carousel.PositionSelected += pageChanged;

        Children.Add(carousel);



    }

Hi I did by adding three static images into CarouselPage. Each image have its own highlighted dot and button in the bottom of the static image.
Add CarouselPage plugin from Nouget and do the following code;

<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"

         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

         x:Class="MyProject.Views.Login" 

           xmlns:pages="clr-namespace:MyProject.Views"

         Title="CarouselPage">



<ContentPage>

    <StackLayout>

        <Image HorizontalOptions="Center" VerticalOptions="Center" Source="bg_splash.png" Aspect="AspectFill"></Image>

    </StackLayout>

</ContentPage>

<ContentPage>

    <StackLayout>

        <Image HorizontalOptions="Center" VerticalOptions="Center" Source="img_about_1.png" Aspect="AspectFill"></Image>

    </StackLayout>

</ContentPage>

<ContentPage>

    <StackLayout>

        <Image HorizontalOptions="Center" VerticalOptions="Center" Source="img_about_2.png" Aspect="AspectFill"></Image>

    </StackLayout>

</ContentPage>

<ContentPage>

    <StackLayout>

        <Image HorizontalOptions="Center" VerticalOptions="Center" Source="img_about_3.png" Aspect="AspectFill"></Image>

    </StackLayout>

</ContentPage>

<pages:LoginPage/>

In carousel page which image is visible in view do highlighted dot for that image like this ..*..