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 answer is sample UI documents.  The Theme Designer provides numerous sample UI documents that can be displayed from the Window menu.

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:

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.

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.

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.

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.

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.

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.  We are continuing to work on wrapping up the massive 2020.1 version that is currently in beta testing.

Docking/MDI

• A new TabDragReordered was added to AdvancedTabControl that fires after a tab is reordered with internal drag/drop.
• The UI automation peer tree was improved to better support auto-hidden tool windows.
• A new Shift+Esc hotkey now closes the active tool window.

Editors

• DatePicker, DateTimePicker, and TimePicker were updated to support null values and a new Clear button can appear on MonthCalendar when nulls are allowed.
• Numeric edit boxes now parse whitespace within custom format string literals better.
• Improved various portions of Calculator's logic.
• Improved the MaskedTextBox caret-moving logic.

Grids

• Improved the performance in PropertyGrid and tree controls in a couple scenarios.

Shell

• Added new ShellListView properties that can control how the control is sorted.
• Significantly improved the speed by which ShellListView can sort Windows shell objects by property.

SyntaxEditor

• Improved the "Adornments - Squiggles Intro" Quickstart to show a more realistic scenario of tracking developer-specified tagged ranges.
• Improved the performance of the CollectionTagger.Clear method when there are a small number of tags.

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:

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 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.

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.