Now can I get a View to instantiate another View that appears above it like a DialogueBox?

Question

I just completed a "dialogue-box solution" for my WPF/MVVM application in which the ViewModel changes its ViewModel properities, and the View uses triggers to accordingly display and hide the dialogue box, etc. From a UX experience it is satisfactory.

However, the "dialogue box" that I use is a Border element which gets its Visibility property switched between Visible and Collapsed, so it doesn't really "pop up" but just kind of "pops into" the application.

So I want to expand my solution so that the dialogue box actually pops up like a classic MessageBox.

Currently I have this:

<Style x:Key="DialogueBoxDelete" TargetType="Border">
    <Style.Triggers>
        <DataTrigger Binding="{Binding DialogueBoxDeleteStatus}" Value="show">
            <Setter Property="Border.Visibility" Value="Visible"/>
        </DataTrigger>
        <DataTrigger Binding="{Binding DialogueBoxDeleteStatus}" Value="hide">
            <Setter Property="Border.Visibility" Value="Collapsed"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

Since I understand that it's important for the testability of MVVM that my ViewModel does not instantiate my DialogueBox View but that my View instantiates the DialogueBox View, I'm thinking I would need something like this:

PSEUDO-CODE:

<Style x:Key="DialogueBoxDelete" TargetType="Border">
    <Style.Triggers>
        <DataTrigger Binding="{Binding DialogueBoxDeleteStatus}" Value="show">
            <InstantiateDialogueWindow .../>
        </DataTrigger>
        <DataTrigger Binding="{Binding DialogueBoxDeleteStatus}" Value="hide">
            <RemoveWindow.../>
        </DataTrigger>
    </Style.Triggers>
</Style>

But what is the syntax for this? How can my UserControl instantiate another Window which floats above the current application?

Answer 1

Easy in code-behind. Just do new Window(), set its Content and Owner properties, and call Show().

If you're looking for a way to do it in XAML, though, I'm not sure there is one. I know you can't embed a <Window> element as a XAML child node (I've tried). You can look at the Popup control, but that's not ideal because it won't have a title bar, resize borders, etc. It will be able to extend outside your window's borders, but otherwise it won't be any better than your Border. It won't look like a dialog box.

But honestly, I'm not sure I would do this from the View. You may want to consider having the ViewModel (which has all the display logic, after all) be the thing that decides when and how to display more GUI. See this question on how to display GUI from the ViewModel (without making the ViewModel dependent on the View code).