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 — Rachel
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
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 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

Lee O. Lee O. · Accepted Answer · 2014-07-16T00:42:50

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 Answers