WPF WindowChrome Processing Overlays

by Avatar Bill Henning (Actipro) - 2 comments
Thursday, January 23, 2020 at 8:58pm

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 yesterday’s post, we took a look at WindowChrome (our class for theming WPF Windows that also adds customization features) and its new ability to support full-window overlays. The example in that post showed an Office-like Backstage menu overlay.

Processing Overlays

Another common use of overlays is for processing indicators. Let’s say you kick off a time-consuming thread and you don’t want the user interacting with anything on the window. This is a perfect scenario for displaying a beautiful processing overlay.

A WindowChrome processing overlay

In this sample, we start a worker thread that runs for several seconds. While the thread runs, we show a processing overlay with an animated progress spinner. The overlay uses a subtle fade animation when opening and closing.

Note how the window title bar is still fully accessible while the overlay is displayed. This allows the user to continue interacting with the window itself (e.g. move the window, minimize it, and so on), even though the main content area of the window is blocked from interaction.

Summary

WindowChrome overlay features will be ship in the 2020.1 version and offer up all kinds of exciting possibilities for your apps.

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

WPF WindowChrome Application Menu Overlays

by Avatar Bill Henning (Actipro) - 2 comments
Wednesday, January 22, 2020 at 9:51pm

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.

We plan on making a lot of blog posts in the coming weeks to detail various features that will be shipping in the WPF Controls 2020.1 release.  The first several posts will focus on new features and functionality coming to our WindowChrome class.  Let’s dig in!

What is WindowChrome?

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.  We have been working on refining our WindowChrome template, while adding an extensive new feature set that customers are going to love.

In today’s post, we’ll take a look at one of our favorite new WindowChrome demos, which shows the ability to create an animated full-window overlay similar to an Office-like Backstage.

WindowChrome Overlays

WindowChrome has a new MVVM-compatible overlay feature that allows custom content to be injected that overlays the entire window, including the title bar area. 

WindowChrome showing an application menu overlay

Best of all, several built-in animations are supported.  In the sample above, we slide and fade in the overlay for a pleasing user experience.  The animation doesn’t occur on machines without hardware acceleration.

This sample also shows how WindowChrome lets you optionally align the title bar text to the center, and how custom buttons can be injected into the title bar.  This sample has a Menu button on the left side of the title bar and a Help button on the right side.

An Office Colorful theme is in use, which makes use of an accent color in the title bar.  It’s easy to change to any other accent color, and we supply predefined colors that match Office apps.

As the overlay is displayed, we switch the title bar to an “alternate” title bar style that has a more traditional appearance.  We also hide the Menu title bar button and show a Back button in its place.

Summary

WindowChrome overlay features will be ship in the 2020.1 version and offer up all kinds of exciting possibilities for your apps.  Anything from a home screen to an Office-like Backstage can be implemented in the overlay.

In our next blog post, we’ll show another way to use overlays during time-consuming processing operations.

WPF Controls v2019.1 Build 684 Maintenance Release

by Avatar Bill Henning (Actipro)
Tuesday, January 14, 2020 at 9:03pm

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

Let's have a look at some of the larger updates.

Docking/MDI

Tab Overflow Menus

A tabbed MDI overflow menu

The tab overflow menu now places a checkmark by the currently-selected tab.

Editors

AutoCompleteBox Input Modes

A new AutoCompleteBox input mode property has been added that determines how the control behaves.  Search mode is intended for usage when the control is providing search-like functionality, commonly seen in application title bars. 

An AutoCompleteBox

ComboBox mode is an alternate mode intended for use when the control should be used in more traditional ComboBox-like scenarios, where an items source is bound and the user should be able to easily choose an item from the list of items. A big difference between the modes is that when in ComboBox mode, the popup list filter turns off when not typing in the control. This allows the entire list to be browsed when interacting with the control purely via the popup.

Edit Box Large Incremental Changes

Numeric edit boxes now support large incremental changes when holding Shift while pressing Up/Down, using the spinner, or rotating the mouse wheel.

Edit Box Conditional Format Strings

Several numeric edit boxes now support custom format strings with semi-colon conditional format specifiers.

Grids

PropertyGrid API Improvements

A PropertyGrid.RequestRefresh method has been added, which requests that the property grid refresh its contents.

A PropertyDescriptorPropertyModel.PropertyDescriptor property has been added, which returns the PropertyDescriptor used in that particular property model.

SyntaxEditor

Selection Scope Search Ranges

The built-in search overlay pane, currently using Selection scope, and with the search range showing in the editor view

When using the search overlay pane, a new text background renders over the search range if in Selection scope mode.  Logic related to Selection scope search range has been refactored and improved.

Search Overlay Pane Hotkeys

A new property can determine if built-in hotkeys are supported that can activate for the search overlay pane.  Turn this feature off when external search UI is used.

Completion Item Performance

Completion list item-adding performance has been dramatically improved when using new batch features.  All add-ons take advantage of the new features.

Themes

WindowChrome Updates

WindowChrome’s startup logic has been streamlined to reduce Win32 calls, and help prevent against rendering issues.

WPF Controls 2020.1 Themes Goals

by Avatar Bill Henning (Actipro) - 7 comments
Tuesday, December 10, 2019 at 6:54pm

Actipro WPF Controls v2020.1 development is in progress, and the new version’s main goals are to modernize our themes and make theme customization much easier.

In today’s post, I’d like to provide some high-level information on some of the updates.

Theme Generation Concept

When an Actipro theme is activated, hundreds of brush and other resources are loaded and used throughout all our Actipro and native control templates.  This allows our themes to provide a cohesive appearance throughout all controls in your app.  Our WPF Controls ship with over 25 professionally-desired themes that match system, Office, and Metro themes.

In v2019.1 and earlier, all these theme resources are pre-defined by us in large XAML files and customers can customize individual resources or tint groups of them.  While these themes look great, it can be tedious to customize them if you don’t like the out-of-the-box look.

A primary focus of the 2020.1 WPF Controls is to move from our previous pre-defined themes towards themes that are generated at run-time based on theme generator options you set.  For instance, a main setting is the theme intent, which can be White, Light, Dark, Black, or HighContrast.  This tells the theme generator how the theme is meant to be used in general.  Then various grayscale and color ramps are generated based on configurable options.  All the highlight colors are based on colors generated in the color ramps.  There are options for things like the corner radius of tabs, whether the title bar uses an accent color (like in Office colorful themes), etc.

We are currently prototyping out this concept and so far, it’s working very well.  We will provide some screenshots once we are further along.  Please post your ideas on what kinds of options you’d like to have configurable in the comments below, as that will help guide us.  Now is the time to think big!

Modernizing Control Appearances

We have numerous ideas for bringing more modern control appearances to our new WPF themes.  Some of these, such as menu item checkmark updates, involve changes to our core control templates, both for Actipro and native controls.  Other modernization features will be optionally activated via properties set when generating themes.

WindowChrome, which allows any WPF Window to have advanced chrome features, is also getting a lot of enhancements that will be described in a future post.  These updates provide new functionality that wasn’t available before.

With several older themes being removed and other modernization template changes being made, we are finding that some of the brush and other resources used in our WPF themes are no longer needed.  We are working on consolidating brush resources where possible and removing unnecessary resources.

Older Themes

Luna and Classic

As part of the themes updates, we are going to be removing several very old themes that are outdated at this point.  These include the Luna themes (Windows XP appearance) and Classic theme (based on system colors and hasn’t been available in Windows 10 for years).

Aero and Office 2010

In a previous post, we had asked for feedback on whether customers still use Aero and/or Office 2010 themes.  Aero theme provided the Windows 7/Vista appearance, but Windows 7 is going end-of-life this month by Microsoft.  Office 2010 went mainstream end-of-life in 2015. 

We received feedback from several customers who still wished to use those themes in the foreseeable future, and we will be retaining those themes as options.  They are being consolidated into a separate optional Themes.Aero assembly that you will be able to reference and register at app startup.  This will allow us to keep our Shared Library smaller while still allowing the pre-defined Aero-style themes to be available for customers who wish to use them.

Aero Glass

With Windows 7 going end-of-life, we are removing support for transparent Aero glass features in our WindowChrome.  But as mentioned above, the Aero theme will still be fully available.

Feedback

We’d love to hear your comments, especially what kinds of options you’d like to see on our theme generator. 

WinForms Controls 2020.1 Released

by Avatar Bill Henning (Actipro) - 1 comment
Friday, November 15, 2019 at 9:59pm

We are pleased to announce the release of the 2020.1 version of our WinForms Controls.  This version includes the massive SyntaxEditor enhancements and updates we’ve been working on that have previously been described as “SyntaxEditor vNext” in the blog, and moves the older WinForms SyntaxEditor API to the same codebase already used by the WPF and UWP SyntaxEditor versions.  This change brings a number of new features to the WinForms SyntaxEditor (including some huge premium add-on language updates) and will allow us to keep all three SyntaxEditor platform implementations in sync as new features are added in the future.

This announcement post contains the detailed list of updates.

Download Buy Now

Let’s dig in and see a handful of the larger SyntaxEditor updates.

Cross-Platform Design

The internals of SyntaxEditor have been heavily refactored to support a cross-platform API across the WPF, UWP, and WinForms platforms. This allows SyntaxEditor features for the three platforms to be kept in sync moving forward.  The 2019.1 WPF and UWP versions of SyntaxEditor already have this codebase in place.

Carets and Selection

Multiple Selections

Editing with multiple carets

Multiple selections, each with their own caret, are now supported. A new selection can be added by holding the Ctrl key when clicking in the text area or clicking on the selection or line number margins.  Most edit actions have been refactored to fully support multiple selections. For instance, pressing Shift+Right Arrow will extend all of the selections by one character. 

Typing and copy/paste with multiple selections

Copying text from multiple selections unions the selected text, joining each range's text with a line terminator.  Pasting multi-line text into a view with the same number of selections as text lines being pasted will replace each selection with a related line from the pasted text.

Touch Selection Grippers

Selection grippers will show for the primary selection when touch input is used.

Caret Movement

Carets now support movement at both the start and end of word wrapped lines.

The caret in virtual space past the end of a line

Search Overlay Pane

A new search overlay pane displays over the upper-right of the active editor view when Ctrl+F (find mode) or Ctrl+H (replace mode) are pressed in a multi-line editor.  A toggle mode button on the search overlay pane switches between find and replace modes, and all common search options are supported via toggle buttons and other controls.  The search overlay pane can be closed by clicking the X button or by pressing Esc.

Basic find and replace operations are available in the search overlay pane

Ctrl+F3 will open the search overlay pane without focusing it, and will search forward for the currently-selected text. Ctrl+Shift+F3 will do the same but will search backwards.

F3 will search for the next match of the previously-used search options. Shift+F3 will search for the previous match of the previously-used search options.

If the SyntaxEditor.IsSearchResultHighlightingEnabled property is true, the search results can be highlighted while the search overlay pane is open. Closing the search overlay pane, clears the search result highlights.

IntelliPrompt

Metro Images

Metro Light and Metro Dark common image sets are now included as options instead of the existing Classic common image set.

Completion Match Highlights

As text is typed while a completion list is open, the text in each item that matches the typed text is highlighted.

Completion Filters

An auto-shrink filter is now available that can optionally trim down the items in the completion list based on typed text.

Completion filter buttons can narrow down the items in the list, such as all .NET types

Other filters can be added to completion lists, rendering as toggle buttons or even tabs.

Completion Matching

Various completion list item matchers and match options have been added, that allow for special item matching logic to be injected.  Numerous built-in item matchers are available such as starts-with, acronym, shorthand, etc.

Quick Info and Parameter Info

The quick info and parameter info tips have been updated to use the current editor background and syntax highlighting colors.

Splitting

The scrollbar splitter button now has a larger appearance.

Splitting a view, and the new option to drag to the bottom to keep the top view

The view splitter can be dragged to the bottom of the view to remove the split and keep the top view.

Scrolling and Zooming

Touch Scrolling

Smooth inertia-based touch scrolling has been added.

Horizontal Scrolling

Editor views can be scrolled horizontally with Shift+MouseWheel

Better logic was implemented for managing horizontal scroll maximums, especially when scrolling vertically.

Scroll API

New programmatic scroll methods were added that allow for aligning an anchor line to the top/center/bottom of a view with a specified pixel displacement, or scrolling by pixels.

ScrollBar Acceleration

The vertical scrollbar accelerates its scrolling speed the longer you hold the up or down button.

Margins

Line Number Customization

The first view line renders with line number 121 due to a custom origin number set on the document

A new line number provider language service was added that allows for complete customization of how line numbers are rendered in the line number margin.  In addition, a property was added to the document that sets the line number for the first line in the document, defaulting to one.

Ruler Margin

A optional new ruler margin was added that is useful for column display when working with fixed-width fonts.

Outlining Margin Highlights

Highlights render over contained lines when hovering over an outlining node in the outlining margin.

Line Modification Marks

Line modification marks now have improved logic that better tracks unsaved, saves, and reverted changes.

Indicator Glyphs

The rendering of built-in indicator glyphs was improved.

Editing

Delimiters

Options for delimiter (bracket) auto-complete and delimiter highlighting are available when delimiter-related language services are registered on the syntax language.

Triple Clicks

Added support for triple-clicks to select an entire view line. Dragging the pointer on the final click will extend the selection by view line.

Text Rendering

Text rendering now properly handles cultural editing concepts like complex glyphs, bi-directional text, etc.

.NET Languages Add-on

The C# parser and resolver were updated to support C# 7.3 syntax, and the VB parser and resolver were updated to support VB 15.8 syntax.  Much-improved resolver logic is now present that is far more accurate than in previous versions.

The IntelliPrompt completion list now shows toggle button filters for the various kinds of items displayed in the list.

Web Languages Add-on

Added advanced syntax language implementations for the JavaScript and JSON languages.

Python Language Add-on

This new add-on implements an advanced syntax language for the Python language.

Almost 100 Samples

We've added so many SyntaxEditor samples to this new version that we had to create a brand new Sample Browser app design to support them all!