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="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamApp"
             x:Class="XamApp.MainPage">

    <StackLayout>
        <local:Register1/>
    </StackLayout>
</ContentPage>

and the Register1 looks like this:

    <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:local="clr-namespace:XamApp"
                 x:Class="XamApp.Register1">
        <ContentView.Resources>
            <ResourceDictionary>
                <local:IntToBoolConverter x:Key="intToBool"/>
            </ResourceDictionary>
        </ContentView.Resources>
        <ContentView.Content>
            <StackLayout>
                <Label Text="Page 1" FontSize="Large"/>
                <Entry x:Name="txtName" Placeholder="Name"/>
                <Button Text="Next" IsEnabled="{Binding Source={x:Reference txtName},
                                        Path=Text.Length,
                                        Converter={StaticResource intToBool}}"
                        Clicked="Button_Clicked"/>
            </StackLayout>
        </ContentView.Content>
    </ContentView>

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 ?

Tagged:

Answers

  • 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.