How to switch between 2 user controls in 1 space

[minewarriorsSchool]

So to give you some information. We have already created a pretty large project that making use of Elmish.WPF in combination with the wpf library of devexpress.com for our UI needs.

For confidential reason I am sadly not able to include a sample project, so I will try my best to describe the situation and issues to the best of my knowledge.

introduction of the situation:
Currently we have our MainWindow.xaml that looks like the following:
<dx:ThemedWindow x:Class="ResourcePlanner.View.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" xmlns:dxwui="http://schemas.devexpress.com/winfx/2008/xaml/windowsui" xmlns:i="http://schemas.microsoft.com/xaml/behaviors" xmlns:templates="clr-namespace:ResourcePlanner.View.Resources" Title="{Binding mainWindowTitle}" Width="auto" Height="auto"> <i:Interaction.Triggers> <i:EventTrigger EventName="Closing"> <i:InvokeCommandAction Command="{Binding CloseMainApplication}" PassEventArgsToCommand="True" /> </i:EventTrigger> <i:EventTrigger EventName="ScrollChanged"> <i:InvokeCommandAction Command="{Binding UpdateUi}" PassEventArgsToCommand="True" /> </i:EventTrigger> </i:Interaction.Triggers> <DockPanel> <Grid> <dxmvvm:Interaction.Behaviors> <dxmvvm:KeyToCommand Command="{Binding ToggleDeveloperMode}" EventName="PreviewKeyUp" KeyGesture="Control + Alt + D" /> </dxmvvm:Interaction.Behaviors> <Grid.RowDefinitions> <RowDefinition Height="auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <templates:Ribbon Grid.Row="0" FilterProjectsCommand="{Binding ElementName=ResourcePlannerResourceView, Path=FilterProjectsCommand}" /> <templates:ResourcePlannerWindow x:Name="ResourcePlannerResourceView" Grid.Row="1" Visibility="Visible" /> </Grid> </DockPanel> </dx:ThemedWindow>
Which looks like the following:

In the resourceplannerwindow there is a UI object from DevExpress that formats our datasource with a command binding.

As you can see the ribbon has 2 buttons : "Resource View" and " Project View".
these buttons are linked to a different command that perform UI action to the ui object from DevExpress (GridControl) so create a different "view" to the user of how data is formatted.

Problem definition
Currently we have already optimized this sequence of ui actions in the command to be as rapid as it can be.
BUT it is still not rapid enough. This command can take up to 3-5 seconds because it is UI intensive.

Suggested solution by UI customer support
First I have already contacted the customer support of DevExpress and asked if we could optimize the way we are doing it now. And simple put, the answer was no. It was already optimized to the best of their knowledge. So they made the following suggestion:
make use of their FrameNavigationService object that inherits INavigationService which is able to cache user controls where it switch between.

Meaning we would have to create 2 separate user controls for the current user control "templates:ResourcePlannerWindow" and switch between them.

According to the documentation of making this work to the DevExpress documentation I would have to make it work like described in "Services in Custom ViewModels".

Question(s) which required the help of the elmish community

1. How would we go to about implementing an IServiceContainer or INavigationService to the Elmish model, switch between the usercontrols with it and still have it's datacontext correctly linked to the MainWindow also? Or is there another way we should go about this?

If this question would be solved it would look something like this:

this would trigger the following questions:

1. How would we still give the FilterProjectscommand the value from the given navigationFrame
2. Our current startElmish method looks like:
   
   as you can see we pass the gridcontrol from the mainview to access it and manipulate it. With the change this would change to 2 gridcontrols, but how would be access those, since they are not defined if we would intergrate it like the 2nd image above.

In advance thanks a lot for your help, time and consideration regarding this issue.

[TysonMN]

I understand that you can't share your code from work.

Can you create a minimal working example though?

Ideally you could also simulate the slow performance, but it would be helpful even if you skipped this part for now.

The one approach I also took when building a WPF application (with or without Elmish.WPF) was to always create all possible views and then use the Visibility properties to only show the one I want the user to see. With this approach, I expect switching between views should be rather instantaneous.

Have you tried that approach?

[minewarriorsSchool]

Hey @TysonMN !

Thanks a lot for your rapid responds. I actually had an epiphany yesterday and managed to solve the main problem I had.

Solution that I in the end went for was to add a custom dependeny property to my ribbon usercontrol and register the navigationfame to it.

then when the button was pressed I passed this property to the command parameter and convert is in Binding.cmdParam.

This way everything stays pure and the gui element stays in the xaml file.

I have considered the visibility thing, but I rather would not do that, since well.... It just does not seems like the nicest solution to me hahahaha.