SfNavigationDrawer with MvvmCross views and navigation

[Moustafa Elhagaly]

Hello,

I am trying to implement the SfNavigationDrawer into an application I am working on a digital book collection application using MvvmCross and Syncfusion. I have attached a simplified application to this thread. 

In the simplified application I have a navigationdrawer with two buttons: 

• Home
• Books

Three Views:

• MainWindow (containing the SfNavigationDrawer)
• HomeView
• BooksView

Three ViewModels:

• MainWindowViewModel
• HomeViewModel
• BooksViewModel

I have implemented MVVM pattern throughout my application using the MvvmCross library. My expectation/wish is to load the different views when I click the Home and Books navigation items from the drawer. Unfortunately, I have not managed to get this working. 

Nothing I have tried helps me get the desired views in the ContentView section of the NavigationDrawer when requested. Also, the example applications didn't contain any similar implementations. 

Thanks in advance. 

Attachment: NavigationDrawer_MVVMCROSS_example_4fbb424b.zip

[Suganya Sethuraman]

Hi Moustafa,

Greetings from Syncfusion.

We have analyzed your requirement. We have achieved your requirement by using the SfNavigationDrawer's ItemClicked event, as shown in the code snippet below.

Code Snippet 

        private void navigationDrawer_ItemClicked(object sender, Syncfusion.UI.Xaml.NavigationDrawer.NavigationItemClickedEventArgs e) 

        { 

            if ((string)e.Item.Header == "Home") 

            { 

                ActiveItem.Content = new HomeView(); 

            } 

            else if ((string)e.Item.Header == "Books") 

            { 

                ActiveItem.Content = new BooksView(); 

            } 

        } 

 

Please have a modified sample for your reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/NavigationDrawer_MVVMCROSS_example-272124332

Please check if the sample satisfies your requirement and let us know if you have any concerns.

Regards,
Suganya Sethuraman. 

 

[Moustafa Elhagaly]

Hi Suganya,

Thank you for the quick reply. 

The method you used is using the code-behind way. I am looking for the MVVM implementation using the Bindings, Navigation and Commands. 

Hopefully this clarifies my request.

Thanks in advance!

[Suganya Sethuraman]

Hi Moustafa,

Thanks for your update.

We have analyzed your requirement. We have prepared a sample by using Command binding in NavigationItem of SfNavigationDrawer.

Please have a modified sample,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/NavigationDrawer_MVVMCROSS1643611725

Please check if the sample satisfies your requirement and let us know if you have any concerns.

Regards,
Suganya Sethuraman. 

[Moustafa Elhagaly]

Hi Suganya, 

Thank you a lot for the example. It is almost what I am looking for. 

The command binding, navigation and MVVM are now (still) implemented in the code-behind. What I am looking for is to have that logic in the ViewModel instead of the code-behind. 

I am trying to implement everything using the MVVMCROSS way: https://www.mvvmcross.com/documentation/fundamentals/viewmodel-lifecycle

I have been trying to get it to work, but unfortunately I am stuck and can't convert your example to what I am trying to achieve. 

Hopefully you can help. 

Thanks in advance. 

[Suganya Sethuraman]

Hi Moustafa,

We have analyzed your query. We have prepared a sample by using Command binding in NavigationItem of SfNavigationDrawer.

Please have a sample for your reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/NavigationDrawer_MVVM-249226876

Please check if the sample satisfies your requirement and let us know if you have any concerns.

Regards,
Suganya Sethuraman. 

[Moustafa Elhagaly]

Hi Suganya, 

The logic and binding are still located in the Code-behind of the views. I want to move them to the ViewModels.

As mentioned I have 3 viewmodels, one for each view.

Also I want to make use of the MvxCommand from Mvvmcross instead of another one.

Looking forward to hearing from you.

Regards, 

Moustafa

[Suganya Sethuraman]

Hi Moustafa,

We have analyzed your query. We have prepared a sample using SfNavigationDrawer in MVVM.

Please have a sample for your reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/NavigationDrawer_MVVM-249226876-1761689825

Please check if the sample satisfies your requirement and let us know if you have any concerns.

Regards,
Suganya Sethuraman. 

[Moustafa Elhagaly]

Dear Suganya, 

Thank you for your reply. 

Unfortunately this does not implement the view model lifecycle as proposed by MVVMCROSS. The logic is implemented in the code-behind. 

I have shared two links below to give you more an as to what I wish to achieve. 

https://www.mvvmcross.com/documentation/fundamentals/viewmodel-lifecycle

and

https://www.codeproject.com/Articles/5273075/MvvmCross-for-WPF-A-Basic-Primer

Looking forward to hearing from you!

Kind regards, 

Moustafa

[Suganya Sethuraman]

Hi Moustafa,

Currently we are validating on this, and we will let you know about the complete details on or before August 24, 2021. We appreciate your patience until then.

Regards,
Suganya Sethuraman. 

[Suganya Sethuraman]

Hi Moustafa,

We have analyzed your query. We have prepared a SfNavigationDrawer sample using MVVMCross.

Please have a sample for your reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfNavigation_MVVMCross1807262911

Please check if the sample satisfies your requirement and let us know if you have any concerns.

Regards,
Suganya Sethuraman.