WPF Ribbon Theme Modernization

by Avatar Bill Henning (Actipro) - 1 comment
Thursday, April 23, 2020 at 3: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 showed off a new ShadowChrome control that is a decorator for rendering modern shadow effects. In today’s post, let’s have a look at some of the major work we’ve done on modernizing the appearance of our Ribbon product for v2020.1.

Comparing Appearances

For the 2020.1 version, we’ve gone through every Ribbon-related control and made style improvements to match the latest appearance found in Office 2019. Let’s see how the 2020.1 version’s theme compares to our current 2019.1 version’s theme:

The new Ribbon 2020.1 appearance
The current Ribbon 2019.1 appearance

You can see from the screenshots that there are subtle differences throughout. Whitespace has been adjusted, glyphs are now chevrons, the title bar background accent is more restrained, etc.

The right side of the Ribbon

Looking at the right side of the Ribbon, collapsed groups now render a bit differently from before. Contextual tab groups are more subtle. Tab row buttons like the Comments one in this screenshot have a new available style. And there is a built-in minimization button on the bottom-right.

Animated Tabs

We also wanted to provide fluid animations throughout the Ribbon, similar to Office. When you move your mouse over a tab, the underline animates to fill the tab.

Tab animations in action

When you select a new tab, the tab’s content animates into place with a quick slide.

Animated Backstage

Continuing on the animation front, we harnessed the great new WindowChrome overlay features that are coming in 2020.1 to host our Ribbon’s Backstage.

Backstage animation in action

This allows the Backstage to be fully animated on display as well.

Summary

We are still continuing to iterate on our themes for Ribbon and other products, but this should give you an idea of some of the fantastic themes updates coming in the new version.

Post in the comments below if you have any feedback or questions about the new Ribbon themes.

WPF Shadow Chrome

by Avatar Bill Henning (Actipro)
Tuesday, March 31, 2020 at 4:31pm

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 a WPF Window's system context menu can be themed/customized with new WindowChrome features.  Now that we've shown off a lot of new features coming to WindowChrome, let's start looking at other areas of v2020.1.

Shadow Chrome

In modernizing all our control themes (more on this in future posts), we wanted to come up with a new simple control for providing modern drop shadows.  What we came up with is ShadowChrome. 

A ShadowChrome with medium elevation surrounding a card

ShadowChrome is a simple decorator that can wrap any content.  It has settings for the direction, opacity, and elevation.  

A ShadowChrome with high elevation surrounding the same card

The screenshots show how altering the elevation can give the shadow a drastically different appearance.

ShadowChrome used to provide subtle shadow effects for the green check

ShadowChrome isn't limited to only rectangular shapes.  It can also be applied to non-rectangular shapes.

Summary

ShadowChrome is going to be used throughout our control themes in the 2020.1 version as a small part of modernizing our themes.  It will be shipped as a public primitive control in our Shared Library, so that it's fully accessible to our customers as well.

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

WPF Controls v2019.1 Build 685 Maintenance Release

by Avatar Bill Henning (Actipro)
Tuesday, March 31, 2020 at 4:00pm

Our v2019.1 WPF controls have been updated with a new maintenance release that is now ready for download. 

See this announcement post for the detailed list of enhancements and updates.

Download Buy Now

While the version includes a wide number of small updates and bug fixes, let’s take a look at a handful of the larger updates.  

Editors

AutoCompleteBox 

AutoCompleteBox now has a property that determines whether a clear button appears when the control is focused.

Swatch-Only Display

BrushEditBox and ColorEditBox now have a HasText property that allows you to hide the text portion of the edit box for a swatch-only display.

Dates and Times

DateEditBox and TimeEditBox now accept delimiter-less input for several additional custom formats.

Grids

Alternating Row Backgrounds

TreeListBox and TreeListView now support an optional AlternationCount of 2 for alternating row background colors.

Edit Box Validation

PropertyGrid interop with the edit boxes in our Editors product can now display a red border when a property value fails data validation.

SyntaxEditor

Search Overlay Pane

Logic related the selection scope searching has been improved.

Ctrl+Enter can be pressed to execute a Find All search operation when the Find textbox has focus and the find all button is visible.

WPF WindowChrome System Menu Customization

by Avatar Bill Henning (Actipro) - 2 comments
Monday, March 2, 2020 at 5:35pm

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 the window’s title bar header can be customized.  In today’s post, we’ll look at how the window’s system menu can be customized.

WPF Windows and Win32 System Menus

WPF Windows have always used Win32 to provide their system menus, which are menus displayed when clicking the window’s title bar icon, or when right-clicking on the window title bar.

The Win32 system menu is not rendered by WPF, and therefore never matches the style of a WPF application.  This is especially evident when using dark themes in your app.

An example of a default Win32 system menu in a dark-themed app

This light Win32 menu looks awful compared to dark-themed menus in the same application.

Customizing the System Menu

The latest WindowChrome updates automatically replace the Win32-based system title bar context menu with a custom WPF-based one with similar functionality. There are several benefit to this.

First, the menu will use whatever ContextMenu and MenuItem styles are active in your application. This ensures that the system title bar context menu renders in the same style as other menus in your application.  If you use Actipro Themes with native control theming enabled, the context menu can render in dark theme, etc.

The same system menu, rendered in WPF and with a custom menu item added

Second, since a custom WPF context menu is being created, the menu can be fully-customized via an event prior to being opened. This sample shows how a 'Help' menu item can be injected into the system title bar context menu.

Summary

Using WPF menus for the system menu ensures theme consistency and easily allows for complete customization of the menu’s contents.

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

WPF WindowChrome Title Bar Header Customization

by Avatar Bill Henning (Actipro)
Thursday, February 27, 2020 at 2:37pm

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 the window’s content area can optionally be merged into the title bar area.  In today’s post, we’ll look at how the header portion of the title bar (where the text title normally is) can be customized and replaced if desired.

Title Bar Header Customization

While the Windows standard is to display a text title in the title bar, sometimes modern apps like to swap that out for other controls, or to completely remove it altogether. 

In this example, we’ll show how a PopupButton from our Shared Library can be added to the title bar, using one of our title bar button styles to render it with title bar brushes. 

A PopupButton in the title bar header showing a menu

Here we see the text title is replaced by the PopupButton.  When the button is clicked, it shows a menu with some options for managing the document open in the window.  This kind of user interface configuration could be used for small apps that don’t have a menu.

We’ve set up the button to have a maximum width of 300.  Here’s a look at how the button resizes itself as available width descreases.

The same window with less available width showing how the PopupButton can trim its text

Summary

These and all the other recently-described WindowChrome features will be available in the 2020.1 version.  We’ve got one more post describing new WindowChrome features before we move onto another area of what’s coming in 2020.1.

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