The Actipro Blog

All the latest UI control development news from Actipro

Handling Ribbon Backstage airspace issues with interop content

PostBannerWPFStudioTipsAndTricks

ProductHeadingWPFRibbon

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.

BackstageInterop1

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. 

BackstageInterop2

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:

BackstageInterop3

That’s all there is to it, everything is good with the world again. Smile  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.

TaskDownload TaskLiveDemo TaskBuyNow

Tags: ,
Filed under: Actipro, Tips and tricks, WPF

Pingbacks and trackbacks (1)+

Comments are closed