Our v21.1 WPF controls have been updated with a new maintenance release that is now ready for download. This version has many updates for SyntaxEditor along with improvements for Ribbon, Docking/MDI, and other products.
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.
Let’s take a look at a handful of the larger updates.
Updated to Office 2019 Style
We have gone through every Ribbon-related control and made style improvements to match the latest appearance found in Office 2019.
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.
The Ribbon Backstage takes advantage of our new WindowChrome overlays mechanism and is now fully animated on display as well.
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.
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:
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 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.
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.
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.
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.
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.
It’s now easy to add a Menu into the title bar, as seen in many modern apps.
You can replace the title bar icon with a Back button.
Or add a user profile button on the right side of the title bar.
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 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.
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 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.
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.
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.
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.
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.
A new primitive ShadowChrome control has been added that renders modern drop shadows using optional shader effects.
It also can render beautiful downward shadow effects using high-performing WPF rendering procedures.
The MultiColumnPanel control can render child elements in multiple columns, collapsing columns down as available space decreases.
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.
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!
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.
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.
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:
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.
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.
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.
WPF Controls 2016.1 build 631 has been released and is now available for download. This build contains numerous minor features, updates, and bug fixes across the various WPF control product range.
It is highly recommended that v2016.1 customers upgrade to this build since it fixes all issues that have been discovered in the major Docking/MDI control updates that were part of the first 2016.1 release.
The first 2016.1 release added new Metro themes that have accent colors, like in the screenshot below.
The QAT buttons on the upper left of the window were originally wider in Office 2016, matching the width of the system minimize, maximize, and close title bar buttons. However in the most recent Office 2016 update, the QAT button width was reduced and we've updated their size in this build to match.
See the announcement post for the detailed list of enhancements and updates in this build.
The 2016.1 version of our WPF Controls is now here and it's a whopper. It contains all of the extensive new feature development work we've done on Docking/MDI over the past several months and have blogged about under the codename Docking/MDI vNext. It also has 14 new Office-like themes that match the Colorful and White themes found in the various Office suite applications. Now you can make your own apps look just like Office 2016! SyntaxEditor adds new Metro light and dark image sets that can be used within IntelliPrompt for a more modern appearance. Many other minor tweaks and improvements have been made across the product range as well.
Please note that 2016.1 does have several breaking changes to support better API design and features, so be sure to read the "Converting to 2016.1" topic in the documentation that comes with the controls. It walks through everything in detail.
We've been blogging about some of the major new features coming to Docking/MDI vNext, and those are now here, along with many others. We'll dig in deeper in future blog posts but here's a taste of what's new.
The Docking/MDI product has completely rebuilt product internals, which are optimized and now support next generation features found in Visual Studio 2015. All UI control styles/templates have been rebuilt from scratch to be simpler and easier to customize. All UI now works with all forms of pointer input: mouse, touch, and pen. We've refactored and centralized focus handling and setting logic. We've refactored magnetism handling. We rewrote UIA to ensure better compatibility with Coded UI Test. All samples have been updated/improved, and new samples added to concisely show features.
Even though much of the product internals have been rewritten, most of the public API remains the same as before other than some type member renamings. The "Converting to 2016.1" topic walks through any breaking changes you encounter.
We also include the "old" 2015.1 variation of Docking/MDI in the WPF Controls download as "ActiproSoftware.Docking.Legacy.dll". This 2016.1 version of the old assembly can be used while you transition to the newer API.
Quick subtle animations have been updated and added throughout the product to give it a more vibrant feel. Dragging tabs uses smooth animations, dock guides and drop targets pop into place, and auto-hide popups slide in and out. All of these animations are designed to be fast and pleasing.
We've created a new AdvancedTabControl control that extends the native TabControl while adding many new features (appearance customization, animation, multiple tab kinds, new tab buttons, etc.), and is used as the primary UI mechanism within the ToolWindowContainer and TabbedMdiContainer templates. It can be used independently of docking windows too, in your own normal windows.
Desired, Minimum, and Maximum Container Sizes
Layout logic has been updated to try to adhere to optional new desired, minimum, and maximum docked size hints on docking windows when space is available. For instance, you can say that you prefer to not let a tool window's container get smaller than 200px high. As long as space is available, the layout logic will do its best to adhere to that request. You can set minimum/maximum size hints the same to suggest a fixed size.
Also related to container sizes, when a layout is sized very small, then grows larger again, the original docking window sizes are restored.
Splitters Can Render Above Interop Content
A problem in the old version was the dragged splitter highlights didn't render above interop (WinForms, etc.) content due to WPF's airspace issue. This scenario now works as expected when interop support is enabled.
Several DockingWindow members have been added to designate preferences for initial dock location when opened, such as with other windows in a group, on a specific side, or at a dynamic location based on an event handler's logic. Best of all, the properties can all be bound to view-models, allowing you to fully designate initial locations for docking windows purely via MVVM.
Docking Window Tabs
A new optional property lets you specify alternate text to render on tabs, generally shorter than the Title text. This is useful in scenarios where your tool window titlebar might have contextual information "Error List - 7 Errors" but your tab should only show "Error List".
Flash effects were supported in the old version via an attached behavior found in the samples, but now tinting and flash effects are first-class citizens via easy-to-use properties right on DockingWindow. Strobe and smoothly animated flash options are both available.
A new property is available for setting a docking window's tab tooltip content. Tabs can now be set to display on any side of a container, not just top and bottom. All tabs can now be middle-clicked to close them.
A new property has been added that can uniquely identify a docking window with any string value, instead of using the Name property as before, which was limited to identifier syntax. A new properly can prevent a docking window from being included in layout serialization.
Floating windows now support Aero snap when dragging, meaning you can drag to the top of the screen to maximize the window, etc. When dragging a tab to float, as long as the docking window can float, it will instantly detach and track in a floating window with the mouse. A new option allows you to indicate you want to only use float previews instead of live-dragging windows.
When documents are floated, they now enter a full-fidelity secondary MDI area where other documents can be attached, and even tool windows can be docked around. This is great for use with multiple monitors. Properties are available for setting the icon and title of these floating windows.
A new property has been added that determines what minimum amount a floating window must be visible to avoid being snapped to screen. Partially-visible floating windows will now snap to this minimum threshold as appropriate.
Tabbed MDI has three modes of tab display (normal, pinned, preview), which are similar to those found in Visual Studio 2015. New context menu options are availble such as "Close Others", "Close All Documents", "Pin Tab", etc.
A new tab button can optionally be shown and an event handled in response to add a new document. This allows for UIs like Google Chrome.
TabbedMdiHost now has a property for setting a DataTemplate that displays when there are no documents open.
Dock guides now show over standard MDI so that dragged windows can be dropped into it. A context menu is now available when clicking a standard MDI window's icon or right-clicking its title bar.
All docking window standard MDI layout properties have been refactored and made more straightforward to access.
Many improvements in the area of MVVM have been made. Properties like IsOpen, IsActive, IsSelected, and State are now fully settable and can be bound to view models. Default locations (see above) can be specified via new properties designed for MVVM compatibility.
MVVM implementation has been improved to be more straightforward since docking windows are now the actual container of their content, instead of being represented in UI as a tab.
In MVVM usage, unregistered windows will now automatically attempt to remove themselves from the appropriate DockSite items source property if a new related option property remains true.
Docking windows can be defined in XAML and have their IsOpen property set (or bound to a view model property) to false to close them on initial dock site load, but leave behind a breadcrumb for future restoration.
The standard switcher UI has been improved to a new, more modern user interface that animates on display and supports scrolling when there is overflow.
Multiple new standard switcher properties have been added to allow for full customization of its appearance.
Prism 6.1 Support
The Prism sample has been updated to use Prism 6.1 and includes all source for Prism integration right in the sample instead of in a separate interop assembly.
14 New Office 2016-Like Themes
Seven new accent color variations of the MetroLight theme have been added that render similar to the Office 2016 Colorful theme. Seven new accent color variations of the MetroWhite theme have also been added that render similar to the Office 2016 White theme
Now your WPF apps can render exactly like Office 2016 apps.
In previous versions, Metro themes were shipped in their own assembly that required referencing and registration during app startup. In 2016.1, the Metro themes are built directly into the Shared library and no longer require registration. Further, MetroLight will be the default theme on Windows 8.x/10 systems.
Since Windows XP is past its support lifetime, we moved all Luna themes out of the Shared library and into their own separate library, similar to how Metro themes used to be. That library must be referenced and those themes specifically activated if you wish to continue using them.
The changes mentioned above are minor breaking changes (see our documentation for upgrade steps) but better support newer Windows versions and also reduce the overall size of the Shared library.
Automatic White Monochrome Image Conversion
The new accent color MetroLight themes that render similar to Office 2016 require the use of white monochrome icons in certain locations such as the upper QAT, tab panel, and status bar. Features have been built into the ribbon button themes to automatically do this conversion for you.
Simply use standard color Metro-styled icons and they should be automatically converted to pure white when appropriate for you without you needing to do anything. Note how this has occurred for the QAT buttons in the screenshot to the right.
New Metro Light and Dark Image Sets
New MetroLight and MetroDark image sets have been added for use with IntelliPrompt. The current set can be selected via the new static CommonImageSourceProvider.DefaultImageSet property.
Use the appropriate image set based on the current application theme. The screenshot above shows the Classic, MetroLight, and MetroDark image sets within a completion list.