Implement multilevel navigation

src/Wpf.Ui.Gallery/App.xaml.cs

@@ -29,6 +29,7 @@
 using Wpf.Ui.Gallery.Views.Pages.Icons;
 using Wpf.Ui.Gallery.Views.Pages.Media;
 using Wpf.Ui.Gallery.Views.Pages.Navigation;
+using Wpf.Ui.Gallery.Views.Pages.Samples;
 using Wpf.Ui.Gallery.Views.Pages.StatusAndInfo;
 using Wpf.Ui.Gallery.Views.Pages.Text;
 using Wpf.Ui.Gallery.Views.Pages.Windows;
@@ -49,7 +50,7 @@ public partial class App : Application
     // https://docs.microsoft.com/dotnet/core/extensions/logging
     private static readonly IHost _host = Host
         .CreateDefaultBuilder()
-        .ConfigureAppConfiguration(c => { c.SetBasePath(Path.GetDirectoryName(Assembly.GetEntryAssembly()!.Location)); })
+        .ConfigureAppConfiguration(c => { c.SetBasePath(AppContext.BaseDirectory); })
         .ConfigureServices((context, services) =>
         {
             // App Host
@@ -149,10 +150,17 @@ public partial class App : Application
             services.AddTransient<NavigationPage>();
             services.AddTransient<NavigationViewModel>();
             services.AddTransient<NavigationViewPage>();
+            services.AddTransient<MultilevelNavigationPage>();
             services.AddTransient<NavigationViewViewModel>();
             services.AddTransient<TabControlPage>();
             services.AddTransient<TabControlViewModel>();
 
+            // Multilevel navigation sample Pages
+            services.AddTransient<MultilevelNavigationSample>();
+            services.AddTransient<MultilevelNavigationSamplePage1>();
+            services.AddTransient<MultilevelNavigationSamplePage2>();
+            services.AddTransient<MultilevelNavigationSamplePage3>();
+
             // Status and Info
             services.AddTransient<StatusAndInfoPage>();
             services.AddTransient<StatusAndInfoViewModel>();

src/Wpf.Ui.Gallery/ViewModels/Pages/Navigation/MultilevelNavigationSample.cs

@@ -0,0 +1,28 @@
+// This Source Code Form is subject to the terms of the MIT License.
+// If a copy of the MIT was not distributed with this file, You can obtain one at https://opensource.org/licenses/MIT.
+// Copyright (C) Leszek Pomianowski and WPF UI Contributors.
+// All Rights Reserved.
+
+namespace Wpf.Ui.Gallery.ViewModels.Pages.Navigation;
+
+public partial class MultilevelNavigationSample
+{
+    public MultilevelNavigationSample(INavigationService navigationService)
+    {
+        _navigationService = navigationService;
+    }
+
+    private readonly INavigationService _navigationService;
+
+    [RelayCommand]
+    private void NavigateForward(Type type)
+    {
+        _navigationService.NavigateWithHierarchy(type);
+    }
+
+    [RelayCommand]
+    private void NavigateBack()
+    {
+        _navigationService.GoBack();
+    }
+}

src/Wpf.Ui.Gallery/ViewModels/Windows/MainWindowViewModel.cs

@@ -91,6 +91,7 @@ public MainWindowViewModel(IServiceProvider serviceProvider)
             {
                 new NavigationViewItem { Content = "BreadcrumbBar", TargetPageType = typeof(BreadcrumbBarPage) },
                 new NavigationViewItem { Content = "NavigationView", TargetPageType = typeof(NavigationViewPage) },
+                new NavigationViewItem { Content = "Multilevel navigation", TargetPageType = typeof(MultilevelNavigationPage) },
                 new NavigationViewItem { Content = "TabControl", TargetPageType = typeof(TabControlPage) },
             }},
             new NavigationViewItem {Content = "Status and Info", Icon = new SymbolIcon { Symbol = SymbolRegular.ChatBubblesQuestion24  }, TargetPageType = typeof(StatusAndInfoPage), MenuItems = new ObservableCollection<object>

src/Wpf.Ui.Gallery/Views/Pages/Navigation/MultilevelNavigationPage.xaml

@@ -0,0 +1,30 @@
+<Page
+    x:Class="Wpf.Ui.Gallery.Views.Pages.Navigation.MultilevelNavigationPage"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="clr-namespace:Wpf.Ui.Gallery.Views.Pages.Navigation"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:navigation="clr-namespace:Wpf.Ui.Gallery.ViewModels.Pages.Navigation"
+    xmlns:samples1="clr-namespace:Wpf.Ui.Gallery.Views.Pages.Samples"
+    xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
+    Title="MultilevelNavigationPage"
+    d:DataContext="{d:DesignInstance navigation:MultilevelNavigationSample,
+                                     IsDesignTimeCreatable=False}"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    ui:Design.Background="{DynamicResource ApplicationBackgroundBrush}"
+    ui:Design.Foreground="{DynamicResource TextFillColorPrimaryBrush}"
+    Foreground="{DynamicResource TextFillColorPrimaryBrush}"
+    mc:Ignorable="d">
+
+    <Grid>
+        <Button
+            HorizontalAlignment="Center"
+            VerticalAlignment="Center"
+            Command="{Binding NavigateForwardCommand}"
+            CommandParameter="{x:Type samples1:MultilevelNavigationSamplePage1}"
+            Content="Navigate to the first page"
+            FontSize="24" />
+    </Grid>
+</Page>

src/Wpf.Ui.Gallery/Views/Pages/Navigation/MultilevelNavigationPage.xaml.cs

@@ -0,0 +1,22 @@
+// This Source Code Form is subject to the terms of the MIT License.
+// If a copy of the MIT was not distributed with this file, You can obtain one at https://opensource.org/licenses/MIT.
+// Copyright (C) Leszek Pomianowski and WPF UI Contributors.
+// All Rights Reserved.
+
+using Wpf.Ui.Controls.Navigation;
+using Wpf.Ui.Gallery.ViewModels.Pages.Navigation;
+
+namespace Wpf.Ui.Gallery.Views.Pages.Navigation;
+
+public partial class MultilevelNavigationPage : INavigableView<MultilevelNavigationSample>
+{
+    public MultilevelNavigationPage(MultilevelNavigationSample viewModel)
+    {
+        ViewModel = viewModel;
+        DataContext = viewModel;
+
+        InitializeComponent();
+    }
+
+    public MultilevelNavigationSample ViewModel { get; }
+}

src/Wpf.Ui.Gallery/Views/Pages/Samples/MultilevelNavigationSamplePage1.xaml

@@ -0,0 +1,39 @@
+<Page
+    x:Class="Wpf.Ui.Gallery.Views.Pages.Samples.MultilevelNavigationSamplePage1"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:navigation="clr-namespace:Wpf.Ui.Gallery.ViewModels.Pages.Navigation"
+    xmlns:samples1="clr-namespace:Wpf.Ui.Gallery.Views.Pages.Samples"
+    xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
+    Title="MultilevelNavigationSamplePage"
+    d:DataContext="{d:DesignInstance navigation:MultilevelNavigationSample,
+                                     IsDesignTimeCreatable=False}"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    ui:NavigationView.HeaderContent="Page 1"
+    mc:Ignorable="d">
+
+    <Grid>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*" />
+            <ColumnDefinition Width="*" />
+        </Grid.ColumnDefinitions>
+
+        <Button
+            Grid.Column="0"
+            HorizontalAlignment="Center"
+            Command="{Binding NavigateBackCommand}"
+            Content="Navigate back"
+            FontSize="24" />
+
+        <Button
+            Grid.Column="1"
+            HorizontalAlignment="Center"
+            Command="{Binding NavigateForwardCommand}"
+            CommandParameter="{x:Type samples1:MultilevelNavigationSamplePage2}"
+            Content="Navigate to the second page"
+            FontSize="24" />
+    </Grid>
+</Page>

src/Wpf.Ui.Gallery/Views/Pages/Samples/MultilevelNavigationSamplePage1.xaml.cs

@@ -0,0 +1,22 @@
+// This Source Code Form is subject to the terms of the MIT License.
+// If a copy of the MIT was not distributed with this file, You can obtain one at https://opensource.org/licenses/MIT.
+// Copyright (C) Leszek Pomianowski and WPF UI Contributors.
+// All Rights Reserved.
+
+using Wpf.Ui.Controls.Navigation;
+using Wpf.Ui.Gallery.ViewModels.Pages.Navigation;
+
+namespace Wpf.Ui.Gallery.Views.Pages.Samples;
+
+public partial class MultilevelNavigationSamplePage1 : INavigableView<MultilevelNavigationSample>
+{
+    public MultilevelNavigationSamplePage1(MultilevelNavigationSample viewModel)
+    {
+        ViewModel = viewModel;
+        DataContext = viewModel;
+
+        InitializeComponent();
+    }
+
+    public MultilevelNavigationSample ViewModel { get; }
+}

src/Wpf.Ui.Gallery/Views/Pages/Samples/MultilevelNavigationSamplePage2.xaml

@@ -0,0 +1,39 @@
+<Page
+    x:Class="Wpf.Ui.Gallery.Views.Pages.Samples.MultilevelNavigationSamplePage2"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="clr-namespace:Wpf.Ui.Gallery.Views.Pages.Samples"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:navigation="clr-namespace:Wpf.Ui.Gallery.ViewModels.Pages.Navigation"
+    xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
+    Title="MultilevelNavigationSamplePage2"
+    d:DataContext="{d:DesignInstance navigation:MultilevelNavigationSample,
+                                     IsDesignTimeCreatable=False}"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    ui:NavigationView.HeaderContent="Page 2"
+    mc:Ignorable="d">
+
+    <Grid>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*" />
+            <ColumnDefinition Width="*" />
+        </Grid.ColumnDefinitions>
+
+        <Button
+            Grid.Column="0"
+            HorizontalAlignment="Center"
+            Command="{Binding NavigateBackCommand}"
+            Content="Navigate back"
+            FontSize="24" />
+
+        <Button
+            Grid.Column="1"
+            HorizontalAlignment="Center"
+            Command="{Binding NavigateForwardCommand}"
+            CommandParameter="{x:Type local:MultilevelNavigationSamplePage3}"
+            Content="Navigate to the third page"
+            FontSize="24" />
+    </Grid>
+</Page>

src/Wpf.Ui.Gallery/Views/Pages/Samples/MultilevelNavigationSamplePage2.xaml.cs

@@ -0,0 +1,22 @@
+// This Source Code Form is subject to the terms of the MIT License.
+// If a copy of the MIT was not distributed with this file, You can obtain one at https://opensource.org/licenses/MIT.
+// Copyright (C) Leszek Pomianowski and WPF UI Contributors.
+// All Rights Reserved.
+
+using Wpf.Ui.Controls.Navigation;
+using Wpf.Ui.Gallery.ViewModels.Pages.Navigation;
+
+namespace Wpf.Ui.Gallery.Views.Pages.Samples;
+
+public partial class MultilevelNavigationSamplePage2 : INavigableView<MultilevelNavigationSample>
+{
+    public MultilevelNavigationSamplePage2(MultilevelNavigationSample viewModel)
+    {
+        ViewModel = viewModel;
+        DataContext = viewModel;
+
+        InitializeComponent();
+    }
+
+    public MultilevelNavigationSample ViewModel { get; }
+}

src/Wpf.Ui.Gallery/Views/Pages/Samples/MultilevelNavigationSamplePage3.xaml

@@ -0,0 +1,39 @@
+<Page
+    x:Class="Wpf.Ui.Gallery.Views.Pages.Samples.MultilevelNavigationSamplePage3"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="clr-namespace:Wpf.Ui.Gallery.Views.Pages.Samples"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:navigation="clr-namespace:Wpf.Ui.Gallery.ViewModels.Pages.Navigation"
+    xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
+    Title="MultilevelNavigationSamplePage3"
+    d:DataContext="{d:DesignInstance navigation:MultilevelNavigationSample,
+                                     IsDesignTimeCreatable=False}"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    ui:NavigationView.HeaderContent="Page 3"
+    mc:Ignorable="d">
+
+    <Grid>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*" />
+            <ColumnDefinition Width="*" />
+        </Grid.ColumnDefinitions>
+
+        <Button
+            Grid.Column="0"
+            HorizontalAlignment="Center"
+            Command="{Binding NavigateBackCommand}"
+            Content="Navigate back"
+            FontSize="24" />
+
+        <Button
+            Grid.Column="1"
+            HorizontalAlignment="Center"
+            Command="{Binding NavigateForwardCommand}"
+            CommandParameter="{x:Type local:MultilevelNavigationSamplePage1}"
+            Content="Navigate to the third page"
+            FontSize="24" />
+    </Grid>
+</Page>

src/Wpf.Ui.Gallery/Views/Pages/Samples/MultilevelNavigationSamplePage3.xaml.cs

@@ -0,0 +1,22 @@
+// This Source Code Form is subject to the terms of the MIT License.
+// If a copy of the MIT was not distributed with this file, You can obtain one at https://opensource.org/licenses/MIT.
+// Copyright (C) Leszek Pomianowski and WPF UI Contributors.
+// All Rights Reserved.
+
+using Wpf.Ui.Controls.Navigation;
+using Wpf.Ui.Gallery.ViewModels.Pages.Navigation;
+
+namespace Wpf.Ui.Gallery.Views.Pages.Samples;
+
+public partial class MultilevelNavigationSamplePage3 : INavigableView<MultilevelNavigationSample>
+{
+    public MultilevelNavigationSamplePage3(MultilevelNavigationSample viewModel)
+    {
+        ViewModel = viewModel;
+        DataContext = viewModel;
+
+        InitializeComponent();
+    }
+
+    public MultilevelNavigationSample ViewModel { get; }
+}

src/Wpf.Ui.Gallery/Views/Windows/MainWindow.xaml

@@ -28,17 +28,15 @@
         <ui:NavigationView
             x:Name="NavigationView"
             Grid.Row="1"
+            EnableDebugMessages="True"
             FooterMenuItemsSource="{Binding ViewModel.FooterMenuItems, Mode=OneWay}"
-            IsBackButtonVisible="Collapsed"
+            IsBackButtonVisible="Visible"
             IsPaneToggleVisible="False"
             MenuItemsSource="{Binding ViewModel.MenuItems, Mode=OneWay}"
             PaneDisplayMode="Left"
             SelectionChanged="OnNavigationSelectionChanged">
             <ui:NavigationView.Header>
-                <ui:NavigationViewBreadcrumb
-                    Margin="42,32,0,0"
-                    FontSize="28"
-                    FontWeight="DemiBold" />
+                <ui:BreadcrumbBar Margin="42,32,0,0" />
             </ui:NavigationView.Header>
             <ui:NavigationView.AutoSuggestBox>
                 <ui:AutoSuggestBox

src/Wpf.Ui/Common/TypedEventHandler.cs

@@ -0,0 +1,22 @@
+// Based on Windows UI Library
+// Copyright(c) Microsoft Corporation.All rights reserved.
+
+// This Source Code Form is subject to the terms of the MIT License.
+// If a copy of the MIT was not distributed with this file, You can obtain one at https://opensource.org/licenses/MIT.
+// Copyright (C) Leszek Pomianowski and WPF UI Contributors.
+// All Rights Reserved.
+
+using System.Windows;
+
+namespace Wpf.Ui.Common;
+
+/// <summary>
+/// Represents a method that handles general events.
+/// </summary>
+/// <typeparam name="TSender"></typeparam>
+/// <typeparam name="TArgs"></typeparam>
+/// <param name="sender"></param>
+/// <param name="args"></param>
+public delegate void TypedEventHandler<in TSender, in TArgs>(TSender sender, TArgs args)
+    where TSender : DependencyObject
+    where TArgs : RoutedEventArgs;

src/Wpf.Ui/Contracts/INavigationService.cs

@@ -43,4 +43,17 @@ public interface INavigationService
     /// </summary>
     /// <param name="pageIdOrTargetTag">Id or tag of the page.</param>
     bool Navigate(string pageIdOrTargetTag);
+
+    /// <summary>
+    /// Navigates the NavigationView to the previous journal entry. 
+    /// </summary>
+    /// <returns></returns>
+    bool GoBack();
+
+    /// <summary>
+    /// Synchronously adds an element to the navigation stack and navigates current navigation Frame to the
+    /// </summary>
+    /// <param name="pageType"></param>
+    /// <returns></returns>
+    bool NavigateWithHierarchy(Type pageType);
 }