SfNavigationDrawer with MvvmCross views and navigation

Question

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: HomeBooksThree Views:MainWindow (containing the SfNavigationDrawer)HomeViewBooksViewThree ViewModels:MainWindowViewModelHomeViewModelBooksViewModelI 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 · Accepted Answer

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.

Suganya Sethuraman · Answer

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 · Answer

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!

Moustafa Elhagaly · Answer

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 · Answer

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-249226876Please check if the sample satisfies your requirement and let us know if you have any concerns.Regards,Suganya Sethuraman.

Moustafa Elhagaly · Answer

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 · Answer

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 · Answer

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 · Answer

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 · Answer

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_MVVMCross1807262911Please check if the sample satisfies your requirement and let us know if you have any concerns.Regards,Suganya Sethuraman.