WPF Controls v2020.1 Released - Massive Themes Updates

by Avatar Bill Henning (Actipro) - 1 comment
Wednesday, October 7, 2020 at 1:13pm

We are pleased to announce the release of the 2020.1 version of our WPF Controls, which is the culmination of many months of work to modernize themes across all Actipro and native WPF controls, create a unique and powerful framework to fully customize theming in your apps, and build a Theme Designer application for configuring/previewing theme definitions. 

In addition to those features, we’ve added new controls, implemented a new Sample Browser application design, provided .NET Core assemblies and NuGet packages, and created a new product installer.

This announcement post contains a summary list of updates in the 2020.1 version.

Download Buy Now

Let’s take a look at a handful of the larger updates.  

Ribbon Appearance

Updated to Office 2019 Style

The modernized Ribbon appearance, with fluent animations throughout

We have gone through every Ribbon-related control and made style improvements to match the latest appearance found in Office 2019.

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.  When you select a new tab, the tab’s content animates into place with a quick slide.

Animated Backstage

The Ribbon Backstage takes advantage of our new WindowChrome overlays mechanism and is now fully animated on display as well.

App-Wide Theming

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 old pre-defined themes were somewhat difficult to customize.  We wanted to take themes to the next level for the new version, and we have truly built something fantastic.

Theme Definitions and Generation

v2020.1 has a new 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.

A Notepad-like window in a dark theme

There are well over 50 theme definition options so far, including options for color palette, border contrast, bullet appearance, font size, corner radius, window appearance, and much more.

Like one of our pre-defined themes but wish to enable rounded corners on controls instead of square corners?  A few lines of code can accomplish this.  Want to build out your own custom color scheme for your app?  No problem!  The theme generator will construct over 1,000 resources like Brushes, Thicknesses, etc. that can be reused anywhere in XAML, and all based on your theme definition’s options.

Theme Designer Application

A very important piece of theming is being able to visualize exactly how altering theme definition options affects the rendering of various controls.  That’s where the new Theme Designer application comes into play.

The Theme Designer application provides numerous "entire-theme preset" menu items that initialize a theme definition based on one of our pre-defined themes:

A theme preset being selected

Here you see the app using the selected theme preset with some sample List/Grid UI in the document area. The Code document lists App.OnStartup code that you can paste into your own application to replicate the same theme in your application.

The Theme Definition tool window on the right contains a property grid where you can fully customize the many theme definition options. When a theme definition option is changed, the Code document’s text is updated appropriately to set non-default values, and the app itself immediate applies the theme so you get instant feedback on how theme definition options affect the appearance.

Color palettes can be configured to fit your brand, such as here where we have created a dark theme with heavy blue tint. 

A dark theme with heavy blue tint applied

A resource browser tab lets you copy a DynamicResource to any of the resources generated from the theme definition.  And many tabs containing sample user interface controls are included, allowing you to fully visualize how the theme will look with real-world controls.

This new Theme Designer application will be a key addition moving forward for our WPF Controls customers.

All Styles/Templates Updated

We’ve refactored all our Actipro and native WPF control styles/templates to take on a more modern appearance.  In modern themes, glyphs now use more of a chevron appearance, there are updated scrollbar visuals, and there are soft downward drop-shadows.  We’ve added all this, and a lot more.  As mentioned above, everything can be configured in theme definitions to look exactly how you want.

High-Contrast Theme Improvements

We’ve reworked the entire high-contrast theme so that all UI in Actipro and native WPF controls renders well in high-contrast mode, ensuring your app is fully-accessible to all customers.

Auto-Switching Themes

We’ve built optional features into ThemeManager that can automatically track the Windows light/dark setting for apps, and detect when high contrast mode is activated.  When any of those options change, ThemeManager can automatically change your app theme appropriately to a theme you selected for each of those scenarios.

Window Chrome

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.  Version 2020.1 adds an extensive set of new features that customers are going to love.

Animated Overlays

A new MVVM-compatible overlay feature allows custom content to be injected that overlays the entire window, including the title bar area.  This feature supports several built-in animations and offers up all kinds of exciting possibilities for your apps. 

A WindowChrome processing overlay

Anything from an Office-like home screen to a processing indicator can be implemented in the overlay.

Title Bar Customization

Title bars can be customized to include any custom content on the left side, center, or right side of the title bar.  Each one of those areas is treated like a ContentControl so that they can be configured via child controls directly, or via MVVM models and DataTemplates. 

Menu in the window title bar

It’s now easy to add a Menu into the title bar, as seen in many modern apps.

A Back button in the title bar

You can replace the title bar icon with a Back button.

A user profile button showing a popup menu

Or add a user profile button on the right side of the title bar.

A PopupButton in the title bar header showing a menu

The central header portion of the title bar can even be replaced with custom content, like a popup button.

Title Bar Merge

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 window with portions of its Content merged into the title bar area

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 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 to extend over the title bar background.

System Menu Customization

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.

The window title bar context menu styled and with a custom Help item added

WindowChrome updates automatically replace the Win32-based system title bar context menu with a custom WPF-based one with similar functionality that renders the same as other menus in your app.  This means it will look great in dark theme.  Further, the menu can be fully customized, allowing additional menu items to be injected prior to display.

Image Adaptation

Image adaptation is a new feature area that is a real game changer in many applications.  Combined with our DynamicImage control, image adaptation consists of a number of ways to manipulate images for display in various scenarios like dark themes, high-DPI, and monochrome. 

The same images designed for a light theme can be adapted to render clearly in a dark theme

Features include:

  • Chromatic adaptation (color shifting) for images, which allows images designed for light themes to be automatically adjusted for use in dark themes.
  • Converting a monochrome vector image to render in the current foreground color.
  • Dynamic loading of pre-defined high-DPI and/or theme-specific image variations for raster images.
  • Conversion of images to grayscale.
  • Conversion of images to monochrome, in a specified color.

Effectively, you can design a single set of icons for a light theme, and reuse those same icons in dark and high-contrast themes with almost no additional effort.

Controls

PropertyGrid Enhancements

The PropertyModel class, which is intended for manually-created properties that should appear in a PropertyGrid, has been updated to be a dependency object so that it can support XAML bindings on its properties.

The Sample Browser using a styled PropertyGrid with the new CanAutoConfigure feature to show specific options

This feature combined with a new CanAutoConfigure option makes it easy to specify several properties in XAML that should be displayed in a PropertyGrid.  You simply bind the PropertyModel.Value to a property on another object and it fills out the rest, including selection of a property editor.  You can also override the automatic configuration as needed, such as when you want a specialized property label or editor.

PopupButton Enhancements

The PopupButton had a lot of its internals and logic refactored and improved for more common use cases.  New properties were added to make popup customization easier.

New ShadowChrome

A new primitive ShadowChrome control has been added that renders modern drop shadows using optional shader effects. 

ShadowChrome rendering a soft shadow around a card control

It also can render beautiful downward shadow effects using high-performing WPF rendering procedures.

New MultiColumnPanel

The MultiColumnPanel control can render child elements in multiple columns, collapsing columns down as available space decreases.

MultiColumnPanel control making use of ShadowChrome for soft shadows around card items

It's a space-efficient and visually-appealing way to render lists of items, or to break paragraphs of text up.

Fresh New Sample Browser Design

We completely reimagined the user interface of our WPF Controls samples application. 

The new Sample Browser application home view

It now harnesses all of our themes improvements and provides a fast, efficient way to navigate and interact with our hundreds of samples.

.NET Core Assemblies

With v2020.1, our control products ship in both .NET Framework 4.0 and .NET Core 3.0 variations of assemblies.  You will now be able to use native .NET Core-based Actipro assemblies in your .NET Core apps!

NuGet Packages

Another big request by customers has been for us to supply NuGet packages for our controls and we are delivering that in v2020.1.  NuGet packages are published on nuget.org and contain both the .NET Core and .NET Framework variations of our assemblies. 

How our large metapackage appears on nuget.org

NuGet packages are required to be used if you need the .NET Core variations of our assemblies.  View all available Actipro NuGet packages at: https://www.nuget.org/profiles/ActiproSoftware

Toolbox Icons

New toolbox icons have been designed for all our WPF Controls so they blend in perfectly with Visual Studio 2019 design.

Beautiful Simple Installer

Finally, we also have created a new install experience that is beautiful in its simplicity. 

The new WPF Controls installer

It makes installing and uninstalling the WPF Controls a joy.

We hope you love the new version!

Automatic WPF Theme Switching to Match Windows Settings

by Avatar Bill Henning (Actipro)
Wednesday, September 16, 2020 at 2:43pm

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 showed how the Theme Designer application can display sample UI tabs, allowing you to instantly see how changes to the theme definition affect the rendering of various UI controls.

In today’s post, we’ll take a look at a new feature of ThemeManager that allows an application to automatically change themes based on Windows settings for light/dark and high contrast modes.

Theme Architecture

As a quick review, the Actipro ThemeManager supports dynamically swapping in of ResourceDictionaries containing control Styles and asset resources like Brushes, Thicknesses, etc. that can be used in WPF Styles/Templates.  As seen in previous blog posts, v2020.1 will allow you to design and easily register custom theme definitions with ThemeManager. 

Typically you indicate the theme you wish to load for your application by setting the ThemeManager.CurrentTheme property to the name of a pre-defined theme (created by us) or a custom theme definition that you registered.

Windows Settings for Colors

This all works great.  Now what if we want to have our app’s theme match the current Windows settings for app colors and high-contrast?

Matching Windows Settings

The Windows Settings’ Personalization section’s Colors tab allows the end user to choose whether apps should be light or dark themed.  Some end users might also activate High-Contrast mode from within Windows Settings. 

It is ideal for apps to listen to these end user settings to ensure a consistent user experience.  New features in v2020.1’s ThemeManager allow you to respect these settings and automatically switch themes when appropriate, all with one line of code.

A new ThemeManager.RegisterAutomaticThemes method can be called in your app’s OnStartup logic in place of setting the ThemeManager.CurrentTheme property.  This method allows you to specify the names of a light theme, dark theme, and high-contrast theme.

Here’s some sample code that uses our pre-defined “Light”, “Dark”, and “HighContrast” themes:

ThemeManager.RegisterAutomaticThemes(ThemeNames.Light, ThemeNames.Dark, ThemeNames.HighContrast);

Now when the end user indicates via Windows Settings that apps should be in a dark theme, the app (our Sample Browser in this example) looks like:

Dark theme

When the end user indicates via Windows Settings that apps should be in a light theme, the app looks like:

Light theme

And finally, with high-contrast mode activated via Windows Settings, the app looks like:

High-contrast theme

You can call RegisterAutomaticThemes with any registered theme name.  If you use our Theme Designer application to build your own custom light and dark themes and have registered them with ThemeManager, simply pass those themes’ names to RegisterAutomaticThemes and ThemeManager will pull the correct theme based on the end user’s Windows Settings.

When using RegisterAutomaticThemes, the ThemeManager actively watches for changes to the Windows Settings and switches themes at run-time as appropriate based on new settings.

Summary

This handy one-line call takes all the work out of trying to match an end user’s app preferences.  We’re very excited to deliver this in the upcoming 2020.1 version.

We are currently in final beta testing of v2020.1 and hope to have it released in the next week or two.

Post in the comments below with any questions or comments on our upcoming WPF themes features.

WPF Theme Designer – Sample UI Documents

by Avatar Bill Henning (Actipro) - 2 comments
Friday, August 28, 2020 at 5:28pm

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 showed how each theme definition has multiple options that control how a rich palette of colors is generated for a theme.

In today’s post, we’ll see how various sample UI tabs are built into the app that let you instantly see how changes to the theme definition affect the rendering of various UI controls.

Sample UI Documents

As we have shown in recent blog posts, the Theme Designer application provides a way to easily alter theme definition properties and it instantly shows a theme preview in the application itself.  That’s great for the controls used in the application, but how can we also preview how the theme renders other controls that aren’t used in the normal application functionality?

The Theme Designer's Window menu

The answer is sample UI documents.  The Theme Designer provides numerous sample UI documents that can be displayed from the Window menu.

Sample UI for buttons

Each sample UI document focuses on displaying a variety of controls related to a certain area.  For instance, in the screenshot above, we see a number of Button, CheckBox, and RadioButton style controls.

Or this screenshot shows another sample UI document for list and grid controls:

Sample UI for lists and grids, with the app theme changed to a Dark theme

By having all these sample UI documents accessible, you can see exactly how altering theme definition properties will affect the rendering of controls throughout your own applications.

The sample UI documents can even be dragged to other monitors for easier viewing.

Summary

It’s important to be able to see how theme definition changes affect UI control rendering, and having a wide variety of sample UI documents available right in the app makes it easy to visualize everything.

Post in the comments below with any questions or comments on the WPF Theme Designer application.

Beta Testers Wanted

We are currently beta testing v2020.1 and would love to have more customers involved. 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.

WPF Theme Designer - Color Palettes

by Avatar Bill Henning (Actipro)
Friday, August 21, 2020 at 6:43pm

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 introduced the new WPF Theme Designer application that will come with the v2020.1 WPF Controls and provides a visual way to customize theme definitions.

In today’s post, we’ll take a look at the app’s visual representation of the generated color palette, and some theme definition settings that affect the colors that are generated.

Color Palettes

The Theme Designer app has a Color Palette tab that displays all of the colors that are generated as part of the theme generation process. Each one of these colors is accessible via Brush asset resources that you can reuse in your application.  The colors in each ramp are named based on their contrast level relative to the theme intent (light/dark).

The Theme Definition tool window on the right is where we configure the theme definition. You can see it lists various base colors to use for each color ramp. Those base colors translate over to the MidHigh contrast colors in the each ramp. We use a specially-designed algorithm to generate a pleasing ramp of colors around each base color. You can adjust the base color to whatever you need so that the generated color ramp fits with your app’s own branding.

The default Light preset's color palette

What you see in the screenshot above is the app with a default Light theme. Let’s change it a bit so that we crank up the saturation of the blue hue tint on the grayscale color ramps, and let’s also adjust several of the base colors. The small diamonds next to several theme definition properties indicate the properties that have been changed from the base Light theme preset.

Blue hue saturation applied and other base colors changed

Notice how there is now a blue tint throughout the UI and the color ramps for red, orange, and yellow have altered as well.
Next, we’ll flip to a dark theme intent.

The same tinted hue settings, but applied to a Dark theme intent

Again, you see how the blue hue permeates through the grayscale portions of UI due to the hue saturation being turned up.

Summary

By changing several properties on the theme definition, we’ve completely altered and customized the look of our app. This same thing will work in your own app since the Theme Designer outputs the code to paste into your App.OnStartup logic to reproduce the same theme.

Post in the comments below with any questions or comments on the WPF Theme Designer application.

Beta Testers Wanted

We are currently beta testing v2020.1 and would love to have more customers involved. 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.

WPF Theme Designer - Introduction

by Avatar Bill Henning (Actipro)
Wednesday, August 5, 2020 at 7:55pm

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 the new WPF theme generation system that we’ve developed for v2020.1, and its theme definitions that have options for customizing themes.

In today’s post, we’ll introduce the new WPF Theme Designer application that comes with the WPF Controls and provides a visual way to customize theme definitions.

Theme Definitions

As described in our previous post, theme definitions have over 50 options that are used by our theme generator to output asset resources such as brushes, thicknesses, etc. into resource dictionaries that provide a WPF theme. The generated theme is used by Actipro controls and optionally native WPF controls to render your application’s UI consistently throughout. You can also reuse any of our generated asset resources in your UI via DynamicResource calls.

Customizing Theme Definition Options

Our main goals for the WPF Theme Designer application were to make it easy to visualize and customize theme definitions.  The application provides numerous "entire-theme preset" menu items that initialize a theme definition based on one of our pre-defined themes:

The WPF Theme Designer application with a theme based on Metro Light

Here you see the app using the selected theme preset, and with its Code document open. The Code document lists App.OnStartup code that you can paste into your own application to replicate the same theme in your application.

The Theme Definition tool window on the right contains a property grid where you can fully customize the many theme definition options. When a theme definition option is changed, the Code document’s text is updated appropriately to set non-default values.

On top of that, the app also immediately generates a new theme and applies it so you get instant feedback on how theme definition options affect the appearance.

Let’s change the Intent to Dark and look at the Resource Browser document…

The WPF Theme Designer application after switching to Dark theme intent

The Resource Browser document contains a complete list of the asset resources that are generated by the theme definition. Type in text in the filter box at the top to look for specific asset resources. In this case, we’ve typed “bullet” to look for asset resources related to checkbox and radio buttons.

If you wish to reuse an asset resource in your application, simply click the button to copy a DynamicResource to the asset’s resource key and paste that in your XAML.

For instance, if we wanted a general low-contrast container background brush to use in a Border in our application, we’d copy a DynamicResource to ContainerBackgroundLowBrushKey and would paste it into our XAML like:

<Border Background=”{DynamicResource {x:Static themes:AssetResourceKeys.ContainerBackgroundLowBrushKey}}”>

Summary

This is a first look at the WPF Theme Designer application. We’ll follow up soon with additional information on its many other features.

Post in the comments below with any questions or comments on the WPF Theme Designer application.

Beta Testers Wanted

We have started beta testing v2020.1. 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.