WPF MVVM Advice on Pop up Searches

Question

I am pretty new to the WPF MVVM model so please bear with me. I am trying to write a stock management system. I have a maintenance page that I successfully link to my viewmodels. However I would like to enable a search control that I can trigger from the maintenance page to popup a grid where a user can search for an item, select it and return to the maintenance screen with the selected item being showm.

How would it be best to implement this type of functionality in MVVM ? The search button on the maintenance screen can be linked to a search ICommand but the Viewmodel has no knowledge of the UI so it would not know to show what the name of the search control is or how to show it. The only think I can think of is to write the search button event in code behind on the UI but doesnt this break the MVVM pattern ?

Thanks in advance and apologies if this is a stupid question.

actually putting piece of code on code behind won't break the pattern. the key point of MVVM is posibility to unit test the view logic (viewmodel) without existence of the veiw. — ktutnik, Jul 09 '12 at 10:27

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

A good way to solve your problem is using the User Interaction Patterns.

In terms of the MVVM pattern, the view model is responsible for initiating an interaction with the user and for consuming and processing any response, while the view is responsible for actually managing the interaction with the user using whatever user experience is appropriate. Preserving the separation of concerns between the presentation logic implemented in the view model, and the user experience implemented by the view, helps to improve testability and flexibility.

There are two common approaches to implementing these kinds of user interactions in the MVVM pattern. One approach is to implement a service that can be used by the view model to initiate interaction with the user, thereby preserving its independence on the view's implementation. Another approach uses events raised by the view model to express the intent to interact with the user, along with components in the view that are bound to these events and that manage the visual aspects of the interaction.

This is a MVVM pattern for doing DialogServices etc. so it will fit your requirement, too.

Benjamin Gale · Accepted Answer · 2017-01-24T19:50:28.190

The main problem here is how to display the search popup in an MVVM friendly way. I have an example on my github account of a custom control that is designed for this very purpose (full source code is available to download).

The control can be used like this:

<c:ModalContentPresenter IsModal="{Binding DialogIsVisible}">

    <!-- This is the main content e.g. your maintenance screen -->
    <TabControl Margin="5">
            <Button Margin="55"
                    Padding="10"
                    Command="{Binding ShowModalContentCommand}">
                This is the primary Content
            </Button>
        </TabItem>
    </TabControl>

    <c:ModalContentPresenter.ModalContent>
        <!-- This is the modal content e.g. your search popup -->
        <Button Margin="75"
                Padding="50"
                Command="{Binding HideModalContentCommand}">
            This is the modal content
        </Button>
    </c:ModalContentPresenter.ModalContent>

</c:ModalContentPresenter>

The modal content is displayed directly over the primary content (in your case the maintenance screen) and its visibility is controlled by the IsModal property which can be bound to a property in your viewModel. This property would be set to true by the search command and your search grid would be displayed in front of the maintenance screen.

Your search screen 'view' would have a close button which is bound to another ICommand object which simply sets the property to false and hide the popup content.

Note that there is no need to 'pass' any information around as both the primary and modal content is managed by the same control so they both share the same DataContext which in your case will be a reference to your viewModel.

Thanks Benjamin, I successfully implemented this on my Stock Maintenance screen. — Oliver, Jul 10 '12 at 10:44
Excellent. I am glad someone else has been able to put this to use. — Benjamin Gale, Jul 10 '12 at 11:01

score 0 · Answer 3 · answered Jul 09 '12 at 09:44

To avoid direct coupling between the UI and viewmodels I've previously used a Mediator to forward the creation of the new UI element back to the UI classes. However, I've never been entirely convinced by this approach so would be interested to see if anyone has any better solutions.

score 0 · Answer 4 · edited May 23 '17 at 10:29

if you mean Dialog when writing popup then i would use a Dialog Service like this one.

in your maintenance viewmodel opencommand:

var result = this.uiDialogService.ShowDialog("Dialogwindow title goes here", dialogwindowVM);//in your case the viewmodel for your search

//check the result and just take the SelectedItem from your dialogwindowVM
if(result)
  this._selected = dialogwindowVM.MySelectedItem;

WPF MVVM Advice on Pop up Searches

4 Answers4