adospace / reactorui-maui

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

Navigation.PushAsync not working #61

Closed DevPlus31 closed 1 year ago

DevPlus31 commented 1 year ago

new Button("Open Window") .OnClicked(async() => { await Navigation.PushAsync<FullColorWindow>(); })

I added this code to MainPage (demo) and created a new component named FullColorWindow with its own children items.

Expected behavior App displays the component named FullColorWindow

What happened Nothing after clicking on the button multiple times nothing happens PS: no errors & exception.

Thank you.

adospace commented 1 year ago

can you show some code? for example the code of the FullColorWindow component

DevPlus31 commented 1 year ago

Sure


using MauiReactor;
using MauiReactor.Canvas;

namespace ColorApp.Pages;

class FullColorWindowState
{
    public Color Color { get; set; }
}

class FullColorWindow : Component<FullColorWindowState>
{
    public override VisualNode Render()
    {
        return new ContentPage
        {
           new CanvasView
           {
               new Box()
                    .BackgroundColor(State.Color)
           }

        };
    }
}```
adospace commented 1 year ago

Hum, is it possible that you aren't using a navigation system? for example the NavigationPage?

class MainPage : Component
{
    public override VisualNode Render()
    {
        return new NavigationPage
        {
            new ContentPage
            {
                new ScrollView
                {
                    new VerticalStackLayout
                    {
                        new Button("Open Child Page")
                            .OnClicked(OnOpenChildPage)
                            .HCenter()
                    }
                    .VCenter()
                    .Spacing(25)
                    .Padding(30, 0)
                }
            }
        };
    }

    async void OnOpenChildPage()
    {
        await Navigation.PushAsync<FullColorWindow>();
    }
}

class FullColorWindowState
{
    public Color Color { get; set; } = Colors.Red;
}

class FullColorWindow : Component<FullColorWindowState>
{
    public override VisualNode Render()
    {
        return new ContentPage
        {
           new CanvasView
           {
               new Box()
                    .BackgroundColor(State.Color)
           }
        };
    }
}

if so can you try to follow this documentation article: https://adospace.gitbook.io/mauireactor/deep-dives/navigation and see if it's working for you?

DevPlus31 commented 1 year ago

Yes I am followed the documentation and it didn't work Forgot to say I am on MacOS 13.2.1

My mainPage.cs code:

{
    public int Counter { get; set; }
}

class MainPage : Component<MainPageState>
{
    public override VisualNode Render()
    {
        return new ContentPage
        {
            new ScrollView
            {
                new VerticalStackLayout
                {
                    new Image("dotnet_bot.png")
                        .HeightRequest(200)
                        .HCenter()
                        .Set(Microsoft.Maui.Controls.SemanticProperties.DescriptionProperty, "Cute dot net bot waving hi to you!"),

                    new Label("Hello, World!")
                        .FontSize(32)
                        .HCenter(),

                    new Label("Welcome to MauiReactor: MAUI with superpowers!")
                        .FontSize(18)
                        .HCenter(),

                    new Button(State.Counter == 0 ? "Click me" : $"Clicked {State.Counter} times!")
                        .OnClicked(()=>SetState(s => s.Counter ++))
                        .HCenter(),

                    new Button("Open Window")
                        .OnClicked(async() =>
                        {
                            await Navigation.PushAsync<FullColorWindow>();
                        })
                }
                .VCenter()
                .Spacing(25)
                .Padding(30, 0)
            }
        };
    }
}
adospace commented 1 year ago

Ok so you don't have the navigation page on the mainpage

DevPlus31 commented 1 year ago

Sorry I saw my mistake now I forgot the NavigationPage parent I think a warning message would be great!

Thank you anyway.

DevPlus31 commented 1 year ago

BTW is there a way to Navigate to another page without NavigationPage?

freever commented 1 year ago

@DevPlus31 I think the answer to #56 might be relevant to your question

adospace commented 1 year ago

@DevPlus31 In standard dotnet maui it's required to have either a NavigationPage as a parent or a Shell to navigate between pages (MAUI itself should warn in case neither of them is available but maybe there is a good reason for that I'm not aware of).

NavigationPage: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/pages/navigationpage?view=net-maui-7.0 Shell: https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/navigation?view=net-maui-7.0

I agree with @freever that maybe you're looking for a way to just swap the root content page of a Window: answer to #56 could be useful in that case

DevPlus31 commented 1 year ago

Thank you