Ghost1372

everything can be handy

NavigationService

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

Simple Usage

First Create a Class myPageService and inherit from PageServiceEx

then in this class in ctor add your pages with a key into _pageKeyToTypeMap dictionary:

1
2
3
4
5
6
7
8
9
10
11
12
public class myPageService : PageServiceEx
{
    public myPageService()
    {
        _pageKeyToTypeMap = new Dictionary<string, Type>
        {
            { "BlankPage1", typeof(BlankPage1) },
            { "BlankPage2", typeof(BlankPage2) },
            { "BlankPage3", typeof(BlankPage3) },
        };
    }
}

you can also inherit from IPageService

now create a new myPageService class, and here you can set DefaultPage or SettingsPage for NavigationView:

1
2
3
var pageService = new myPageService();
pageService.SetDefaultPage(typeof(HomeLandingsPage));
pageService.SetSettingsPage(typeof(GeneralPage));

after creating myPageService, Create INavigationViewServiceEx and INavigationServiceEx:

1
2
3
4
5
6
INavigationViewServiceEx navigationViewService;
INavigationServiceEx navigationService;

navigationService = new NavigationServiceEx(pageService);
navigationService.Frame = navFrame;
navigationViewService = new NavigationViewServiceEx(navigationService, pageService);

as you can see, we should set Frame in navigationService.

then we should call Initialize Method:

1
navigationViewService.Initialize(navigationView);

now you should add a NavigateTo in your NavigationViewItem:

1
<NavigationViewItem helper:NavigationHelperEx.NavigateTo="BlankPage1" Content="First" />

BlankPage1 is a key, you defined it in myPageService.

Config

there are some config methods:

ConfigAutoSuggestBox

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

1
navigationViewService.ConfigAutoSuggestBox(autoSuggestBox);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<NavigationView Name="navigationView">
    <NavigationView.AutoSuggestBox>
        <AutoSuggestBox Name="autoSuggestBox" />
    </NavigationView.AutoSuggestBox>
    <NavigationView.MenuItems>
        <NavigationViewItem wuc:NavigationHelper.NavigateTo="BlankPage1"
                            Content="First" />
        <NavigationViewItem Content="Second">
            <NavigationViewItem.MenuItems>
                <NavigationViewItem wuc:NavigationHelper.NavigateTo="BlankPage2"
                                    Content="Third" />
                <NavigationViewItem Content="Four">
                    <NavigationViewItem.MenuItems>
                        <NavigationViewItem wuc:NavigationHelper.NavigateTo="BlankPage3"
                                            Content="Five" />
                    </NavigationViewItem.MenuItems>
                </NavigationViewItem>
            </NavigationViewItem.MenuItems>
        </NavigationViewItem>
    </NavigationView.MenuItems>
    <Frame Name="navFrame" />
</NavigationView>

Complete Codes

1
2
3
4
5
6
7
8
9
10
11
12
13
INavigationViewServiceEx navigationViewService;
INavigationServiceEx navigationService;

var pageService = new myPageService();
pageService.SetDefaultPage(typeof(HomeLandingsPage));
pageService.SetSettingsPage(typeof(GeneralPage));

navigationService = new NavigationServiceEx(pageService);
navigationService.Frame = navFrame;

navigationViewService = new NavigationViewServiceEx(navigationService, pageService);
navigationViewService.Initialize(navigationView);
navigationViewService.ConfigAutoSuggestBox(autoSuggestBox);

WinUICommunity

MVVM Pattern

you can use MVVM pattern:

First Register your Services:

1
2
3
4
var services = new ServiceCollection();
services.AddSingleton<IPageServiceEx, myPageService>();
services.AddSingleton<INavigationServiceEx, NavigationServiceEx>();
services.AddTransient<INavigationViewServiceEx, NavigationViewServiceEx>();

then, in your MainViewModel

1
2
3
4
5
6
7
public INavigationServiceEx NavigationService { get; }
public INavigationViewServiceEx NavigationViewService { get; }
public MainViewModel(INavigationServiceEx navigationService, INavigationViewServiceEx navigationViewService)
{
    NavigationService = navigationService;
    NavigationViewService = navigationViewService;
}

finally in your MainPage.xaml.cs

1
2
ViewModel.NavigationService.Frame = frame;
ViewModel.NavigationViewService.Initialize(navigationView);

First Add a NavigationView:

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

then Create a new IJsonNavigationViewService:

1
2
IJsonNavigationViewService jsonNavigationViewService;
jsonNavigationViewService = new JsonNavigationViewService();

now you should call Initialize method with a NavigationView and Frame

1
jsonNavigationViewService.Initialize(navigationView, navFrame);

after that you should call ConfigJson method:

1
jsonNavigationViewService.ConfigJson("DataModel/AppData.json");

Configs

there are some config methods:

ConfigDefaultPage

set Default page for NavigationView

1
jsonNavigationViewService.ConfigDefaultPage(typeof(HomeLandingsPage));

ConfigSettingsPage

set Settings page for NavigationView

1
jsonNavigationViewService.ConfigSettingsPage(typeof(GeneralPage));

ConfigAutoSuggestBox

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
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
jsonNavigationViewService.ConfigAutoSuggestBox(autoSuggestBox);
```            

#### ConfigLocalizer
you can use ILocalizer for localizing resources in json file

step1:

```cs
jsonNavigationViewService.ConfigLocalizer(localizer);
```      

step2:
add `"UsexUid": true` for every item in json file.

step3:
add some resources in your resw files.
for example: 

|Key|Value|
|-|-|
|Nav_HomeTitle|Home|

step4:
copy and paste Key in your json file for `Title` or `subtitle`...

`"Title": "Nav_HomeTitle"`

In the last step, you need to create the json file:
create a new `json` file (`AppData.json`) in a folder called `DataModel`:


{% note warning %}
- Set BuildAction for `AppData.json` to `Content` and if you are in a Unpackaged app, also set `CopyToOutput` to `Always`
{% endnote %}

{% note info %}
To see details and descriptions of Json's properties, refer to <ins>**[this](https://ghost1372.github.io/winUICommunity/jsonFile)**</ins> page
{% endnote %}

{% note warning %}
If you have items that use the same Page, you should set the `parameter` property in the json file to avoid navigation errors.

"UniqueId": "WinUICommunity.DemoApp.Pages.myPage",
"Title": "Movie"
"Parameter": "Movie"

---

"UniqueId": "WinUICommunity.DemoApp.Pages.myPage",
"Title": "Series"
"Parameter": "Series"

{% endnote %}

{% note info %}
When we add page information (key, page) in the dictionary, the key is created as follows (parameter can be null)
UniqueId + Parameter
{% endnote %}

this is a json file content:

```json
{
  "Groups": [
    {
      "UniqueId": "Features",
      "Title": "Features pages",
      "IsSpecialSection": false,
      "Items": [
        {
          "UniqueId": "WinUICommunity.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",
          "ImageIconPath": "ms-appx:///Assets/Modules/PT.png",
          "Description": "test description",
          "IsUpdated": true,
          "IncludedInBuild": true,
          "Links": [
            {
              "Title": "ApplicationDataContainerPage",
              "Uri": "https://ghost1372.github.io/WinUICommunity/helpers/applicationDataContainerHelper/"
            }
          ],
          "Extra": [
            "AppBarToggleButton",
            "AppBarSeparator",
            "CommandBar"
          ]
        },
        {
          "UniqueId": "WinUICommunity.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",
          "ImageIconPath": "ms-appx:///Assets/Modules/PT.png",
          "IncludedInBuild": true,
          "Links": [
            {
              "Title": "AppNotificationPage",
              "Uri": "https://ghost1372.github.io/WinUICommunity/helpers/appNotification/"
            }
          ]
        },
      ]
    },
    {
      "UniqueId": "Settings",
      "Title": "Settings pages",
      "SecondaryTitle": "Test SecondaryTitle",
      "Items": [
        {
          "UniqueId": "WinUICommunity.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",
          "ImageIconPath": "ms-appx:///Assets/Modules/PT.png",
          "IsUpdated": true,
          "IncludedInBuild": true,
        }
      ]
    }
  ]
}

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

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

for Navigating to a Page we used UniqueId.

Methods and Properties

there is some methods and properties that you can use them:

1
2
3
var jsonDataSource = jsonNavigationViewService.DataSource;

jsonNavigationViewService.SearchNavigationViewItems(navigationView.MenuItems, "query")

Complete Codes

1
2
3
4
5
6
7
IJsonNavigationViewService jsonNavigationViewService;
jsonNavigationViewService = new JsonNavigationViewService();
jsonNavigationViewService.Initialize(navigationView, navFrame);
jsonNavigationViewService.ConfigDefaultPage(typeof(HomeLandingsPage));
jsonNavigationViewService.ConfigSettingsPage(typeof(GeneralPage));
jsonNavigationViewService.ConfigJson("DataModel/AppData.json");
jsonNavigationViewService.ConfigAutoSuggestBox(autoSuggestBox);

MVVM Patern

first register a IJsonNavigationViewService service:

1
2
3
4
5
6
7
services.AddSingleton<IJsonNavigationViewService>(factory =>
        {
            var json = new JsonNavigationViewService();
            json.ConfigDefaultPage(typeof(HomeLandingsPage));
            json.ConfigSettingsPage(typeof(SettingsPage));
            return json;
        });

then create a MainPage with a MainViewModel (or any Page you want) and register in service:

1
services.AddTransient<MainViewModel>();

now open you MainViewModel.cs file and get IJsonNavigationViewService in ctor:

1
2
3
4
5
public IJsonNavigationViewService JsonNavigationViewService;
public MainViewModel(IJsonNavigationViewService jsonNavigationViewService)
{
    JsonNavigationViewService = jsonNavigationViewService;
}

in last step we should initialize JsonNavigationViewService in our MainPage:

1
2
3
4
5
6
7
8
9
public MainPage()
{
    ViewModel = App.GetService<MainViewModel>();
    this.InitializeComponent();
    
    ViewModel.JsonNavigationViewService.Initialize(NavView, NavFrame);
    ViewModel.JsonNavigationViewService.ConfigJson("DataModel/AppData.json");
    ViewModel.JsonNavigationViewService.ConfigAutoSuggestBox(ControlsSearchBox);
}

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)
{
    
}

Demo

you can run demo and see this feature.

NavigationWithJson

0%