adospace / reactorui-maui

MauiReactor is a MVU UI framework built on top of .NET MAUI
MIT License
586 stars 49 forks source link

Issue about navigation and parameters #85

Closed MattePozzy closed 1 year ago

MattePozzy commented 1 year ago

Hi, I'm trying to reproduce this sample https://adospace.gitbook.io/mauireactor/components/navigation/navigation and I have added in the ContentPage of the child page these properties but doesn't work

  .BackButtonIsEnabled(false)
   .BackButtonIsVisible(false)

the back button is always visible and clickable.

I have also tried to use this .OnBackButtonPressed(GoBack) but when I click on the back button the method GoBack is not called. This happens on windows, android and ios.

I found another issue.

When I go to the child page, change the entry value and tap on go back button, the value is not correctly passed back because first is called the OnValueSet, then is called the OnAfterTextChangedof the entry, so the returned value is the old one.

I have also tried to replace OnAfterTextChangedwith OnTextChanged but the issue is the same. This happens only on android.

Attached a video. Screen Recording 2023-06-09 at 13.48.35.zip

adospace commented 1 year ago

First question that properties work only with the Shell, you have to use something like this for the Navigation object: .Set(MauiControls.NavigationPage.HasBackButtonProperty, false)

        return new ContentPage()
        {
            new Button("Back")
                .VCenter()
                .HCenter()
                .OnClicked(GoBack)
        }
        .Set(MauiControls.NavigationPage.HasBackButtonProperty, false)
        .Title("Child Page");

please refer to the Maui documentation

adospace commented 1 year ago

Just to complete my answer, strange enough, MAUI doesn't provide a direct way to handle the BackButtonPressed outside of a Shell. So even looking at the documentation, seems you have to create a custom ContentPage and override OnBackButtonPressed().

I guess, it's something they will likely change in the future, maybe adding a BackButtonPressed event.

Said that, for now the hack is to create a derived ContentPage class and use that:

1) Create a derived ContentPage in a folder (ie. Controls) like this:

namespace myapp.Controls;

public class CustomContentPage : MauiControls.ContentPage
{
    public event EventHandler BackButtonPressed;

    protected override bool OnBackButtonPressed()
    {
        BackButtonPressed?.Invoke(this, EventArgs.Empty);
        return base.OnBackButtonPressed();
    }
}

2) Scaffold and use it:

[Scaffold(typeof(Project24.Controls.CustomContentPage))]
public partial class CustomContentPage
{
}

public class MainPage : Component
{
    public override VisualNode Render()
    {
        return new NavigationPage()
        {
            new ContentPage()
            {
                new Button("Move To Page")
                    .VCenter()
                    .HCenter()
                    .OnClicked(OpenChildPage)
            }
            .Title("Main Page")
        }
            ;
    }

    private async void OpenChildPage()
    {
        await Navigation.PushAsync<ChildPage>();
    }
}

public class ChildPage : Component
{
    public override VisualNode Render()
    {
        return new CustomContentPage()
        {
            new Button("Back")
                .VCenter()
                .HCenter()
                .OnClicked(GoBack)
        }
        .Set(MauiControls.NavigationPage.HasBackButtonProperty, true)
        .OnBackButtonPressed(OnBack)
        .Title("Child Page");
    }

    async void OnBack()
    {
        await ContainerPage.DisplayAlert("Hey", "hey", "cancel");
    }

    private async void GoBack()
    {
        await Navigation.PopAsync();
    }
}