How to replace the details view when toolbar item is invoked?

Question

I have a WPF application using PRISM. The application is divided into two sections. The left pane is a menu pane and the right pane is a details pane. I have a toolbar also in the container pane which is a user control.

Now, I want that when I click the toolbar option I should be able to replace the right pane (details pane) with new user control/window. How can I do that? Currently, I have the following code in the toolbar edit button click which opens a new window I do not want a new window I want to replace the right pane window (details) window.

private void EditButtonClick(object sender, RoutedEventArgs e)
{
    Window userEditWindow = new Window
    {
        Title = "User Edit",
        Content = new UserEdit(),
        Width = 600,
        Height = 600
    };

    userEditWindow.Show();
}

Here is what the user interface looks like:

_______________________________________________________________________
PRISM shell container begins
________________________________________________________________________
                   | User control containing toolbar (edit, new, update, delete)
 menu user control |____________________________________________________
                   |details pane user control
                   |
                   |
__________________________________________________________________                  |_______________________________________________________________

PRISM shell container ends
_________________________________________________________________________

Above you can see the layout of my app! As you can see everything is inside the PRISM shell container. I am handling the events from user control toolbar in the code behind for the usercontrol toolbar as shown above. All I want is to replace the details pane when the toolbar is clicked. But I have no idea how to do that?

I would use a messaging system (PRISM's `EventAggregator`) to broadcast a ChangeContentView message, and have my ViewModel subscribe to receive that kind of message and change the item displayed in the Content pane. If you're interested, I even have a helper wrapper written for PRISM's `EventAggregator` that simplifies how it's used for broadcasting and subscribing messages [on my blog](http://rachel53461.wordpress.com/2011/10/09/simplifying-prisms-eventaggregator/) — Rachel, Jul 15 '14 at 16:00
Thanks @Rachel but that looks awfully complicated. All I want is somehow to replace the details pane with a new window. Is there any other way? — john doe, Jul 15 '14 at 16:04
Assuming your details pane is displayed using a `ContentControl`, you can set `ContentControl.Content` to whatever UserControl you are trying to display instead. I have an example in another answer [here](http://stackoverflow.com/a/12216068/302677) of this style of navigation if you want. Also don't be afraid of PRISM's `EventAggregator`. It's not actually that complex, especially with that helper wrapper, and it makes your life much easier if you're working with the MVVM pattern :) — Rachel, Jul 15 '14 at 16:18

score 0 · Answer 1 · edited May 23 '17 at 12:29

Look back at my answer to your previous question. You can then handle the Toolbar event by switching the DataEntryContext to a new instance of a different DataEntryViewModel and using a DataTemplate the UserControl in your Details Pane will change to reflect that.

In the MainView:

<Window
   //usual window declarations>

   <Window.Resources>
      <DataTemplate DataType="{x:Type vm:FirstDetailViewModel}">
         <view:FirstDetailView />
      </DataTemplate>

      <DataTemplate DataType="{x:Type vm:SecondDetailViewModel}">
         <view:SecondDetailView />
      </DataTemplate>

      //more DataTemplates for other data entry views
   </Window.Resources>

   <Grid>
      <Grid.RowDefinitions>
         <RowDefinition Height="Auto" />
         <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>

      <view:ToolbarView Grid.Row="0"
                        DataContext="{Binding ToolbarContext}" />
      <ContentPresenter Grid.Row="1"
                        Content="{Binding DataEntryContext}" />
   </Grid>
</Window>

In the MainViewModel:

private void ToolbarContext_LoadFirstDetailExecuted(object sender, EventArgs e)
{
   DataEntryContext = new FirstDetailViewModel();
}

private void ToolbarContext_LoadSecondDetailExecuted(object sender, EventArgs e)
{
   DataEntryContext = new SecondDetailViewModel();
}

How to replace the details view when toolbar item is invoked?

1 Answers1

Linked