The Actipro Blog

All the latest UI control development news from Actipro

WPF, UWP, and Silverlight Controls v2017.1 Released

2017.1.BlogPostBanner

The 2017.1 versions of our WPF Controls, Universal Windows Controls, and Silverlight Controls were recently released, with the WPF and UWP controls getting some enormous updates in these versions.

The primary focus of the 2017.1 version in WPF and UWP was to add an improved PropertyGrid control and tree controls (TreeListBox and TreeListView) in our new Grids product, and to update Editors to be more modern/lightweight, and share a codebase between the two platforms.  Another focus was on maximizing the performance of all the controls.  The new PropertyGrid for instance shows a massive speed increase over the older WPF v2016.1 PropertyGrid.

PropertyGrid

See the entire lengthy detailed update list in these announcement posts:

If you want to discuss the new controls added in 2017.1 or have suggestions for additional features, please join our #UIControls channel in our Slack team.  It's free and you can chat with us and other customers.

Please note that the v2017.1 WPF Controls have PropertyGrid, Editors, and licensing breaking changes to support better API design and features, so be sure to read the "Converting to 2017.1" topic in the documentation that comes with the controls.  It walks through everything in detail.

ProductHeadingGenericGrids

Grids is a new product added to the WPF and Universal Windows Controls in v2017.1.  It features three primary controls:  TreeListBox, TreeListView, and PropertyGrid.

TreeListBox

TreeListBox is a single-column control that renders a tree structure.  It is designed to mimic the features found in the Visual Studio Solution Explorer.  You have full control over the appearance of each node, and can easily wire up any tree data model for rendering via the use of our adapter pattern.

TreeListBox

The UI tree is virtualized for optimal performance.  Unlike the standard WPF TreeView, TreeListBox is a single ItemsControl that is far less resource intensive and doesn't experience odd vertical scroll jumpiness.

TreeListBoxAsyncLoading

You have full control over whether nodes are expandable, when they load children (and with optional use of async loading with a busy indicator as seen above), and selection modes (single/multiple).  A powerful filtering mechanism is included that allows you to add type-to-filter support.  F2 can initiate inline editing of node text.  Drag and drop can be enabled and you determine what is dragged/dropped.  This just scratches the surface, and there are many other features included.

TreeListView

The TreeListView control builds on top of the foundation provided by TreeListBox and adds multiple columns with an optional header, similar to a standard WPF ListView.

TreeListViewColumns

Columns can be sized using several algorithms, resized/reordered by the end user, or certain columns frozen such that they don't scroll horizontally.  Grid lines can be optionally displayed.

PropertyGrid

The PropertyGrid control is based on TreeListView and renders a grid of all the properties of one or more objects and their values. Properties can be displayed by category, alphabetically, or using a custom sort.

PropertyGridBrushEditBoxOpen

A PropertyGrid control was available in older versions of our WPF Controls, but we rewrote much of the internals for v2017.1 and optimized the object model to focus on maximizing speed and ease of use.  The new PropertyGrid can load large complex objects almost instantly.  It's simpler than ever to customize how properties are edited via the use of property editor DataTemplates.  You have full control over which properties are presented and how.

ProductHeadingGenericEditors

The 2017.1 version ported the Universal Windows Editors back to WPF so that they now share a codebase.  This decision was made because the newer Editors designs are much more lightweight in terms of UI elements used in each control, and the number of bindings involved.  This improves UI performance when using many Editors controls in grids like PropertyGrid.

You'll still find many great editing features such as the ability to use arrow keys when typing in edit boxes to increment or decrement part values.

DoubleEditBoxOpenedCalculator

Each edit box now has an optional dedicated picker control that is used in the drop-down, like the calculator shown above.  The picker can be easily styled if a custom appearance is needed.

DateTimeEditBoxOpened

In addition to porting the UWP Editors to WPF, we also added a number of new editor controls.  Editors in both platforms feature specialized edit boxes and pickers for these .NET types:  Brush, Byte (WPF only), Color, CornerRadius, Date, DateTime, Double, Enum, Guid, Int16, Int32, Int32Rect (WPF only), Int64, Point, Rect, Single, Size, Thickness, Time, TimeSpan, and Vector (WPF only).

Rating

Editors also has these other various miscellaneous controls:  Calculator, CountryComboBox, CurrencyComboBox, EnumListBox, GradientStopSlider, HsbColorPicker, MonthCalendar, RadialHuePicker, Rating, SaturationBrightnessPicker, and Spinner.

ProductHeadingGenericShared

The licensing mechanism was updated for the WPF Controls in v2017.1 to be simpler.  Regardless of which WPF products you've licensed from us, your apps will only need a single line in the licenses.licx file going forward.  Please read the Converting to 2017.1 topic in the documentation for details on these updates.

Enjoy the new version!

TaskDownload TaskBuyNow

WPF Controls 2017.1 Beta Testers Requested

PostBannerWPFControlsDevNotes

Hey everyone, we've been working very diligently on the 2017.1 version of our WPF controls for the past several months and a public beta is almost ready.  We'd love as many customers as possible to participate in the beta.  First, let's give an overview of what's new in the 2017.1 version.

Editors Reimagined

In the 2017.1 version, we reimplemented all Editors controls to be faster and more lightweight in terms of elements/bindings, and to use a common codebase with the Universal Windows Editors product.  The new designs are better optimized for use in large quantities such as within data grids or property grids.

Every new edit box control has more fine-grained control over the step values.  Now a native TextBox control is used for input, which allows for more free-form editing, IME input, and better UIA support.

BrushEditBoxOpened

New and improved drop-down pickers have been designed for each edit box.  The pickers are optimized for mouse, pen, and touch-based entry.  The screenshot above shows the BrushEditBox and the new BrushPicker drop-down control.  Altering any edit box's drop-down is simply a matter of providing an alternate Style for its picker control.

TimeEditBoxOpened

New edit boxes have been added for the Byte, Int16, and Single numeric types, along with dedicated date-only (DateEditBox) and time-only (TimeEditBox seen above) variations of DateTimeEditBox.

Tree Controls Added

Our customers have requested custom tree controls from us for a while now and we delivered in this version.  We now offer a new TreeListBox control that is a single column tree similar to a native TreeView but optimized for MVVM usage, virtualization, and speed.  It supports nearly all of the advanced features you'll find in a tree control like the Visual Studio Solution Explorer tree.

TreeListViewColumnReordering

We also offer a new TreeListView control that is built upon the TreeListBox control but displays multiple columns similar to a ListView.  Each column supports its own distinct user interface via data templates.

Both of these controls are packaged in a new Grids product.

PropertyGrid Reimagined

While the PropertyGrid control found in our 2016.1 and earlier versions was very feature-rich, its performance sometimes left much to be desired and customization via property editors wasn't very straightforward.

PropertyGridIntro

In the 2017.1 version, PropertyGrid has been rewritten from scratch and constructed around the foundation provided by the new TreeListBox and TreeListView controls.  It's now lightning fast and loads complex objects (like the properties of itself) almost instantly.  A lot of this is due to simplification of the internal object model, use of virtualization techniques, and fewer overall UI elements.  You'll definitely notice the speed increase.

The core object model used to track properties and categories has been improved and creating custom property editors is much more straightforward now.

The new PropertyGrid is part of the Grids product as well.

Beta Testers Wanted

If you'd like to help us beta test the product, please write our support address and let us know your existing 2016.1 license information.  We will notify you as soon as the public beta is ready and will send you a 2017.1 license if your subscription is still active. 

The code for the beta is near complete and should be pretty stable.  We have a full array of samples and documentation has been completely updated, including conversion notes.

We also will be chatting about the beta in our Slack channels so please join if you have Slack.

Tags: , ,

TreeListView - A Multi-Column Variant of TreeListBox

PostBannerWPFControlsDevNotes

In the last blog post on our TreeListBox control development, we announced that the TreeListBox control was ready for closed alpha testing.  TreeListBox is a new control that has much of the same functionality as the tree control found in the Visual Studio Solution Explorer.

In today's post, I'd like to announce a new TreeListView control that is now also ready for alpha testing.  The TreeListView control is a multi-column variant of the TreeListBox control that renders similar to a standard ListView but has all the tree and advanced features found in TreeListBox.

TreeListViewColumnReordering

The animation above shows several of the features found in this new control such as node expansion, column resizing, column reordering, column header context menus, and more.

Feature Progress

Thus far these TreeListView features have been completed:

  • All features found in TreeListBox.
  • Templates, template selectors, or text property bindings used to specify custom content for each cell.
  • Column width can be a specific pixel value, auto (size to header, cells, or both), or star-sized.
  • Optional minimum and maximum widths for column auto/star-sizing modes.
  • Columns can optionally be resized, reordered, and have visibility toggled by the end user.
  • Frozen columns that don't scroll horizontally.
  • Set which column renders the indentation and expander buttons.
  • Column headers have a built-in context menu, and the headers themselves can be hidden.
  • Size columns to fit contents.
  • Optional grid line display.
  • Numerous events for column resizing, reordering, visibility changes, and header menu requests.

Summary

If you would like to start working with either of the controls and provide us with feedback, please write our support address or chat with us on Slack to sign up for testing.  Now is the time to contribute your additional feature ideas and report bugs.  Anyone who has a WPF Studio license is fully licensed to use the control in their apps.

TaskWideContactUs TaskWideChatWithUs

TreeListBox - New Features and Ready for Alpha Testing

PostBannerWPFControlsDevNotes

In the last blog post on our TreeListBox control development, we talked about new features like async loading and inline editing that were added.  In today's post, we'll talk about some more new features and we're also announcing that the alpha test of this control is now ready.

If you would like to start working with the control and provide us with feedback, please write our support address or chat with us on Slack to sign up for testing.  Now is the time to contribute your additional feature ideas and report bugs.  Anyone who has a WPF Studio license is fully licensed to use the control in their apps.

New Features

Since our new post, we've continued to enhance the control and add new features.  First, you now can optionally display the root item in the control.  When you choose not to do so (the default), the root node's children will be the top-level items.

There is now more control over expandability and when children are queried.

A robust drag and drop system supports dragging to external controls, dragging and dropping on the same control, and dropping from external controls.  You have full control over the visual feedback that is provided and what happens when a drop executes.

The control supports data virtualization when virtualized lists of child items are used.  With data virtualization, it's possible to support paged retrieval of items as they are requested for display.

A couple new options determine how far items are indented based on their depth.

Feature Progress

Thus far these features have been completed (New! marks new features since the last post):

  • Fully customize the appearance of each node.
  • UI virtualization, allowing for hundreds of thousands of nodes to be loaded into a tree very quickly.
  • No scrollbar jumpiness as seen in other virtualized tree controls when scrolling vertically.
  • Use your own custom data models as the source for the tree, with no dependencies on UI or our interfaces. An adapter class is used (and can be fully customized to fit your model) to communicate between the UI and the model for things like expansion state, getting children, etc.
  • The adapter can be coded with bindings in XAML (convenient, yet can be slow in very large trees) or via method overrides (slightly more work but lightning fast).
  • New! Optionally show the root item in the control.
  • New! Fine-grained control over expandability and children query triggers.
  • Optional async loading with busy indicator display.
  • Events for expansion.
  • Events for selection.
  • Single or multi-selection, with Ctrl and Shift-based selection options.
  • Filter selection such as only allowing sibling nodes to be multi-selected, or nodes of the same depth.
  • All common tree hotkeys supported including special ones for expanding and collapsing entire branches.
  • Select or ensure nodes are visible by path.
  • Double-click and Return key default action handling.
  • Optional checkboxes within the data templates.
  • Intelligent text searching so when you start typing while the control has focus, it will auto-focus the item that matches the typed text.
  • Inline editing via F2 and single-click on a selected item.
  • Per-item context menus that can be constructed dynamically via an event.
  • New! Drag items to external controls, drop data from external controls, or drag/drop items within the control itself.
  • New! Dragged items can highlight above, on, and below drop areas for each item.
  • New! Single and multiple item dragging is supported.
  • New! Optional data virtualization optimization when using virtualized collections.
  • New! Indentation of top-level and other nodes can be set independently.

Summary

The TreeListBox control is now ready for alpha testing.  Please contact us via our ticket system or in Slack to sign up for testing and send in your feedback.  We will continue to refine the API based on your feedback before a future final release.

TaskWideContactUs TaskWideChatWithUs

TreeListBox - Async Expansion, Inline Editing, and More

PostBannerWPFControlsDevNotes

In the last blog post on our TreeListBox control development, we gave a list of features that have been implemented so far and showed a screenshot of sample usage with rendering customization.  In today's post, we'll show some more usage scenarios, will request your immediate input for drag/drop, and will give an updated feature list.

New Features

First, what's new since the last post?  We now have multiple options for governing if and when the determination of expander display is made for a node.  This is handy when you want to do minimal data model access checking for children, or when you know for certain that a node never has child nodes.

We now support optional async loading features where you'll be able to utilize a new RingSpinner control (or any other busy indicator) to relay a loading state to the end user.  Async loading means that potentially lengthy operations such as file or database access won't block the UI thread when expanding a node. 

Here's an example of async loading, where a simulated random delay is invoked when expanding each file folder:

TreeListBoxAsyncLoading

Notice how the UI remains fully responsive even while loading items.

Inline editing is fully supported when enabled.  Press F2 or single click on a node's content to enter edit mode where a new text value can be entered.  Pressing Enter or losing focus commits the value, while pressing Esc cancels the edit.

An event will fire when an item requests a context menu.  Dynamically create the menu for that particular item (or the entire multi-item selection).

Drag/Drop Feature Feedback Requested

Drag and drop is one of the last features we want to get in place before an alpha test version is prepared of the control.  This is a complex topic since it involves single/multi-selected items (that could be at various tree depths) being dragged and dropped at other depths, or even dragged externally.  Likewise, external items could be dragged onto the control.  We want to get your feedback now as we start on drag/drop features to ensure we meet all your needs!

Please either write our support address with your feedback or join our Slack discussion on the topic and chat right with us.  The benefit of the chat option is that we are posting screenshots and asking for feature input right during development.  It gives you an opportunity to give direct feedback and help guide features.

Feature Progress

Thus far these features have been completed (New! marks new features since the last post):

  • Fully customize the appearance of each node.
  • UI virtualization, allowing for hundreds of thousands of nodes to be loaded into a tree very quickly.
  • No scrollbar jumpiness as seen in other virtualized tree controls when scrolling vertically.
  • Use your own custom data models as the source for the tree, with no dependencies on UI or our interfaces.  An adapter class is used (and can be fully customized to fit your model) to communicate between the UI and the model for things like expansion state, getting children, etc.
  • The adapter can be coded with bindings in XAML (convenient, yet can be slow in very large trees) or via method overrides (slightly more work but lightning fast).
  • New! Multiple display modes for node expanders.
  • New! Optional async loading with busy indicator display.
  • Events for expansion.
  • Events for selection.
  • Single or multi-selection, with Ctrl and Shift-based selection options.
  • Filter selection such as only allowing sibling nodes to be multi-selected, or nodes of the same depth.
  • All common tree hotkeys supported including special ones for expanding and collapsing entire branches.
  • Select or ensure nodes are visible by path.
  • Double-click and Return key default action handling.
  • Optional checkboxes within the data templates.
  • Intelligent text searching so when you start typing while the control has focus, it will auto-focus the item that matches the typed text.
  • New! Inline editing via F2 and single-click on a selected item.
  • New! Per-item context menus that can be constructed dynamically via an event.

Summary

The TreeListBox control continues to progress well and its feature set is coming right in line with the VS Solution Explorer's tree control's feature set.  We look forward to discussing drag/drop feature requirements with you via our ticket system or in Slack!

TaskWideContactUs TaskWideChatWithUs

TreeListBox - Progress and Checkable Nodes Sample

PostBannerWPFControlsDevNotes

Last month we posted that we were beginning development of a new TreeView replacement control that addressed the many shortcomings of the native WPF TreeView, and were asking for input at that time.  We've been working on this control for both WPF and UWP and have made very good progress.

Feature Progress

Thus far these features have been completed:

  • Fully customize the appearance of each node.
  • UI virtualization, allowing for hundreds of thousands of nodes to be loaded into a tree very quickly.
  • No scrollbar jumpiness as seen in other virtualized tree controls when scrolling vertically.
  • Use your own custom data models as the source for the tree, with no dependencies on UI or our interfaces.  An adapter class is used (and can be fully customized to fit your model) to communicate between the UI and the model for things like expansion state, getting children, etc.
  • The adapter can be coded with bindings in XAML (convenient, yet can be slow in very large trees) or via method overrides (slightly more work but lightning fast).
  • Events for expansion.
  • Events for selection.
  • Single or multi-selection, with Ctrl and Shift-based selection options.
  • Filter selection such as only allowing sibling nodes to be multi-selected, or nodes of the same depth.
  • All common tree hotkeys supported including special ones for expanding and collapsing entire branches.
  • Select or ensure nodes are visible by path.
  • Double-click and Return key default action handling.
  • Optional checkboxes within the data templates.
  • Intelligent text searching so when you start typing while the control has focus, it will auto-focus the item that matches the typed text.

Sample Usage

Here's a screenshot of a recent sample being put together for the control:

TreeListBoxChecking

In this sample, we have two levels of nodes.  The top-most level is folders (whose icons actually toggle with the expand/collapse state), while the inner level has checkboxes and buttons that allow for a dialog to be displayed when clicked for further configuration.

Double-clicking a folder item will toggle its expansion state, while double-clicking a checkable node will toggle its checked state.  This sample also shows usage of a DataTemplateSelector to pick which DataTemplate to use for each node.

Summary

The control is coming along really nicely and our goal is to match general features found in the VS Solution Explorer.  The features above are implemented for both WPF and UWP.  We still have more features planned before we open up a beta. 

If you have any other suggestions, please either write our support address with your feedback or join our Slack discussion on the topic and chat right with us.  The benefit of the chat option is that we are posting screenshots and asking for feature input right during development.  It gives you an opportunity to give direct feedback and help guide features.

TaskWideContactUs TaskWideChatWithUs

Universal Controls 2016.1 Build 303 Released

Universal-2016.1.0303-BlogPostBanner

Universal Controls 2016.1 build 303 has been released and is now available for download.  This version adds a beta of our Docking/MDI product, making it possible to include docking tool windows and/or a multiple-document interface in your apps for Universal Windows apps. SyntaxEditor also includes two new Metro-themed image sets that can be used.

UniversalDocking640

The Docking/MDI beta included in this version includes nearly all the docking window functionality found in the WPF version of our Docking/MDI controls.  Be sure to check it out and let us know what you think.

See the announcement post for the detailed list of enhancements and updates in this build.

Do you want to chat with us about what we're working on next?  Register to join our Slack team and help guide our future development efforts!

TaskLearnMore TaskDownload TaskBuyNow

Docking/MDI for Universal Windows Beta

UniversalDevBlogPostBanner

A couple weeks back, we released our first set of Universal Windows controls.  And right before that, all the work we've been doing on Docking/MDI for WPF (codenamed vNext) the past few months was released as part of our 2016.1 WPF Controls.  Docking/MDI's internals were rewritten from scratch to support all the latest docking window oriented functionality found in apps like Visual Studio 2015 and the feedback on the new version has been tremendous.

Here's the really exciting part for Universal Windows app devsā€¦ Part of that vNext rewrite was to also ensure that the same Docking/MDI API and design would work in Universal Windows apps!  And today we are formally announcing that we are looking for beta testers to try it out. 

This SyntaxEditor and Docking/MDI combination screenshot shows a tabbed MDI and tool windows docked around it:

UniversalDocking

Are you making a Universal Windows line of business app or any other app that would benefit from docking tool windows and/or a fully-managed tabbed or windows multiple document interface?  Then look no further.  The Docking/MDI product for Universal Windows has nearly the entire feature set of the amazing WPF version!

Write Us to Beta Test

If you'd like to help beta test this brand new product for your Universal Windows app, e-mail our support address to request beta access.  In your email, please give us an overview of the app you're developing and how you plan to integrate docking windows and/or MDI into it.

Universal Windows Controls 2016.1 Released

BlogPostBannerUniversal.2016.1.0302

We're pleased to announce that our Universal Windows controls have officially been released and are ready for use in your Windows 10 apps!  Download a free evaluation today and start building your apps with them.

Let's take a quick glimpse at some of the samples that ship with the product and show off the controls:

ChartsBaseballStatsThumbnail   EditorsColorEditBoxThumbnail

MicroChartsCallCenterThumbnail   SyntaxEditorHtmlEditorThumbnail

EditorsDateTimeEditBoxThumbnail   MicroChartsStockReportThumbnail

ViewsTaskPlanningThumbnail   ChartsFinancialDashboardThumbnail

The focus of this first release was to port our older WinRT XAML controls up to the Universal Windows platform.  Look for plenty more updates and controls added in the future.

TaskLearnMore TaskDownload TaskBuyNow

Easily Manage Task Queues Using the TaskBoard Control

BlogPostBannerViews

The 2015.1 versions of our WPF, Silverlight, and WinRT/XAML controls were released a couple weeks ago and in today's post I'd like to highlight one of the great new controls that were introduced in that version:  TaskBoard.

TaskBoard Overview

A task board consists of zero to many columns, each of which can contain zero to many cards.  Columns and cards can be dragged and reordered, using pleasing animations.  Let's see an example to give you a picture of how it all works.

In the demo below, we have a TaskBoard control that is being utilized for a task planning system, commonly used in project management to help organize the priorities of a team.  The columns represent task groupings, and the cards represent individual tasks.  Each column has a header and optional footer that surrounds the contained card items.

TaskBoard
In this sample, each column header specifies the task grouping name and the column footer contains an "Add a task" button.  The footer of the overall TaskBoard control contains an "Add a list" button, which shows at the end of the list of columns.

The entire UI of the task board can be fully customized.  The cards can show any custom content as well, or can vary content based on data template selectors.

The TaskBoard control is designed for MVVM usage and makes it easy to fully alter the appearance of the entire layout with properties for column/card spacing, padding, corner radius, etc.  Best of all, rich animations are used whenever dragging columns or cards.

TaskBoard also works great with touch input.  Use it to create task planning systems on large touchscreen displays.

Summary

The full source TaskBoard demo seen above is included in the sample projects that ship with our WPF, Silverlight, and WinRT/XAML controls, and is available for you to check out today.

Let us know what you think after you try it!

TaskDownload TaskLiveDemo TaskBuyNow