SyntaxEditor vNext - Editor View Panes

by Avatar Bill Henning (Actipro) - 7 comments
Wednesday, March 13, 2019 at 3:30pm

Another feature we're looking to add to SyntaxEditor vNext (the 2019.1 version) is editor view panes, which are small UI panes with editor-related functionality that slide in from the view's top-right corner.  We originally started this effort with the idea of adding an inline search view similar to the one found in Visual Studio. 

Here's a walkthrough showing how it works when you press Ctrl+F:

An example editor view pane for find/replace functionality

We will cover this new inline search view in detail in a future post, as it's still being developed at this time.  But you can get a feel for how it will function via the video above.  

As we worked on this feature, we thought it would be a great idea to try and make more of a generic mechanism to host these kinds of editor view panes.  Other editor view panes could be added for go-to line, go-to anything, refactoring, etc. kinds of user interfaces.

Submit Your Feedback

We're just in the planning stages of this more generic editor view pane mechanism right now and would love to get your feedback.

Let's hear your thoughts in the comments on what kinds of built-in panes you might like to see, or what kinds of custom panes you might build with this mechanism!

The features described above are intended for the future v2019.1 SyntaxEditor for WPF, SyntaxEditor for UWP, and SyntaxEditor for WinForms products.

Color Picker Comparison Values

by Avatar Bill Henning (Actipro)
Tuesday, March 12, 2019 at 2:27pm

When picking colors, it’s very beneficial for an end user to compare the initial (previously-selected) color with the currently-selected color.  This new Editors feature was added to the WPF and UWP color pickers in yesterday’s maintenance release.

Let’s see how this works with a ColorEditBox instance, our rich editor for color selection.  Please excuse the GIF image dithering.  The actual control has vibrant gradients.

The ColorEditBox drop-down picker showing value comparison

The hue slider's inner circular area on the drop-down color picker shows the initial color value when the drop-down is opened.  As the end user alters the selected color, the right half of the circle updates to show the newly-selected color, while the left half of the circle continues showing the initial color value.  This allows the old and new values to be compared side-by-side.

The features described above are available in the Editors for WPF and Editors for UWP products.

Download Buy Now

WPF, UWP, and Silverlight v2018.1 Maintenance Releases

by Avatar Bill Henning (Actipro)
Monday, March 11, 2019 at 8:20pm

SyntaxEditor vNext IntelliPrompt Updates

by Avatar Bill Henning (Actipro)
Wednesday, December 12, 2018 at 5:00pm

BlogPostBanner-SyntaxEditor-DevNotes

As mentioned in a previous post, we have been working on refactoring the core internal implementation of our SyntaxEditor code editor control on the WPF, UWP, and WinForms platforms.  This effort (codenamed vNext) is being made to bring all three platforms onto the same codebase for easier updating moving forward, and to enhance features wherever possible.

The past three weeks or so, we've been plugging along on refactoring a lot of the internals of SyntaxEditor's IntelliPrompt UI features so that the same codebase can be shared across the WPF, UWP, and WinForms platforms.

While the WPF and UWP version's APIs are pretty much staying the same (with a couple minor tweaks to completion filters), the WinForms version will see some massive new capabilities, especially with completion.

IntelliPrompt Features Summary Video

Let's dig in and see a visual summary of some amazing completion list features that will be available in the all three SyntaxEditor vNext platforms.  This video shows the WPF SyntaxEditor editing a Python document using our advanced Python Language Add-on.

2018-12-12_10-46-08

Toggle Button and Tab Completion Filter UI

The completion list allows for toggle button and tab filters to be added.  Toggle button filters allow you to check the kinds of items you wish to see in the completion list.  If nothing is toggled, then all results are displayed.  Tab filters let you select between two or more main options, with one being an "All" option.

While the current WPF and UWP versions already support toggle button and tab filter UI, this is a new feature for the WinForms version.  And in vNext, the toggle buttons work more like they do in Visual Studio 2017.

Filtering Unmatched Items

As you type, the completion list filters out items that don't match.  This is an option already available in the WPF/UWP versions, but is new for the WinForms version.

Matched Text Highlights

When typing text, the letters in each item that match will be highlighted in the list.  This feature makes it clear why an item is matched and is especially useful when not filtering unmatched items, or using some more advanced item matcher algorithms like acronym or shorthand.

This feature is already available in the WPF version, but is new for the UWP and WinForms versions.

Python Language Add-on

As described in this previous post, the Python Language Add-on is new for the WinForms version of SyntaxEditor.

We've also updated the IntelliPrompt completion in the add-on to dynamically show toggle button and tab filter UI based on the items that are present.  For instance, in the animation above when there were no classes available in the list, there was no "Classes" toggle button in the UI.

New Icons

As described in this previous post, the WPF and UWP Metro icons used in IntelliPrompt have been drawn from scratch as vector icons and will render crisp and clear on any high DPI monitor. 

The WinForms version is getting Metro icons as well, whereas they only had Classic icons before.

What's Next

We have IntelliPrompt completion, parameter info, and quick info completed for all three platforms.  Next is to knock out code snippet UI and then all IntelliPrompt features should be about done.

SyntaxEditor vNext Vector and Metro Images

by Avatar Bill Henning (Actipro)
Friday, November 9, 2018 at 5:29pm

BlogPostBanner-SyntaxEditor-DevNotes

As mentioned in a previous post, we have been working on refactoring the core internal implementation of our SyntaxEditor code editor control on the WPF, UWP, and WinForms platforms.  This effort (codenamed vNext) is being made to bring all three platforms onto the same codebase for easier updating moving forward, and to enhance features wherever possible.

We've been plowing through remaining SyntaxEditor feature areas that need to be ported to our vNext codebase, and there are only a few left.  One that we just completed is updating images used in the product, which appear in IntelliPrompt popups and the NavigableSymbolSelector.

Vector Metro Images (WPF/UWP)

The WPF and UWP versions of SyntaxEditor have had Metro Light and Metro Dark image set options for quite a while now.  But they've always been raster (bitmap) graphics that don't appear crisp on high DPI monitors.  This is something we're addressing in vNext.

For vNext, all of the Metro images will be vector images.  They will look crisp and clear at 16x16 100% DPI, but will look just as good (if not better) when used on high DPI monitors.

Here's the images at 200%:

SyntaxEditorVectorImages

Metro Images for WinForms

The WinForms SyntaxEditor has only had the Classic image set in the past.  The Classic image set is similar to the full color gradient images found in earlier versions of Visual Studio.

In vNext, we're bringing the Metro Light and Metro Dark image sets as options to the WinForms SyntaxEditor, with the Metro Light set as the default.

What's Next

We are continuing to work through remaining feature areas that need porting to the vNext codebase.  The last big one to tackle is IntelliPrompt.  Some of the UI pieces involved in IntelliPrompt need to be updated a bit for compatibility between the three platforms.  Once we get that going, these new vector images will look amazing in the IntelliPrompt UI.