Ghost1372

everything can be handy

JsonNavigationService

Easily implement a NavigationView With Json file (we read navigationview items from a json file)

First Add a NavigationView:

1
2
3
4
5
6
7
<NavigationView x:Name="NavView">
    <NavigationView.AutoSuggestBox>
        <AutoSuggestBox x:Name="autoSuggestBox">
        </AutoSuggestBox>
    </NavigationView.AutoSuggestBox>
    <Frame x:Name="NavFrame"/>
</NavigationView>

then Create a new IJsonNavigationService:

1
2
IJsonNavigationService jsonNavigationService;
jsonNavigationService = new JsonNavigationService();

now you should call Initialize method with a NavigationView, Frame and PageDictionary

for PageDictionary, Create a new T4 template and Copy-Paste following Script, this script help you to Auto Generate it:

Due to the limitation in using reflection in AOT, we have to use the following method

  • Replace $T4_NAMESPACE$ with your app namespace
1
2
3
jsonNavigationService
                .Initialize(NavView, NavFrame, NavigationPageMappings.PageDictionary)
                .ConfigureJsonFile("Assets/NavViewMenu/AppData.json");

T4 Template:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<#@ template language="C#" hostspecific="true" #>
<#@ output extension=".cs" #>
<#@ assembly name="System.IO" #>
<#@ assembly name="System.Text.Json" #>
<#@ assembly name="System.Memory" #>
<#@ import namespace="System.IO" #>
<#@ import namespace="System.Text.Json" #>
<#@ assembly name="System.Core" #>
<#@ import namespace="System.Linq" #>
<#@ assembly name="System.Xml" #>
<#@ assembly name="System.Xml.Linq" #>
<#@ import namespace="System.Xml.Linq" #>
<#@ import namespace="System.Collections.Generic" #>
// -----------------------------------------------------------------------------------------------------
// | <auto-generated>                                                                                  |
// |    This code was generated by a tool.                                                             |
// |                                                                                                   |
// |    Changes to this file may cause incorrect behavior and will be lost if the code is regenerated. |
// | </auto-generated>                                                                                 |
// -----------------------------------------------------------------------------------------------------

// Define JSON file path variable for easy adjustment
<# string JSON_FILE_PATH = "AppData.json"; #>
using System;
using System.Collections.Generic;

namespace $T4_NAMESPACE$;
public partial class NavigationPageMappings
{
    public static Dictionary<string, Type> PageDictionary { get; } = new Dictionary<string, Type>
    {
<#
// Helper method for recursive parsing
void ProcessItems(JsonElement items, List<string> xamlPages)
{
    foreach (JsonElement item in items.EnumerateArray())
    {
        string uniqueId = item.GetProperty("UniqueId").GetString();
        string parameter = item.TryGetProperty("Parameter", out JsonElement param) ? param.GetString() : string.Empty;
        string sectionId = item.TryGetProperty("SectionId", out JsonElement secId) ? secId.GetString() : null;

        if (string.IsNullOrEmpty(sectionId))
        {
            // Look for the xamlClass using uniqueId
            string xamlClass = xamlPages.FirstOrDefault(x => x.Equals(uniqueId));

            if (!string.IsNullOrEmpty(xamlClass))
            {
#>
        {"<#= uniqueId #>", typeof(<#= xamlClass #>)},
<#
            }
        }
        else
        {
            // Look for the xamlClass using sectionId
            string xamlClass = xamlPages.FirstOrDefault(x => x.Equals(sectionId));

            if (!string.IsNullOrEmpty(xamlClass))
            {
#>
        {"<#= uniqueId #>", typeof(<#= xamlClass #>)},
<#
            }
        }

        // Recursively process nested Items
        if (item.TryGetProperty("Items", out JsonElement nestedItems) && nestedItems.ValueKind == JsonValueKind.Array)
        {
            ProcessItems(nestedItems, xamlPages); // Recursive call
        }
    }
}

string jsonFilePath = string.Empty;
List<string> xamlPages = null;
string rootDirectory = FindProjectRoot(Path.GetDirectoryName(Host.TemplateFile));
if (rootDirectory != null)
{
    jsonFilePath = FindJsonFile(rootDirectory, JSON_FILE_PATH);
    xamlPages = GetXamlClasses(rootDirectory);
}

if (File.Exists(jsonFilePath))
{
    string jsonContent = File.ReadAllText(jsonFilePath);
    using (JsonDocument jsonDoc = JsonDocument.Parse(jsonContent))
    {
        JsonElement root = jsonDoc.RootElement;
        if (root.TryGetProperty("Groups", out JsonElement groups) && groups.ValueKind == JsonValueKind.Array)
        {
            foreach (JsonElement group in groups.EnumerateArray())
            {
                if (group.TryGetProperty("Items", out JsonElement items) && items.ValueKind == JsonValueKind.Array)
                {
                    ProcessItems(items, xamlPages); // Call the recursive method
                }
            }
        }
    }
}
else
{
#>
        //Json file not found.
<#
}
#>
    };
}
<#+
// Helper function to load XAML classes
List<string> GetXamlClasses(string projectDirectory)
{
    var xamlClasses = new List<string>();
    var xamlFiles = Directory.GetFiles(projectDirectory, "*.xaml", SearchOption.AllDirectories);

    foreach (var file in xamlFiles)
    {
        // Filter out files that belong to other projects (assumed by the presence of 'obj' or 'bin' folders)
        if (file.Contains($"{Path.DirectorySeparatorChar}obj{Path.DirectorySeparatorChar}") ||
            file.Contains($"{Path.DirectorySeparatorChar}bin{Path.DirectorySeparatorChar}"))
        {
            continue;
        }

        XDocument xamlDoc = null;
        try
        {
            xamlDoc = XDocument.Load(file);
        }
        catch
        {
            continue;
        }

        XElement rootElement = xamlDoc.Root;
        if (rootElement != null && rootElement.Name.LocalName != "Window" &&
            rootElement.Name.LocalName != "Application" &&
            rootElement.Name.LocalName != "ResourceDictionary")
        {
            XAttribute classAttribute = rootElement.Attribute(XName.Get("Class", "http://schemas.microsoft.com/winfx/2006/xaml"));
            if (classAttribute != null)
            {
                xamlClasses.Add(classAttribute.Value);
            }
        }
    }

    return xamlClasses;
}

// Helper function to find JSON file
string FindJsonFile(string directory, string fileName)
{
    string[] files = Directory.GetFiles(directory, fileName, SearchOption.AllDirectories);
    return files.Length > 0 ? files[0] : null;
}

string FindProjectRoot(string directory)
{
    while (!string.IsNullOrEmpty(directory))
    {
        // Check for .csproj or .sln files in the current directory
        if (Directory.GetFiles(directory, "*.csproj", SearchOption.TopDirectoryOnly).Any() ||
            Directory.GetFiles(directory, "*.sln", SearchOption.TopDirectoryOnly).Any())
        {
            return directory; // Found the project root
        }

        // Move one level up in the directory hierarchy
        directory = Directory.GetParent(directory)?.FullName;
    }

    return null; // No project root found
}
#>

Visual Studio cannot automatically generate T4 files, to solve this problem we need to create a target to generate all T4 files when building the project.

1
2
3
4
5
6
7
8
9
<Target Name="TransformAllT4Templates" BeforeTargets="BeforeBuild">
  <ItemGroup>
    <!-- This picks up all T4 templates in the project -->
    <T4Template Include="**\*.tt" />
  </ItemGroup>

  <!-- Check if TextTransform.exe exists before running -->
  <Exec Command="if exist &quot;$(DevEnvDir)TextTransform.exe&quot; &quot;$(DevEnvDir)TextTransform.exe&quot; &quot;%(T4Template.FullPath)&quot;" Condition="Exists('$(DevEnvDir)TextTransform.exe')" />
</Target>

Configs

there are some configure methods:

ConfigureDefaultPage

set Default page for NavigationView

1
Initializ(...).ConfigureDefaultPage(typeof(HomeLandingsPage));

ConfigureSettingsPage

set Settings page for NavigationView

1
Initializ(...).ConfigureSettingsPage(typeof(GeneralPage));

ConfigureAutoSuggestBox

You can search in the autosuggestbox and be navigated to the results page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Initializ(...).ConfigureAutoSuggestBox(autoSuggestBox);
```            

## ConfigureBreadcrumbBar
for `PageDictionary`, Create a new T4 template and Copy-Paste following Script, this script help you to Auto Generate it:

{% note info %}
Due to the limitation in using reflection in AOT, we have to use the following method
{% endnote %}

{% note warning %}
- Replace `$T4_NAMESPACE$` with your app namespace
{% endnote %}

it is better to place `BreadcrumbNavigator` in `NavigationView.Header`

```xml
<NavigationView.Header>
    <dev:BreadcrumbNavigator x:Name="BreadCrumbNav" />
</NavigationView.Header>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
Initializ(...).ConfigureBreadcrumbBar(BreadCrumbNav, NavigationPageMappings.PageDictionary);
```            

use `dev:BreadcrumbNavigator.PageTitle` and `dev:BreadcrumbNavigator.IsHeaderVisible` attached properties on your pages, for Title and Header visiblity.

```t4
<#@ template language="C#" hostspecific="true" #>
<#@ output extension=".cs" #>
<#@ assembly name="System.IO" #>
<#@ assembly name="System.Text.Json" #>
<#@ assembly name="System.Memory" #>
<#@ import namespace="System.IO" #>
<#@ import namespace="System.Text.Json" #>
<#@ assembly name="System.Core" #>
<#@ import namespace="System.Linq" #>
<#@ assembly name="System.Xml" #>
<#@ assembly name="System.Xml.Linq" #>
<#@ import namespace="System.Xml.Linq" #>
<#@ import namespace="System.Collections.Generic" #>
// -----------------------------------------------------------------------------------------------------
// | <auto-generated>                                                                                  |
// |    This code was generated by a tool.                                                             |
// |                                                                                                   |
// |    Changes to this file may cause incorrect behavior and will be lost if the code is regenerated. |
// | </auto-generated>                                                                                 |
// -----------------------------------------------------------------------------------------------------
using System;
using System.Collections.Generic;

namespace $T4_NAMESPACE$;
public partial class BreadcrumbPageMappings
{
    public static Dictionary<Type, BreadcrumbPageConfig> PageDictionary = new()
    {
<#
// Get the directory of the project
string rootDirectory = FindProjectRoot(Path.GetDirectoryName(Host.TemplateFile));
List<string> xamlFiles = GetXamlClasses(rootDirectory);
foreach (var file in xamlFiles)
{
    try
    {
        string content = File.ReadAllText(file);
        string relativePath = GetRelativePath(rootDirectory, file);
        ExtractAttachedProperties(content);
    }
    catch (Exception ex)
    {
#> 
        // Output an error message as comment in the generated file
        <#= $"// Error loading XAML file: {file} - {ex.Message}" #>
<# 
    }
}

void ExtractAttachedProperties(string content)
{
    // Extract the Type from the x:Class attribute
    string xClassValue = GetXClassValue(content);
    if (string.IsNullOrEmpty(xClassValue))
    {
        return; // Skip if no x:Class found
    }

    string pageTitle = GetAttachedPropertyValue("BreadcrumbNavigator.PageTitle", content);
    string isHeaderVisible = GetAttachedPropertyValue("BreadcrumbNavigator.IsHeaderVisible", content);
    string clearCache = GetAttachedPropertyValue("BreadcrumbNavigator.ClearCache", content);

    // Using ternary operators to set values or default to empty strings
    string title = !string.IsNullOrEmpty(pageTitle) ? pageTitle : string.Empty;

    // Convert to bool based on string value directly
    bool isHeaderVisibile = isHeaderVisible?.Equals("True", StringComparison.OrdinalIgnoreCase) ?? false;
    bool clearNavigation = clearCache?.Equals("True", StringComparison.OrdinalIgnoreCase) ?? false;

    if (string.IsNullOrEmpty(title) && string.IsNullOrEmpty(isHeaderVisible) && string.IsNullOrEmpty(clearCache))
    {
        return;
    }
#>
        <#= $"{{typeof({xClassValue}), new BreadcrumbPageConfig {{ PageTitle = {(string.IsNullOrEmpty(title) ? "null" : $"\"{title}\"")}, IsHeaderVisible = {isHeaderVisibile.ToString().ToLower()}, ClearNavigation = {clearNavigation.ToString().ToLower()}}}}}," #>
<#
}
string GetXClassValue(string content)
{
    // Simple regex to match x:Class attribute
    var match = System.Text.RegularExpressions.Regex.Match(content, @"x:Class=""([^""]+)""");
    if (match.Success && match.Groups.Count > 1)
    {
        return match.Groups[1].Value; // Return the matched class value
    }
    return null;
}

string GetAttachedPropertyValue(string propertyName, string content)
{
    // Find the property assignment in the content
    var lines = content.Split(new[] { '\r', '\n' }, StringSplitOptions.RemoveEmptyEntries);
    foreach (var line in lines)
    {
        if (line.Contains(propertyName))
        {
            // Extract the value after '=' and before the next ';' or new line
            int startIndex = line.IndexOf('=') + 1;
            int endIndex = line.IndexOf(';', startIndex);
            if (endIndex == -1) endIndex = line.Length;

            string value = line.Substring(startIndex, endIndex - startIndex).Trim().Trim('"');
            return value;
        }
    }
    return null;
}

List<string> GetXamlClasses(string projectDirectory)
{
    var xamlClasses = new List<string>();
    var xamlFiles = Directory.GetFiles(projectDirectory, "*.xaml", SearchOption.AllDirectories);

    foreach (var file in xamlFiles)
    {
        // Filter out files that belong to other projects (assumed by the presence of 'obj' or 'bin' folders)
        if (file.Contains($"{Path.DirectorySeparatorChar}obj{Path.DirectorySeparatorChar}") ||
            file.Contains($"{Path.DirectorySeparatorChar}bin{Path.DirectorySeparatorChar}"))
        {
            continue;
        }

        XDocument xamlDoc = null;
        try
        {
            xamlDoc = XDocument.Load(file);
        }
        catch
        {
            continue;
        }

        XElement rootElement = xamlDoc.Root;
        if (rootElement != null && rootElement.Name.LocalName != "Window" &&
            rootElement.Name.LocalName != "Application" &&
            rootElement.Name.LocalName != "ResourceDictionary")
        {
            XAttribute classAttribute = rootElement.Attribute(XName.Get("Class", "http://schemas.microsoft.com/winfx/2006/xaml"));
            if (classAttribute != null)
            {
                xamlClasses.Add(file);
            }
        }
    }

    return xamlClasses;
}

string GetRelativePath(string basePath, string fullPath)
{
    Uri baseUri = new Uri(basePath + Path.DirectorySeparatorChar);
    Uri fullUri = new Uri(fullPath);
    return baseUri.MakeRelativeUri(fullUri).ToString().Replace('/', Path.DirectorySeparatorChar);
}
string FindProjectRoot(string directory)
{
    while (!string.IsNullOrEmpty(directory))
    {
        // Check for .csproj or .sln files in the current directory
        if (Directory.GetFiles(directory, "*.csproj", SearchOption.TopDirectoryOnly).Any() ||
            Directory.GetFiles(directory, "*.sln", SearchOption.TopDirectoryOnly).Any())
        {
            return directory; // Found the project root
        }

        // Move one level up in the directory hierarchy
        directory = Directory.GetParent(directory)?.FullName;
    }

    return null; // No project root found
}
#>
    };
}

Visual Studio cannot automatically generate T4 files, to solve this problem we need to create a target to generate all T4 files when building the project.

1
2
3
4
5
6
7
8
9
<Target Name="TransformAllT4Templates" BeforeTargets="BeforeBuild">
  <ItemGroup>
    <!-- This picks up all T4 templates in the project -->
    <T4Template Include="**\*.tt" />
  </ItemGroup>

  <!-- Check if TextTransform.exe exists before running -->
  <Exec Command="if exist &quot;$(DevEnvDir)TextTransform.exe&quot; &quot;$(DevEnvDir)TextTransform.exe&quot; &quot;%(T4Template.FullPath)&quot;" Condition="Exists('$(DevEnvDir)TextTransform.exe')" />
</Target>

ConfigureSectionPage

if you want to click on a group and see list of items, you can use SectionPage:

1
Initializ(...).ConfigureSectionPage(typeof(DemoSectionPage));

more details about SectionPage

ConfigureTitleBar

you can use ConfigureTitleBar to automatically handle BackButton and PaneToggleButton

1
Initializ(...).ConfigureTitleBar(AppTitleBar);

Complete Codes

1
2
3
4
5
6
7
8
9
10
IJsonNavigationService jsonNavigationService;
jsonNavigationService = new JsonNavigationService();
jsonNavigationService
                .Initialize(NavView, NavFrame, NavigationPageMappings.PageDictionary)
                .ConfigureDefaultPage(typeof(HomeLandingPage))
                .ConfigureSettingsPage(typeof(SettingsPage))
                .ConfigureSectionPage(typeof(DemoSectionPage))
                .ConfigureJsonFile("Assets/NavViewMenu/AppData.json")
                .ConfigureAutoSuggestBox(HeaderAutoSuggestBox)
                .ConfigureBreadcrumbBar(JsonBreadCrumbNavigator, BreadcrumbPageMappings.PageDictionary);

Make sure to call ConfigureJsonFile method after ConfigureDefaultPage, this will ensure the default page loads properly in initial load.

MVVM Patern

first register a IJsonNavigationService service:

1
services.AddSingleton<IJsonNavigationService, JsonNavigationService>();

then:

1
2
3
4
5
6
7
8
9
10
11
12
public MainPage()
{
    this.InitializeComponent();
    var navService = App.GetService<IJsonNavigationService>() as JsonNavigationService;
    
    navService.Initialize(NavView, NavFrame, NavigationPageMappings.PageDictionary)
            .ConfigureDefaultPage(typeof(HomeLandingPage))
            .ConfigureSettingsPage(typeof(SettingsPage))
            .ConfigureSectionPage(typeof(DemoSectionPage))
            .ConfigureJsonFile("Assets/NavViewMenu/AppData.json")
            .ConfigureAutoSuggestBox(HeaderAutoSuggestBox);
}

Make sure to call ConfigureJsonFile method after ConfigureDefaultPage, this will ensure the default page loads properly in initial load.

INavigationAwareEx

you can use INavigationAwareEx in your ViewModel and you can access to OnNavigatedFrom and OnNavigatedTo methods.

1
2
3
4
5
6
7
8
9
10
11
12
public partial class myViewModel : INavigationAwareEx

public void OnNavigatedFrom()
{

}

public async void OnNavigatedTo(object parameter)
{
    
}

you should set DataContext, otherwise you cant use this interface.

1
2
3
4
5
6
7
8
public myViewModel ViewModel {get;}

public BlankPage()
{
    ViewModel = App.GetService<myViewModel>();
    DataContext = ViewModel;
    this.InitializeComponent();
}

Notes

If you want to use Frame.GoBack to navigate back in the frame while maintaining the correct NavigationViewItem selection, you should use JsonNavigationService.GoBack instead. This ensures that the NavigationView stays in sync with the current page.

Localize Strings

you can use our built-in ResourceManager/ResourceContext or you can define your specific ResourceManager/ResourceContext in ConfigureJsonFile.

step1:
add "UsexUid": true for every item you want in json file.

step2:
add some resources in your resw files. you should follow WinUI resource naming.
for example:

Key Value
Nav_HomeTitle.Title Home
Nav_HomeTitle.SecondaryTitle My Home
Nav_HomeTitle.Subtitle First Page
Nav_HomeTitle.Description See Whats new!

step3:
use your key in LocalizeId field in json file.

"LocalizeId": "Nav_HomeTitle"

  • Set BuildAction for AppData.json to Content and if you are in a Unpackaged app, also set CopyToOutput to Always

To see details and descriptions of Json’s properties, refer to this page

If you have items that use the same Page, you should set the parameter property in the json file to avoid navigation errors.

“UniqueId”: “DevWinUI.DemoApp.Pages.myPage”,
“Title”: “Movie”
“Parameter”: “Movie”

“UniqueId”: “DevWinUI.DemoApp.Pages.myPage”,
“Title”: “Series”
“Parameter”: “Series”

this is a json file content:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
{
  "Groups": [
    {
      "UniqueId": "Features",
      "Title": "Features pages",
      "IsSpecialSection": false,
      "Items": [
        {
          "UniqueId": "DevWinUI.DemoApp.Pages.ApplicationDataContainerPage",
          "Title": "ApplicationDataContainer",
          "SecondaryTitle": "Test SecondaryTitle",
          "Subtitle": "you can use ApplicationDataContainerHelper for saving and loading application settings.",
          "ImagePath": "ms-appx:///Assets/Modules/PT.png",
          "Description": "test description",
          "IsUpdated": true,
          "IncludedInBuild": true,
          "Links": [
            {
              "Title": "ApplicationDataContainerPage",
              "Uri": "https://DevWinUI.github.io/DevWinUI/helpers/applicationDataContainerHelper/"
            }
          ],
          "Extra": [
            "AppBarToggleButton",
            "AppBarSeparator",
            "CommandBar"
          ]
        },
        {
          "UniqueId": "DevWinUI.DemoApp.Pages.AppNotificationPage",
          "Title": "App Notification",
          "SecondaryTitle": "Test SecondaryTitle",
          "Subtitle": "you can use AppNotificationPage for Sending Toast Notification.",
          "ImagePath": "ms-appx:///Assets/Modules/PT.png",
          "IncludedInBuild": true,
          "Links": [
            {
              "Title": "AppNotificationPage",
              "Uri": "https://DevWinUI.github.io/DevWinUI/helpers/appNotification/"
            }
          ]
        },
      ]
    },
    {
      "UniqueId": "Settings",
      "Title": "Settings pages",
      "SecondaryTitle": "Test SecondaryTitle",
      "Items": [
        {
          "UniqueId": "DevWinUI.DemoApp.Pages.OobePage",
          "Title": "Oobe Page",
          "ApiNamespace": "DemoApp",
          "SecondaryTitle": "Test SecondaryTitle",
          "Subtitle": "Settings Page with a Hero Image",
          "ImagePath": "ms-appx:///Assets/Modules/PT.png",
          "IsUpdated": true,
          "IncludedInBuild": true,
        }
      ]
    }
  ]
}

  • UniqueId
    this is your pages full address, for example: DevWinUI.DemoApp.Pages.ApplicationDataContainerPage

  • ApiNamespace
    this is your apps namespace, for example: DevWinUI.DemoApp

for Navigating to a Page we used UniqueId.

Demo

you can run demo and see this feature.

NavigationWithJson

0%