WPF WindowChrome Application Menu Overlays

by Avatar Bill Henning (Actipro) - 2 comments
Wednesday, January 22, 2020 at 9:51pm

Actipro WPF Controls v2020.1 development is in progress, and the new version’s main goals are to modernize our UI control features/themes, and make theme customization much easier.

We plan on making a lot of blog posts in the coming weeks to detail various features that will be shipping in the WPF Controls 2020.1 release.  The first several posts will focus on new features and functionality coming to our WindowChrome class.  Let’s dig in!

What is WindowChrome?

WindowChrome, which is included in the Shared Library, allows any WPF Window to have advanced chrome features.  In the past this has mostly related solely to providing a themed window that had a Metro, Office, or Aero-like appearance.  We have been working on refining our WindowChrome template, while adding an extensive new feature set that customers are going to love.

In today’s post, we’ll take a look at one of our favorite new WindowChrome demos, which shows the ability to create an animated full-window overlay similar to an Office-like Backstage.

WindowChrome Overlays

WindowChrome has a new MVVM-compatible overlay feature that allows custom content to be injected that overlays the entire window, including the title bar area. 

WindowChrome showing an application menu overlay

Best of all, several built-in animations are supported.  In the sample above, we slide and fade in the overlay for a pleasing user experience.  The animation doesn’t occur on machines without hardware acceleration.

This sample also shows how WindowChrome lets you optionally align the title bar text to the center, and how custom buttons can be injected into the title bar.  This sample has a Menu button on the left side of the title bar and a Help button on the right side.

An Office Colorful theme is in use, which makes use of an accent color in the title bar.  It’s easy to change to any other accent color, and we supply predefined colors that match Office apps.

As the overlay is displayed, we switch the title bar to an “alternate” title bar style that has a more traditional appearance.  We also hide the Menu title bar button and show a Back button in its place.

Summary

WindowChrome overlay features will be ship in the 2020.1 version and offer up all kinds of exciting possibilities for your apps.  Anything from a home screen to an Office-like Backstage can be implemented in the overlay.

In our next blog post, we’ll show another way to use overlays during time-consuming processing operations.

Actipro's WPF Controls

Over 100 UI controls for building beautiful Windows Presentation Foundation desktop apps.

Learn More

Over 100 UI controls for building beautiful Windows Presentation Foundation desktop apps.

Includes editors, docking windows, MDI, property grids, charts, tree controls, ribbons, gauges, themes, and much more.

Learn More Download Free Trial

Comments (2)

Posted 4 years ago by Bjørnar Sundsbø - Norway
Avatar

Will the overlay be able to display overlay information on top of the ribbon menu while the user is working in other parts of the application? Imagine the circular user account button when clicked: it displays my name, email and account settings button when I click it. This is displayed inside of a popup (I'm guessing), which closes when the focus changes to another part of the application.

I'm looking to display overlay information such as important notifications that the user has to see. In pre-2020 versions, this content is rendered behind the ribbon menu, and I need to use a popup or adorner to display the information on top of the menu (with all the issues related to that).


Bjørnar Sundsbø

Posted 4 years ago by Bill Henning (Actipro) - Actipro Software LLC
Avatar

Hi Bjørnar,

Do you have a screenshot or two that you could upload somewhere and link to so we can see an example of what kind of UI you're trying to show, and where exactly you are trying to show it?

And by the "ribbon menu", do you mean the current 2019.1 Ribbon version's Backstage menu?

Note that the overlay example in this blog post doesn't use anything from Ribbon in it, even though it looks like an Office home screen or Backstage.  It's all from pure WindowChrome features.

Add Comment

Please log in to a validated account to post comments.