清除 Xamarin 表单模式堆栈

Question

I have a Xamarin.Forms application that uses a NavigationPage for normal screen navigation. From one of the screens (Stay Detail), I need to display a series of 4 sequential modal pages (like a wizard) that collects data to complete a process related to Stay Detail. Each page in the process has a "Cancel" button that should allow the user to cancel out of the wizard and return to Stay Detail. Here is the general flow:

            modal1 -> modal2 -> modal3 -> modal4
           /                                    \
 StayDetail                                      StayDetail

It's easy enough to do a PushModalAsync from StayDetail to launch modal1, then PushModalAsync/PopModalAsync to go between the individual modal pages. However, I can't figure out a clean way to exit out of the modal stack from the 2nd modal or later. What's the best way to do that?

Answer 1

Can't you just do the following every time the user navigates to the next modal?

await Navigation.PushModalAsync(new modal2()); //Send user to new modal2 pages
await Navigation.PopModalAsync(); //Pop modal1 page

Then when they hit the cancel button, you would do one more PopModalAsync() and would be back on the StayDetail page since you already popped all modals underneath.

If they needed a way to go back to modal1 after getting to modal2, you could simple pass any data modal1 needs while creating a new page like so:

Modal1Data modalData = new Modal1Data();

await Navigation.PushModalAsync(new modal1(modalData)); //Push old modal with previously entered data
await Navigation.PopModalAsync(); //Pop modal2 page

You could even save the already entered data from modal2 before navigating back to modal1, so that when the user went back to modal2, all of their info would still show up on the screen.

Answer 2

This solution will probably look overly complicated for your case, but it's what i'm using to communicate between modal actions to resolve dependencies (no account present, id missing, data deleted in the meantime etc) at random without losing type safety.

One way to think about wizards / a modal series is, that the next page depends on the previous and that mostly you will want to work with the result of your child modal.

I hope this helps:

public static class ModalManager
{
    public static bool TryRespondModal<TData>(this IModalResponse<TData> source, TData data, bool autoPop = true, bool animate = false)
    {
        if (Application.Current.MainPage.Navigation.ModalStack.Count <= 0)
            return false;

        source.ModalRequestComplete.SetResult(data);

        if (autoPop)
            Application.Current.MainPage.Navigation.PopModalAsync(animate);

        return true;
    }

    public static Task<TData> GetResponseAsync<TData>(this IModalResponse<TData> source)
    {
        source.ModalRequestComplete = new TaskCompletionSource<TData>();
        return source.ModalRequestComplete.Task;
    }
}

public enum WizardState
{
    Indeterminate = 0,
    Complete = 1,
    Canceled = 2
}

public class WizardModel
{
    public WizardState State { get; set; }

    public List<string> Page1Values { get; set; } = new List<string>();
    public List<string> Page2Values { get; set; } = new List<string>();
    public List<string> Page3Values { get; set; } = new List<string>();
}

public abstract class WizardPage : IModalResponse<WizardModel>
{
    public WizardModel Model { get; set; }

    public ICommand NextCommand { get; set; }

    public ICommand PreviousCommand { get; set; }

    public ICommand CancelCommand { get; set; }

    protected WizardPage(WizardModel model)
    {
        Model = model;
        NextCommand = new Command(NextButtonPressed);
        PreviousCommand = new Command(PreviousButtonPressed);
        CancelCommand = new Command(PreviousButtonPressed);
    }

    protected abstract IModalResponse<WizardModel> GetNextPage();

    protected virtual void CancelButtonPressed()
    {
        Model.State = WizardState.Canceled;
        this.TryRespondModal(Model);
    }

    protected virtual void PreviousButtonPressed()
    {
        // you're dropping down on the level of dependent windows here so you can tell your previous modal window the result of the current response
        this.TryRespondModal(Model);
    }

    protected virtual async void NextButtonPressed()
    {
        var np = GetNextPage();
        if (Model.State == WizardState.Complete || np == null || (await np?.GetResponseAsync()).State == WizardState.Complete)
            PersistWizardPage();

        // all following modal windows must have run through - so you persist whatever your page has done, unless you do that on the last page anyway. and then tell the previous
        // modal window that you're done
        this.TryRespondModal(Model);
    }

    protected virtual void PersistWizardPage()
    {
        // virtual because i'm lazy
        throw new NotImplementedException();
    }

    public TaskCompletionSource<WizardModel> ModalRequestComplete { get; set; }
}

public class Page1 : WizardPage
{

    public Page1(WizardModel model) : base(model)
    {
    }

    protected override IModalResponse<WizardModel> GetNextPage()
    {
        return new Page2(Model);
    }
}

public class Page2 : WizardPage
{
    public Page2(WizardModel model) : base(model)
    {
    }

    protected override IModalResponse<WizardModel> GetNextPage()
    {
        return new Page3(Model);
    }
}

public class Page3 : WizardPage
{
    public Page3(WizardModel model) : base(model)
    {
    }

    protected override IModalResponse<WizardModel> GetNextPage()
    {
        return null;
    }

    protected override void NextButtonPressed()
    {
        this.Model.State = WizardState.Complete;
        base.NextButtonPressed();
    }
}

public interface IModalResponse<TResponseType>
{
    TaskCompletionSource<TResponseType> ModalRequestComplete { get; set; }
}