[QUESTION] NavigationView and Frame using ViewModel and Dependency Injection

[alex6dj]

Describe the bug
Not a bug, just a technical question. First I'm not an expert in WPF and this is my first project using Avalonia. I'm trying to build a desktop app (windows only for now) using AvaloniaUI project and yours. I´m not using ReactiveUI, but can consider using if it make things simpler (I do reactive apps but use ReactiveProperty project instead). The question is about the use Frame and NavigationView. The use I see in the sample app is for navigation using Pages (Views). It is possible to use this two controls but with ViewModels and the View generated using DataTemplate.

Desktop/Platform (please complete the following information):

• OS: Windows 10
• FluentAvalonia Version 1.3.1 - latest
• Avalonia Version 0.10.13 - referenced by your project

Additional context
A detail, I will try to use Microsoft.Extensions.DependencyInjection in the app (this is required). The ViewModels, contains several classes injected by constructor.

    // App.cs DI implementation
    public partial class App : Application
    {
        public static IServiceProvider Services = null!; // Initialized before use

        public override void Initialize()
        {
            AvaloniaXamlLoader.Load(this);
        }

        public override void OnFrameworkInitializationCompleted()
        {
            ConfigureServiceProvider();

            var viewModel = Services.GetService<MainWindowViewModel>();

            if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
            {
                desktop.MainWindow = new MainWindow
                {
                    DataContext = viewModel
                };
            }
            else if (ApplicationLifetime is ISingleViewApplicationLifetime singleViewPlatform)
            {
                singleViewPlatform.MainView = new MainWindow
                {
                    DataContext = viewModel
                };
            }

            base.OnFrameworkInitializationCompleted();
        }

        private static void ConfigureServiceProvider()
        {
            var services = ConfigureServices();
            Services = services.BuildServiceProvider();
        }

        private static IServiceCollection ConfigureServices()
        {
            var services = new ServiceCollection();
            
            services.AddTransient<MainWindowViewModel>();
            
            services.AddLinkZoneSdk();

            return services;
        }
    }

The MainWindowViewModel should contain a List<NavigationViewItem> property or similar with the menu items. The thing is I don´t know how to wire your controls implentations with my code (use ViewModels instead of Views).

Thanks in advance.

[amwx]

As I said in another issue, I know very little about DI and how it works, and I also don't do the pure MVVM no code behind thing (just personal preference). However, I can try to help here...

Both controls were ported from WinUI. NavigationView is just a ContentControl and doesn't require Frame to work. Frame exists as a way to handle navigation logic (back/forward stack, transition animations, etc) but it's current UWP implementation is quite limited and doesn't really work well with the MVVM pattern (WinUI even has a old feature request about this microsoft/microsoft-ui-xaml#693 but it's frozen in time).
NavigationView is just a ContentControl and thus fully supports binding/MVVM like any other control, you would just have to manage page navigation yourself. I don't know if this has been added yet to the main 0.10.x branch of Avalonia but they recently added TransitioningContentControl which would enable animations and could be set as the content of the NavigationView and receive the bindings, if that's something you need too (but again may not be available yet).

Anyway, I think this is kind of what you're going for, but again pure MVVM and DI isn't my specialty. Also this code hasn't been tested, I just wrote it out real quick. This assumes the list of 'view models' fed to the NavigationView are the same view models that are used to create views - you can of course split them up.

public class MainWindowViewModel
{
    public MainWindowViewModel
    {
         // Create page view models here - can be normal view models or you could use straight NavigationViewItems
    }

    public List<PageViewModel> Pages { get; }

    public PageViewModel CurrentPage { get; set; } // Wire up with INotifyPropertyChanged
}

In MainWindow...

<NavigationView MenuItems="{Binding Pages}" Content="{Binding CurrentPage}">
    <!-- 
Creates a NavViewItem from `PageViewModel`
See sample app page for NavView binding
     -->
    <NavigationView.MenuItemTemplate>
        <DataTemplate>            
            <NavigationViewItem />
        </DataTemplate>
     </NavigationView.MenuItemTemplate>

    <NavigationView.DataTemplates>
<!-- Define your DataTemplates here, could also use ContentTemplate if only 1 template is needed -->
    </NavigationView.DataTemplates>
</NavigationView>

[alex6dj]

Just to end this discussion, your solution is working perfect using dependecy injection. One thing I noticed about NavigationViewItem is that it accepts a broad range of differents sources, so in my case just create an string property with an svg path and is converted correctly to an Icon, without effort, after binding. I think I will love Avalonia as much as I love this library now.

[alex6dj]

Excelent answer, simple and concise. Yes, you are right I don´t need back/forward in my app. I will test using your recomendations, but I think it will work. For now I don´t plan to use animations during Page switch, but the 'TransitioningContentControl' is a good tip.
I will left this issue open until done testing your recommendations, just in case another cuestion arises, but be mi guest if you think it is better clossed.

[amwx]

Great! Hopefully it all works for you and if any bugs or other problems crop up, let me know and we'll try to get a solution.