Forum Xamarin.Forms

How to make a multi-steps registration page with multi ContentView?

mshwfmshwf EGMember ✭✭✭
edited December 2018 in Xamarin.Forms

In the app I'm working on, there's a multi-steps registration, 4 steps:
to accomplish it, I'm thinking to have a single page to host a content view of the registration step, when it passes the validation requirements I remove it and inject the next content view.

This is an example to simplify my need:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns=""


and the Register1 looks like this:

    <ContentView xmlns="" 
                <local:IntToBoolConverter x:Key="intToBool"/>
                <Label Text="Page 1" FontSize="Large"/>
                <Entry x:Name="txtName" Placeholder="Name"/>
                <Button Text="Next" IsEnabled="{Binding Source={x:Reference txtName},
                                        Converter={StaticResource intToBool}}"

There are two problems:

1- I don't know how to handle the data (view model) between steps, to have only one object through all steps (Shall I use DI? if yes , then how in MVVMLight?)
2- How to to inject the content view into the main registration page dynamically in an MVVM fashion ?



  • JuniorJiangJuniorJiang Member, Xamarin Team Xamurai

    Hi @mshwf ,You can use the singleton mode. In one page , using a signle Content which can add View or remove view.And the command should bind to each view.You can try this.Not sure is the best way.

  • mshwfmshwf EGMember ✭✭✭

    The solution I came up with:
    I created an interface:

            public interface INavigate
                INavigate Next();
                INavigate Previous();

    all the ContentViews inherit from., for example the second ContentView implementation:

            public INavigate Next()
            => new View3();
            public INavigate Previous()
            => new View1();

    the container page's Content property is bound to the view model's property CurrentView of type INavigate,
    the command of next button:
    CurrentAddItemStep = CurrentAddItemStep.Next();

    the command of previous button:
    CurrentAddItemStep = CurrentAddItemStep.Previous();

Sign In or Register to comment.