CarouselPage with progress indicator?

Question

I have a registration page that has too many fields, that requires me to divide it into 4 pages, I thought that the best experience is to have a CarouselPage with four ContentPage s, that can be easily navigate through, and yet having one view with a corresponding view model. Before asking the main question, I want to make sure that I'm taking the right decision, and I didn't miss any other option that is dedicated for such case that I'm not aware of (I'm still in my first steps in Xamarin). if the CarouselPage is the way to go, then I want to have some indicator on the bottom of the screen, that shows the registration progress like a progress bar that increases by 25% on every next page, something that ties all the ContentPage s together

Answer 1

You can use the CarouselView which is the successor of CarouselPage. There is a documentation how to implement CarouseView and here is nice blog post .

I can give you good idea how to start. CarouselViev is similar to ListView.

<controls:CarouselViewControl 
    x:Name="MyCarouselView">
    <controls:CarouselView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <Entry 
                    Placeholder="{Binding FirstEntryName}"
                    Text="{Binding FirstEntryText, Mode=TwoWay}"
                    IsVisible="{Binding FirstEntryVisible}" />
                <Entry 
                    Placeholder="{Binding SecondEntryName}"
                    Text="{Binding FirstEntryText, Mode=TwoWay}"
                    IsVisible="{Binding SecondEntryVisible}" />
            </StackLayout>
        </DataTemplate>
    </controls:CarouselView.ItemTemplate>
</controls:CarouselViewControl>

Then you can populate ItemSource with ObservableCollection DataFromEntries and MyViewData looks like this:

public class MyViewData
{
    public string FirstEntryName { get; set; }
    public string FirstEntryText { get; set; }
    public bool FirstEntryVisible { get; set; }
    public string SecondEntryName { get; set; }
    public string SecondEntryText { get; set; }
    public bool SecondEntryVisible { get; set; }
}

To enable Indicator you need to set property ShowIndicators to true.

Answer 2

Try this one. This article here is about carousel view with page indicator. https://xamarinhelp.com/carousel-view-page-indicators/