How to register a page to the Wpf.Ui.Mvvm.Contracts.IPageService service

[Quinton619]

Hello, I am using the mvvm design pattern with the Wpf.Ui visual studio extension and every time I try to navigate to a page I created in the Compact Navigation project template I get the following error -> System.InvalidOperationException: 'The UiDesktopApp1.Views.Pages.EditorPage has not been registered in the Wpf.Ui.Mvvm.Contracts.IPageService service.'

There are no other errors and my page is set up exactly like the DashboardPage that comes with the template

`<ui:UiPage xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml" x:Class="UiDesktopApp1.Views.Pages.EditorPage"
xmlns:models="clr-namespace:UiDesktopApp1.Models"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:UiDesktopApp1.Views.Pages"
mc:Ignorable="d"
d:DataContext="{d:DesignInstance local:EditorPage,
IsDesignTimeCreatable=False}"
d:DesignHeight="450" d:DesignWidth="800"
Title="EditorPage">

<Grid Margin="56,0" VerticalAlignment="Top">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <ui:Button
        Grid.Column="0"
        Command="{Binding ViewModel.OnCounterIncrementCommand, Mode=OneWay}"
        Content="Click me!"
        Icon="Fluent24" />
    <TextBlock
        Grid.Column="1"
        Margin="12,0,0,0"
        VerticalAlignment="Center"
        Text="{Binding ViewModel.Counter, Mode=OneWay}" />
</Grid>

</ui:UiPage>

`
I also have the NavigationItem pointing to the EditorPage exactly like the other items are in the ContainerViewModel.cs

` public partial class ContainerViewModel : ObservableObject
{
private bool _isInitialized = false;

    [ObservableProperty]
    private string _applicationTitle = String.Empty;

    [ObservableProperty]
    private ObservableCollection<INavigationControl> _navigationItems = new();

    [ObservableProperty]
    private ObservableCollection<INavigationControl> _navigationFooter = new();

    [ObservableProperty]
    private ObservableCollection<MenuItem> _trayMenuItems = new();

    public ContainerViewModel(INavigationService navigationService)
    {
        if (!_isInitialized)
            InitializeViewModel();
    }

    private void InitializeViewModel()
    {
        ApplicationTitle = "WPF UI - UiDesktopApp1";

        NavigationItems = new ObservableCollection<INavigationControl>
        {
            new NavigationItem()
            {
                Content = "Home",
                PageTag = "dashboard",
                Icon = SymbolRegular.Home24,
                PageType = typeof(Views.Pages.DashboardPage)
            },
            new NavigationItem()
            {
                Content = "Data",
                PageTag = "data",
                Icon = SymbolRegular.DataHistogram24,
                PageType = typeof(Views.Pages.DataPage)
            },
            new NavigationItem()
            {
                Content = "Editor",
                PageTag = "editor",
                Icon = SymbolRegular.DataHistogram24,
                PageType = typeof(Views.Pages.EditorPage)
            }
        };

        NavigationFooter = new ObservableCollection<INavigationControl>
        {
            new NavigationItem()
            {
                Content = "Settings",
                PageTag = "settings",
                Icon = SymbolRegular.Settings24,
                PageType = typeof(Views.Pages.SettingsPage)
            }
        };

        TrayMenuItems = new ObservableCollection<MenuItem>
        {
            new MenuItem
            {
                Header = "Home",
                Tag = "tray_home"
            }
        };

        _isInitialized = true;
    }
}

}

`

I have looked everywhere in the project to find something I may missed but no luck, and I'm starting to get a bit frustrated, Thank you for your time.

[pomianowski]

Hey @Quinton619, demo applications and extension templates use the dependency injection mechanism to manage page instances. As the error indicates, IPageService does not know that the UiDesktopApp1.Views.Pages.EditorPage page has been registered.

Each Page or ViewModel is treated as a service. In the case of WPF UI templates, pages are registered in App.xaml.cs.

public partial class App
{
    private static readonly IHost _host = Host
        .CreateDefaultBuilder()
        .ConfigureServices((context, services) =>
        {
            // Register EditorPage class as service, which is instantiated only once
            services.AddSingleton<UiDesktopApp1.Views.Pages.EditorPage>();
        }).Build();
}

This allows the GetPage method of the IPageService to get an instance of the Test page with the help of the service provider.

wpfui/src/Wpf.Ui.Extension/Templates/Wpf.Ui.Mvvm.FluentNavigation/Services/PageService.cs

Line 26 in 78f7c7f

public T? GetPage<T>() where T : class

• Dependency injection in .NET
• MVVM - Putting things together

[TimexPeachtree]

Awesome thanks for the help, saved me few more hours of searching on WPF UI