How to make an onboarding navigation feature

jojo1234jojo1234 Member ✭✭

I would like to create a feature like this where the user puts in information and taps the button to move on to the subsequent pages until they're done. I want there to be a progress bar at the top that corresponds to the page that a user is on (it should be able to go back and forth)
What do you suggest the best way of doing this is? Or is there any GitHub project that has a feature similar to this that I can check out?
https://imgur.com/a/XdjV8a4
Or
https://imgur.com/YOzZIon

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    We could place the progress bar in the title view to achieve it:

    <NavigationPage.TitleView>
        <StackLayout>
            <ProgressBar x:Name="MyProgress"/>
            <Label HorizontalOptions="CenterAndExpand" x:Name="ProgressTitle"/>
        </StackLayout>
    </NavigationPage.TitleView>
    

    Then set up is value in the constructor of the page:

    public MainPage()
    {
        InitializeComponent();
    
        MyProgress.Progress = 4 / 7.0;
        ProgressTitle.Text = "4/7";
    }
    

    Here is the effect:

    You can also customize the design of the progress bar as you want.

Sign In or Register to comment.