How to handle navigation between views

janter

New member
Joined
Apr 25, 2019
Messages
2
Programming Experience
3-5
I've got a main window that contains a grid of several child views.
It looks like the folling:



With child views, I mean the side menu, top bar that contains a logo, and the orange dashed rectangle.
When clicking an item in de side navigation menu, the main window switches to the corresponding application view. (The "Current application view" in the image).
Some application views have a smaller view that belongs to it. This extra view must be shown in the orange dashed retcangle. In my image, the orange dashed rectangle represents a Border element containing a ContentControl.
For example: I click in the side menu on a menu button "Books". Then the main window changes the current application view to the "Books View". The "Books View" has a corresponding extra view, that contains buttons that act like tabs. This extra view must be shown in the orange dashed rectangle. Now when I click on such a tab button in that orange rectangle, the "Books View" does something, like showing only new books, or borrowed books.

My code is as follows: the side menu (blue) has buttons you can click on. Each button has a command, and a command paramater that is a string saying what application view should be opened.
The command is executed on the mainwindow, the mainwindow code has a switch block. In that switch block the command parameter (which is a string) is used to find which application view has to be created. Like the following:
Code:
switch(viewNameParam) {
    case "books":
        createdView = new BooksView();
        break;
    case "users":
        createdView = new UsersView();
    break;
    // etc.
}
The mainwindow instantiates the correct application view, and via a binding it is put into a ContentControl which is the big white area shown in the image.

My questions are the following:
  1. When instantiating and showing an application view (into the ContentControl in the big white area), how to also add another view into the orange dashed rectangle, while maintaining a reference between that extra view and the application view?
    When the extra view in that orange rectangle contains buttons to operate the application view, how do I get a reference to the application view?
  2. Could it be a good code design option to create the extra view (in the orange rectangle) the same way as I do now with my application views: thus create everything in the switch block, both the application view and the extra view, and set a refererence to each other by properties on them.
  3. Maybe most important reason why I'm asking this question: I would like to keep everything loosely coupled as much as possible. I managed to come quite far with loosely coupling, and would like to find a neat solution for this. This question could be solved by just writing ugly tight coupled codebehind and viewmodel code, but that's not the way to go.

Please let me know if my post is not clear enough or needs some extra information or reasons for my code design so far.
 
Last edited:

Skydiver

Well-known member
Joined
Apr 6, 2019
Messages
291
Location
Virginia Beach, VA
Programming Experience
10+
Start off with Rachel Lim's use of DataTemplate and binding on data types: Navigation with MVVM

For the orange area, you could try also binding that based on data types, or you could try binding that from a property exposed by the view model associated with what is currently in the application view. I'm having a hard time envisioning how to write that binding for the latter, though.
 
Top Bottom