(WASM) Native frame navigation using MVUX and C# markup, is it possible?

[emem67]

Hi I'm trying to navigare from one page to another using the native frame naviation, I have made 2 attempt with 2 buttons, here is the page code:

    public MainPage()
    {
        this.DataContext(new BindableMainModel(this.Frame), (page, vm) => page
            .Background(Theme.Brushes.Background.Default)
            .Content(new StackPanel()
            .VerticalAlignment(VerticalAlignment.Center)
            .HorizontalAlignment(HorizontalAlignment.Center)
            .Children(
                new TextBlock()
                    .Margin(12)
                    .Text("Simple static text in page."),
                new Button()
                    .Margin(12)
                    .Content("Go to next page #1.")
                    .Command(() => Frame.Navigate(typeof(SecondPage))), 
                new Button()
                    .Margin(12)
                    .Content("Go to next page #2.")
                    .Command(() => vm.NavigateToSecondPage)

            )));
    }

and here the model:

public partial record MainModel
{
    private Frame fr;

    public MainModel(Frame frame)
    {
        fr = frame;
    }

    public ValueTask NavigateToSecondPage()
    {
        fr.Navigate(typeof(SecondPage), null);
        return ValueTask.CompletedTask;
    }
}

The first attempt is adding the code brutally in the button command, in the second I added the frame in the model constructor and then navigate using a method.
So far I have not managed to get the second page, any idea?

[emem67]

Mhhh, I found a way to obtain the result but I feel it is quite wrong, probably I'm messing up...
I had to change the App.xaml.cs to made the Window? MainWindow from protected to internal

    public ValueTask NavigateToSecondPage()
    {
        var fr = (Application.Current as App)!.MainWindow!.Content as Frame;
        fr!.Navigate(typeof(SecondPage), null);
        return ValueTask.CompletedTask;
    }

[francoistanguay]

So the first approach of .Command(() => //in place code) is not supported. It's meant to use data binding to a Command that would be defined in your Model Method/ViewModel Command (depending if you're using MVVM or MVUX).

Second, when using a pattern like MVVM or MVUX, you keep your view code separated from your presentation/business code. Therefore, you typically need a navigation abstraction. You could define your own Navigation Service that abstracts the frame navigation and inject it in your model... OR. you could look into using our Navigation Extensions that already do all of that.

https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Navigation/NavigationOverview.html

Sample app using Navigation: https://platform.uno/docs/articles/external/workshops/tube-player/README.html

Todo and Commerce also use Navigation here: https://github.com/unoplatform/Uno.Samples/tree/master/reference

[francoistanguay]

We also have a PR that just got merged with tons more Nav samples so hope you'll give it a try:
https://github.com/unoplatform/Uno.Samples/tree/master/UI/Navigation

[emem67]

Thanks for the replay, I will have a deeper look at the documentation