Feature: Introducing BreadcrumbBar for page navigation

[ChenYiLins]

Description

Use BreadcrumbBar to navigate between pages.

Screenshots

[Jay-o-Way]

Okay so the issue is that, when using the Back button (in the window or on your mouse) var selectedItem = GetSelectedItem(e.SourcePageType); is not set, because user is not using the NavMenu. I think we should remove the dependency on _navigationView.SelectedItem, and try to get the pagetype, and then cross-reference that with the menu, to find the path as is in the menu. For most items, that's only one breadcrumb, for Personalizations (sub-pages), that's two in total.

[Jay-o-Way]

Solved it

[ChenYiLins]

Solved it

Ah, thank you for solving this problem. This is exactly what I am thinking of (using a dictionary to match the parent page).

But the current solution is definitely not what we should use. The current solution is more like a temporary solution. For example, the parent page is not always PersonalizationPage. We should introduce a dictionary into PageService for matching.

[Jay-o-Way]

@ChenYiLins that's quite a change. Can you explain the changes for me, and maybe add some comments in the code? 😇

[ChenYiLins]

maybe add some comments in the code? 😇

Good advice! I'll add a little note in a little bit! And explain. ( •̀ ω •́ )✧

@Jay-o-Way Because I have something to do today, maybe the explanation will come later tomorrow. I'm really sorry.

[ChenYiLins]

@Jay-o-Way I'll briefly explain how I realized the function of BreadcrumbBar.

First of all, I modified the original CustomHeader because the BreadcrumbBar has replaced the header of the navigation bar. The original registration of CustomHeader only needs a string, which is used to display as Header. Now we need to register the BreadcrumbItem class, which is not only displayed as a header, but also added a Tag to navigate to the page.
Just like our NavigationViewItem in the MainWindow:

 <NavigationViewItem
     Content="{helpers:ResourceString Name=Time}"
     Icon="{ui:FontIcon Glyph=&#xE823;}"
     Tag="Time" />
 <NavigationViewItem
     Content="{helpers:ResourceString Name=SystemAreas}"
     Icon="{ui:FontIcon Glyph=&#xEC4E;}"
     Tag="SystemAreas" />

(But the added Tag is actually not needed now, because we don't have multiple nested pages. This is just for future preparation, and we can use it at any time if necessary)

Next is the query about the parent page. I added a dictionary to PageService for the query. And matching function.

// Dictionary
private readonly Dictionary<string, Type> _pageParents = new();

// Query. If Null is returned, this page has no parent page.
public Type? GetPageParents(string key)
{
    Type? pageType;
    lock (_pageParents)
    {
        _pageParents.TryGetValue(key, out pageType);
    }

    return pageType;
}

// Matching
private void Matching<CV, PV>()
    where CV : Page
    where PV : Page
{
    lock (_pageParents)
    {
        var key = typeof(CV).FullName!;
        if (_pageParents.ContainsKey(key))
        {
            throw new ArgumentException($"The key {key} is already matched in PageService");
        }

        var type = typeof(PV);

        _pageParents.Add(key, type);
     }
}

Get the parent page of the page through a loop and export it as a List.

public List<Type> GetPageParentChain(string key)
{
    var parentChain = new List<Type>();
    var currentPageType = GetPageType(key);

    while (currentPageType != null)
    {
        var parentType = GetPageParents(currentPageType.FullName!);
        if (parentType != null)
        {
            parentChain.Insert(0, parentType);
            currentPageType = parentType;
        }
        else
        {
            // No more parents found, exit the loop
            break;
        }
    }

    return parentChain;
}

In NavigationService, I hardly modified the original function. I just changed the handling of CustomHeader to HandleCustomBreadcrumbPage. HandleCustomBreadcrumbPage can get the top-level parent page so that it can be selected in NavigationView (this is necessary, we should let the page follow where it came from and then return to it. Not because the user has not operated the NavigationView, which is an incorrect way to handle it) The code after that is similar to the code you push, so add BreadcrumbBarItem one by one. Include the Tag of each item, so that we can use BreadcrumbBar to navigate correctly:

private bool IsMenuItemForPageType(NavigationViewItem menuItem, Type sourcePageType)
{
    if (menuItem.Tag is string pageKey)
    {
        pageKey = "AutoDarkModeApp.ViewModels." + pageKey + "ViewModel";
        return _pageService.GetPageType(pageKey) == sourcePageType;
    }
    return false;
}

This is basically about its complete realization. If you have any questions, please feel free to ask!

[Jay-o-Way]

Haha well I see you know alot more about this than I do 😅👍
The most important thing is that it works. So LGTM.

[Spiritreader]

@ChenYiLins I see! So you're registering Pages that have a child via the Matching method instead of Configure in the PageService that we already use to resolve the navigation path, allowing you to recall the history for each option. Nice solution!

[Spiritreader]

Brotkrumen

[Armin2208]

Brotkrumen

Exakt