The Actipro Blog

We’re currently working on implementing completion lists in SyntaxEditor for WPF.  Completion lists are basically the mechanism used to provide “complete word” and “member list” functionality found in applications like Visual Studio.

While we’re covering all the basics associated with such functionality, we’re taking functionality to the next level in our implementation.  One area in which we’re delving is advanced completion list filtering.

What is filtering?

Normally completion lists appear like in the screenshot above.  They are a list of items and as you type in the editor, the selected item in the completion list is updated to reflect the item that most closely matches what you have typed.  You then can press Tab or Enter to insert the complete text associated with the item.  They help increase the productivity of end users while typing.

Completion list filtering is a feature that allows the presented items in the list to be filtered down.  This is most useful when you potentially have hundreds of items in a completion list and want the ability for the end user to narrow down the items that are displayed.

SyntaxEditor for WPF contains a feature-rich model for supporting filtering, as we’ll discuss below.

Adding filters to a completion list session

Each time a completion list is displayed, it is called a session.  The session has a large number of properties available that allow you to completely customize its behavior.  One such property is a collection of filters.

Each filter is simply an object that has a Filter method which can return whether an item should be excluded from the displayed items.  The simplest implementation of a filter would be programmatically activated and deactivated by you, the developer.  When active, the filter is applied to the items.

But what if we want to give the end user control of which filters are active?  SyntaxEditor has some very nice features for allowing this, where each filter can tell the completion list how UI should be created to support toggling of the filter.

Filter buttons

One option for filter UI is the creation of a toggle button.  If the toggle button is checked, the filter is not applied (because filters exclude items).  When the toggle button is unchecked by the end user, the filter becomes active and is applied.

In the screenshots above, the left completion list shows the default unfiltered view.  In the right completion list, the method filter has been activated, thereby excluding all members from the list.

Each filter button supports a tooltip so that the end user can hover over it with the mouse to get a better explanation of what it does.

Filter button groups

What if you have multiple “groups” of filters and want to separate them somehow in the UI?  No problem, each filter can be assigned a group name.  The UI generator automatically appends separators between groups.

In the screenshots above, a second group containing a single Inherited filter button has been added.  Note the separator between the two groups.

In this sample, when the Inherited button is unchecked, it excludes all members that were inherited from Object. 

It is important to note that anything can be placed in the content of these filter buttons.  You could do images and text if you wished.

Filter tabs

Tabs are another sort of UI that can be generated for filters.  With tabs, the related filter is applied only when the tab is selected.  There is a special “All” tab that can be added that deactivates any filters that are applied by tabs.

In the screenshots above, the left completion list has its “All” tab selected meaning the Public members filter is not applied.  If we click the right tab, the Public members filter is applied.

Combining buttons and tabs

Want to combine both filter buttons and tabs?  No problem, SyntaxEditor can handle it all!

In the screenshots above, the left completion list shows all filters deactivated.  The right completion list shows only public members (due to the filter tab selection) and does not show the IntValueChanged event due to the unchecked Events filter button.

Customizability is key

The screenshots above all illustrate how we plan on implementing member list filtering when we get past the core SyntaxEditor for WPF development and into development of a .NET Languages Add-on version that can be used with it.

It’s rather easy for anyone to create filters just like above because you have total control over what filters are available and how they should be generated in the UI. 

We foresee each language developer using our extensible object model to make customized filters for each language and in some cases, context within a language.  For instance, this walkthrough showed a member list.  However if we are editing C# and want to shows namespaces, types, and members, you may wish to have a completely different set of filters displayed.