Dockingmanager using MVVM, Caliburn Micro and a nested contentcontrol on a docked usercontrol.

Question

Hi,In my .Net Core 3 demo project, I am trying to use - MVVM pattern- Caliburn Micro- Ribbon- DockingManagerWhen the user selects a person name, I am showing a wpf usercontrol in the dockingmanager that visualizes a detailed view of that person. This usercontrol (ContactDetailView.xaml) contains a contentcontrol (x:Name="ActiveItem" line 37), in which I would like to load other wpf usercontrols when clicking a ribbon button. In the attached sample, I have hooked up the "Overzicht" button (line 76 in the ShellView.xaml on the Ribbon on RibbonTab Client, RibbonBar 'Zorgtrajecten').Clicking it, will result in publishing a new message on the Eventaggregator (ShellViewModel line 43). This is picked up by the ContactDetailViewModel and will trigger Caliburn Micro ActiveItemAsync. However, my wpf usercontrol will not show. Note that you need to select a person name first before clicking the 'Overzicht' button - this is not enforced yet.Also note that for this command (ActiveItemAsync) to be available in the ContactDetailViewModel, I have changed the Workspace class that is also used in the demo project showing DockingManager and Caliburn Micro, to take Conductor

Anirudhan Iyyappan · Answer

Hi NM van Strien, 

Thank for contacting Syncfusion support. 
 
We have checked your query. Currently we are analyzing your sample. We will let you know the further details by June 5th 2020. 
 
Regards, 
Anirudhan

NM van Strien · Answer

Hi Anirudhan,Thank you very much for trying to help me solve this. I tried to implement this solution, but could not yet get it to work.https://stackoverflow.com/questions/60197133/caliburn-micro-how-to-bind-a-specific-item-of-conductor-collection-allactive-tI also tried to create a DataTemplate from the header part (image + name and some demo person details) of the ContactDetailView.xaml in App.xaml. Although I can use this template to render the image of the header on different user controls, I was not able to setup the data bindings. It seems like there are many potential routes to achieve the same goal, but currently I am a bit lost. Kind regards,Niels

Anirudhan Iyyappan · Answer

Hi NM van Strien, 
 
Thanks for your update. 
 
We have analyzed your sample. we are unable to invoke the user control class from an different user control class through an button click. But we can achieved your requirement by using an button click to  view CareTrajectoryView class. Please refer to the below Sample for further details. 
 
Sample: https://www.syncfusion.com/downloads/support/forum/154839/ze/SYNCFU~11410647733 
 
Regards, 
Anirudhan

NM van Strien · Answer

Hi Anirudhan,Thank you for helping me find a solution. I am afraid though that your solution does not solve my problem entirely. Also, I prefer to stick to MVVM, so I prefer to have no code in the the View.cs except for the bare minimum.I have updated and cleaned up my demo, and hope you will consider taking a second look at it. I also hope it will be clearer what I am after.When you compile the code, you now see a 'Demo Button' on the Ribbon. When you click this button, a usercontrol will load showing a person silhouette icon. When you next select a person name from the list, it will render some details of that person. It will update for every new person that is clicked in the person list.I have reorganized my xaml usercontrols so that I will be able to reuse this bit of code (renamed to ClientHeaderView.xaml / ClientHeaderViewModel.cs) above different views (e.g. ContactDetailView and CareTrajectoryView), rather than trying to load these usercontrols below ClientHeaderView. I am unsure which approach is better, but I can't get either to work the way I would like to. A solution should include the ability to update the person's details in the ClientHeader when you select another person from the person list. When you click the button directly right to "Demo Button" (it says Client), it will load the ContactDetailView. The ContactDetailView.xaml contains a contentcontrol in which I would like to render ClientHeaderView.xaml, including its ability to handle show the details of the selected person in the list. Now it only renders the silhouette icon.App.xaml now contains two references to ClientHeaderView / ClientHeaderViewModel, since adding x:Key="" to the datatemplate made the 'Demo Button' click event only show the name of the object.The datatemplate in App.xaml with x:Key="ClientHeader" is rendered above the ContactDetailView, but selecting a person from the list does not result in showing it's next to the person silhouette image. Probably because the content= is missing, but I was hoping that caliburn micro was going to be able to do this magic for me initially, but that unfortunately has not worked.Thanks for any help you may be able to provide.Kind regards,Niels Attachment: SyncFusionDemoApp_bf7ad507.7z

NM van Strien · Answer

Hi Anirudhan,I just realized that an easy way around my problem is to set the ClientHeaderView to DockSide.Top and not try reuse the code in the ContactDetailView and CareTrajectoryView. Instead I can just keep ClientHeaderView visible in position Top as long as I need it. Still, I would want to learn the answer to my updated query should you know a way to achieve reusing the code in the way I indicated.Kind regards,Niels

Anirudhan Iyyappan · Answer

Hi NM van Strien, 

Thanks for your update 

We suspect that your requirement is to get the selected person details in the ContactDetailView as you have achieved in the ClientHeaderView.  Since you haven’t update your ContactDetaiViewModel class. We were unable to get the details of the selected person. That the reason why its render the silhouette icon only. Based on your requirement we have modified your sample please check with below sample link for further references. 

Sample: https://www.syncfusion.com/downloads/support/forum/154839/ze/SYNCFU~1-1031611001 
 
Regards, 
Anirudhan

NM van Strien · Answer

Hi Anirudhan,Thank you for the update. This is what I was looking for to begin with. Thank you so much!I have made one tweak to your solution.Rather than copying all the code from ClientHeaderViewModel into ContactDetailViewmodel (and all the other classes that need this header), I used the ClientHeaderViewModel as a base class to ContactDetailViewModel (i.e. public class ContactDetailViewModel : ClientHeaderViewModel). This way I can keep the code to populate the header in one place. In order for this to work, I needed to add an empty constructor to ClientHeaderViewModel.Case closed. Thank you again. I learned a lot.Kind regards,Niels

Anirudhan Iyyappan · Answer

Hi NM van Strien, 
 
Thanks for you update.  
  
We are glad to know that the reported issue has been resolved at your end. Please let us know if you need any further assistance on this. We are happy to help you as always.  
  
Regards,  
Anirudhan