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 our previous post, we talked about how we will be bringing .NET Core builds of our WPF Controls in v2020.1, along with publishing NuGet packages.

In today’s post, we’ll start to dive into one of the largest areas of the themes-related updates for this version, which is the new theme generation system.

Generated Themes

The Actipro WPF controls provide numerous complete pre-defined themes that render similar to various Windows and Office versions.  These themes apply to Actipro and optionally native WPF controls as well so that there is consistency throughout your application’s appearance.  While this system has always worked well, the current pre-defined themes are somewhat difficult to customize. 

We wanted to take themes to the next level for the new version, and we have truly built something fantastic.

What we came up with is a framework where you can configure numerous options on a theme definition object.  When you register that theme definition with our ThemeManager, you then can apply that theme at any time with a single line of code.  Multiple theme definitions can be registered, allowing you to register “light” and “dark” themes (or any other variant you like) and instantly toggle between them at run-time.

When a theme definition is applied, instead of simply merging pre-defined resource assets (brushes, thicknesses, etc.) into the Application.Resources as before, we dynamically construct hundreds of resource assets very quickly and merge them into Application.Resources.  The resource assets that are created are based on the options in the theme definition, and are generated in a fraction of a second.

Like now, we still provide themes that render similar to Windows and Office.  We register theme definitions for those, among others, by default with the ThemeManager so they can be applied at any time with a single line of code.

Customizing Themes

Say that you love our Office Colorful Indigo theme (Word-like appearance), but you don’t like how it has grayscale background state hover/pressed effects for toolbar and menu items.  In the past, this would be difficult to change... but not any more.  You can get the default theme definition we provide for this theme, adjust an option on it to use accent colors for toolbar/menu state backgrounds, and when the new theme definition is applied, you’ll see the adjusted appearance in action.

What happens behind the scenes is that our theme generation logic adheres to the options you specify, and the brush resource assets that it creates for toolbar/menu state backgrounds are generated with accent color values instead of grayscale color values.

Theme Definition Options

How many options are there for theme definitions?  At the time of this writing, we have well over 50 options so far and are adding more as we work towards wrapping up the first beta build of v2020.1.

You can control all kinds of things with theme definitions options, including color palette, border contrast, bullet appearance, font size, corner radius, window appearance, and much more.

Beta Testers Wanted

We are approaching a point where we’re like to start collecting a list of beta testers for the 2020.1 version, who can start working with the new features soon.  If you would like to assist us in testing, please write us at our support address.  We would like individuals who are already licensed for the 2019.1 version, are willing to use beta versions of 2020.1 (.NET Core or .NET Framework), and who want to provide feedback, especially in the area of our themes updates.

Summary

We’re just scratching the surface here of what you can do with the new theme definitions.  We haven’t even shown off the new Theme Designer app yet.  We’ll continue to dive into the area of theme generation in upcoming blog posts.  Stay tuned!

Post in the comments below with any questions or comments on theme generation.

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. 

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

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

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.

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.

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.

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.

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. 

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.

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.

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 Menu in a Window title bar to maximize window real estate.  In today’s post, we’ll look at an advanced concept of being able to extend Window.Content up into the title bar area.

Title Bar Merge Kinds

Some modern apps have a more stylized design for their windows and don’t wish to have a traditional window title bar appearance.  This is often achieved by merging portions of the window’s content into the title bar area.  New WindowChrome features offer three kinds of merge options.

A merge kind of BackgroundOnly moves the Window.Background fill to cover the title bar background, while keeping the actual Window.Content in its normal location. A merge kind of ContentOnly (used in the sample below) keeps the Window.Background fill where it normally is, but moves the Window.Content to extend over the title bar background. Finally, a merge kind of Full moves both the Window.Background and Window.Content will extend over the title bar background.

Title Bar Merge Example

In this sample, we've merged the content area of the window up into the title bar. The content area contains the left column and the Actipro logo that you see visible in the title bar area. A special property on WindowChrome prevents the centered title bar text from ever covering the left column.

This sample also shows off how new read-only attached WindowChrome properties can be examined on a window to return the height of the title bar, as well as the left and right title bar content widths. In this sample, there is nothing in the left title bar area since the icon is hidden. However the three title bar buttons (minimize, maximize, close) do contribute width in the right title bar area. The final resolved values for these widths and heights can be retrieved and used to help when positioning elements within the window that may overlap the title bar, or that may want to be lined up with elements in the title bar.

Hit Testing

When covering the title bar with Window.Content, it’s important that Windows can still hit test title bar regions in the window so that it can be dragged properly.  We provide an attached property that allows non-client window hit testing to traverse through any WPF element, thereby allowing special elements to be designated as a “title bar” in Windows’ eyes. 

In this sample, the left column background covers the left side of the normal title bar.  Doing that would normally prevent window dragging when clicking on that part of the window.  However we added and top-aligned a transparent Rectangle to the left column and set it to be the height of the title bar.  We then used the special WindowChrome attached property to identify it as a “title bar” so that the upper left portion of the window can still be clicked to support window dragging.

Summary

All these features for merging window content into the title bar area will be available in the 2020.1 version.  WindowChrome will provide everything you’ll need to build custom modernized window appearances.

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