WPF WindowChrome Processing Overlays

by Avatar Bill Henning (Actipro) - 2 comments
Thursday, January 23, 2020 at 8:58pm

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.

In yesterday’s post, we took a look at WindowChrome (our class for theming WPF Windows that also adds customization features) and its new ability to support full-window overlays. The example in that post showed an Office-like Backstage menu overlay.

Processing Overlays

Another common use of overlays is for processing indicators. Let’s say you kick off a time-consuming thread and you don’t want the user interacting with anything on the window. This is a perfect scenario for displaying a beautiful processing overlay.

A WindowChrome processing overlay

In this sample, we start a worker thread that runs for several seconds. While the thread runs, we show a processing overlay with an animated progress spinner. The overlay uses a subtle fade animation when opening and closing.

Note how the window title bar is still fully accessible while the overlay is displayed. This allows the user to continue interacting with the window itself (e.g. move the window, minimize it, and so on), even though the main content area of the window is blocked from interaction.

Summary

WindowChrome overlay features will be ship in the 2020.1 version and offer up all kinds of exciting possibilities for your apps.

Post in the comments below if you have any feedback or questions about WindowChrome overlays.

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 1 month ago by Dirk Zellerfeld
Avatar

Does the (processing) overlay support cancel action out of the box? Is it possible to define the UI blocked area? For example if I would want to show the processing overlay over a tab content but allow the user to switch to other tabs and do stuff there meanwhile?

Posted 1 month ago by Bill Henning (Actipro) - Actipro Software LLC
Avatar

Hi Dirk,

The sample in the screenshot above is just an implementation of an overlay, all defined in the sample itself.  Similar to the one from yesteday's post where we defined the Backstage-like UI in the sample too.  The overlay mechanism is built into WindowChrome, but you define what you want to show in it and when.

To answer your question, since you determine what UI to put in the overlay, you can add a Cancel button to a processing overlay if you wish.  Or any other elements.

The overlay renders on top of the normal Window.Content in z-order.  You could choose to use the overlay to block only a portion of the window.  If you do so, the user can still click through to the normal UI elements behind.

For your last question, it sounds like you just want to block the content of a certain tab though.  That would be better accomplished by putting a Grid around your tab's content and have a hidden overlay element above it (like a semi-transparent Rectangle).  Then make the Rectangle visible while it's processing.

Our WindowChrome overlay mechanism is more for covering the entire window, including the title bar.

Add Comment

Please log in to a validated account to post comments.