WPF WindowChrome Title Bar Menu

by Avatar Bill Henning (Actipro) - 2 comments
Friday, February 21, 2020 at 2:27pm

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 the previous post, we saw how WindowChrome supported placing a user profile popup button in a Window title bar.  In today’s post, we’ll add a full Menu control to the title bar instead.

Title Bar Menus

The 2020.1 version makes it easy to add custom title bar content when using WindowChrome.  In fact, you can customize the left, center, or right portions of the title bar however you like.

Let’s put a Menu control into the left side of the title bar.

Menu in the window title bar

For this kind of menu, we’ve created special subclass of the native Menu that has some minor adjustments so that the menu looks great in the title bar.

If you wish to use all capitals for the menu items like Visual Studio does, that's a simple change to the Header property of each menu item.

Summary

With the new features coming to WindowChrome, it’s easy to maximize window real estate by placing menus in the title bar.  Many modern apps are using this technique today.

Post in the comments below if you have any feedback or questions about WindowChrome title bar customization.

WPF WindowChrome Title Bar User Profile Button

by Avatar Bill Henning (Actipro)
Friday, February 14, 2020 at 2:39am

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 the previous post, we saw how WindowChrome supported placing a Back button in a Window title bar.  In today’s post, we’ll add a user profile button to the title bar instead.

Title Bar Buttons

The 2020.1 version makes it easy to add custom title bar content when using WindowChrome.  In fact, you can customize the left, center, or right portions of the title bar however you like.

Let’s see how a user profile button looks in the title bar.

A user profile button showing a popup menu

When we click the button, a popup opens with some information about the user and a Sign Out menu item.  This sample mimics the user profile button found in the Visual Studio title bar and makes use of our Shared Library's PopupButton control.

PopupButton can open any Popup or ContextMenu in response to a click.  It's extremely flexible in the content it can display.

Summary

With the new features coming to WindowChrome, it’s very easy to add buttons or any other content to any part of the title bar.

Post in the comments below if you have any feedback or questions about WindowChrome title bar customization.

WPF WindowChrome Title Bar Back Button

by Avatar Bill Henning (Actipro)
Tuesday, February 4, 2020 at 4:14pm

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 the previous post, we looked at WindowChrome (our class for theming WPF Windows that also adds customization features) and its new ability to support processing overlays.  In this and upcoming posts, we’ll start to look at new features that support title bar customization.

Title Bar Buttons

The 2020.1 version makes it easy to add custom title bar content when using WindowChrome.  In fact, you can customize the left, center, or right portions of the title bar however you like.

Let’s see an example where we’ve hidden the standard title bar icon and put a Back button in its place.

The first page, with a disabled Back button

On the first page, the Back button is disabled.  When we click through to a second page, it becomes enabled again.

The second page, with an enabled Back button

Summary

Back buttons in title bars are very common in Windows 10 apps.  And with the updates coming to WindowChrome, it’s simple to add them to your own apps.

Post in the comments below if you have any feedback or questions about WindowChrome title bar customization.

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.

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.