

A question came in from one of our customers today regarding a scenario where they have interop content (such as a WebBrowser control) in their main RibbonWindow and they wanted to use the new Backstage application menu added in the latest WPF Studio build.

All looks great until the Backstage application menu is opened. The interop content appears on top of the Backstage content due to the airspace issues in WPF where any interop content overlays WPF content in the same Window. In this post we’ll show the issue via a sample and how to work around it.

You can see in the screenshot above that Backstage is open and the web browser still appears on top of it. It is important to note that this is a limitation of Microsoft’s implementation of WPF, not anything we can fix. Also note that news out of the most recent PDC is that Microsoft will be finally fixing this issue in WPF vNext.
In Docking/MDI, we have a special property you can set to make auto-hide flyouts and some other features use Popups to work around the airspace issue as needed. However for certain technical limitations with WPF's Popup class, we can't do that with Backstage and have it still function correctly.
That being said, there is an easy way to work around the problem illustrated above. There is a Ribbon.IsApplicationMenuOpenChanged event that fires when the Backstage opens/closes. All we’ll do is handle the event and toggle the visibility of the normal window content to be opposite of the Ribbon.IsApplicationMenuOpen property like this:
1: private void OnIsApplicationMenuOpenChanged(object sender,
2: BooleanPropertyChangedRoutedEventArgs e) {
3:
4: browser.Visibility = (ribbon.IsApplicationMenuOpen ?
5: Visibility.Collapsed : Visibility.Visible);
6: }
Now if we run the code we see this when Backstage is open:

That’s all there is to it, everything is good with the world again.
Toggling the visibility of the normal window content is a great solution since Backstage normally covers it up anyhow.
Hope this tip helps those who want to use Backstage and interop in the same window.
