What is the best way to add a popup to the visual tree when using MVVM on WP7

Question

I am using MVVM through Caliburn Micro on WP7. I have a popup that is shown in a virtual machine. A popup window displays a performance indicator. The progress bar does not show when IsIndeterminate is set to true because the popup is not in the visual tree (this is a custom control).

If I grabbed the view from the view model and popped up a popup in the visual tree, the progress bar will display correctly. I really don't want to do this.

What is the best way to do this while preserving the separation of the view and presentation models. Is there a way in which a popup can be inserted into the root page or frame?

Answer 1

In the end, I created a base popup class and added this code to:

private void HookIntoPage() { if (UserControlHelper.RootVisual != null) { PhoneApplicationPage page = (PhoneApplicationPage)UserControlHelper.RootVisual.Content; // Hook up into the back key press event of the current page page.BackKeyPress += BackKeyPress; FrameworkElement element = page.FindVisualChild("MainGrid"); if (element != null && element is Grid) { Grid grid = element as Grid; grid.Children.Add(this); } else { throw new Exception("Popup cannot find MainGrid"); } } } 

It is slightly hardcoded as it searches for the MainGrid grid control. This can be improved to find the appropriate top-level container.

There are 2 helper classes here. UserControlHelper has the following methods:

 public static PhoneApplicationFrame RootVisual { get { return Application.Current == null ? null : Application.Current.RootVisual as PhoneApplicationFrame; } } 

FindVisualChild comes from the VisualTreeHelperExtension class that comes with Phone7.Fx.preview, which I use for my application panel.

Answer 2

The way I relate to this is the child view model / controller / event source set by the view model and bound to the control.

The control can listen to events on the source so that it works, it is perfectly separated and even tested per unit.

A good example of this is Status Indicator Monitoring , a view model provides a StatusSource with methods such as display and cleanup. The control itself is tied to the source and listens for changes. From there, you can do everything, including creating a popup and pasting it into the visual tree.

Answer 3

Do you work with a designer? I found that doing something based on a view in the code, other than loading the data, confuses and / or upsets them. I would recommend creating 2 visual states, one with a popup displayed and one hidden so that the designer can see how the application looks and can switch (and style) the popup in Blend. Then I use DataStateBehavior or DataStateSwitchBehavior to control the popup from my virtual machine.