The Actipro Blog

All the latest UI control development news from Actipro

Docking/MDI vNext - Pressing Esc to Cancel Drags

PostBannerWPFControlsDevNotes

As mentioned in this previous post, we've been looking for ideas to further improve our WPF Docking/MDI product, which already is the market leader for docking tool window and MDI functionality.  We've committed to working on a complete internal restructuring of the product that we will call Docking/MDI vNext.  We're doing our best to keep the same general API surface, while providing even more advanced features in every area of the product.  We've collected suggestions from our customers over the past several years and are working to meet them as best we can with Docking/MDI vNext.

In yesterday's post, we gave a first glimpse at the updated tool window dragging UI and behavior.  The new drag behavior is similar to the latest behavior found in Visual Studio where dragged tool windows and containers immediately float, but we've improved upon it with fast, subtle animations for dock guides and drop previews.

One of our customers saw that post and suggested that we allow for the Esc key to cancel the drag and restore it back to its prior location.  This is something VS doesn't currently do and can be annoying when you accidentally start a drag, and then manually have to put the tool window back in place.  This was a great suggestion so we added it this morning.

Feature Description

As you drag a tool window or container, you can press the Esc key to cancel the drag.  If the drag originated from a docked state, it will restore back to that prior location.  If the drag originated from a container that was already floating, it will restore the container back to the prior X/Y coordinates.

Here's an example:

ToolWindowDragCancel

In this screenshot sequence, I start off by dragging the Output tool window to float it and press Esc while still dragging.  The Output tool window restores back to its prior located, attached to the Find Results tool window.

Then I drag the Output tool window again and drop it into a floating state.  I resize the container and drag to move it, pressing Esc again while dragging.  The floating container jumps back to its previous floating location before the drag started.

Summary

Thanks for the great suggestion Jim!  If anyone else has suggestions for features, please send them over.

Docking/MDI vNext is currently still in early development stages but is progressing very well.  Please contact us via email if you are an existing customer and would like to sign up as a beta tester for vNext.  If you have any other suggestions for improving Docking/MDI, now is the time to get them in.  We'll post more updates on our vNext improvements soon.

In the meantime, please download our current Docking/MDI control product and give it a spin.

TaskDownload TaskLiveDemo TaskBuyNow

Tags: ,
Filed under: Actipro, In development, WPF

Docking/MDI vNext - Dragging and Dock Guides

PostBannerWPFControlsDevNotes

As mentioned in this previous post, we've been looking for ideas to further improve our WPF Docking/MDI product, which already is the market leader for docking tool window and MDI functionality.  We've committed to working on a complete internal restructuring of the product that we will call Docking/MDI vNext.  We're doing our best to keep the same general API surface, while providing even more advanced features in every area of the product.  We've collected suggestions from our customers over the past several years and are working to meet them as best we can with Docking/MDI vNext.

In today's post, I'd like to show off the redesigned dragging functionality for tool windows and the dock guide display.

Feature Description

For vNext, one thing we're working very hard on is injecting fast, subtle animations throughout the product.  We want the docking window UI to appear fluid, much like the rest of Windows.  We pay special attention to animation speed so that the animations provide pleasing effects while not hindering usability in any way.

In the area of dragging tool windows, we have quick fade ins for the dock guides.  Also, a blue drop preview appears when moving over dock guides, or tool window container title bars and tabs.  The blue drop preview has an animation that "pops" into place, using a combination of fade and scale effects.  Check it out below:

DockingDockGuides

This screenshot sequence also shows off a new method of dragging tool windows for vNext.  In the past, starting a tab drag would drag a blue rectangle only.  In vNext, starting a tab drag (or a tool window container drag via title bar) will immediately detach the tool window(s) from the layout and float them, tracking the floating container with the pointer.  As you drag over a dock guide or tool window container title bar/tab area, the semi-transparent blue drop target appears on top of the floating container to show you where the drop will occur.  This new behavior matches what is found in the latest version of Visual Studio.

You'll notice that I referred to the "pointer" and not mouse above.  That's because we also are taking great care in vNext to ensure dragging, etc. all fully work with any pointer such as mouse, stylus, or touch!  The docking capabilities seen above can be accomplished with your finger on a touchscreen.

Summary

These are just some of the really advanced features we're adding to the product for vNext.

Docking/MDI vNext is currently still in early development stages but is progressing very well.  Please contact us via email if you are an existing customer and would like to sign up as a beta tester for vNext.  If you have any other suggestions for improving Docking/MDI, now is the time to get them in.  We'll post more updates on our vNext improvements soon.

In the meantime, please download our current Docking/MDI control product and give it a spin.

TaskDownload TaskLiveDemo TaskBuyNow

Tags: ,
Filed under: Actipro, In development, WPF

Looking Forward to Build 2015

Build

We'll be attending Microsoft's annual Build event next week in San Francisco.  We're really excited about where Microsoft is headed with Windows updates, and innovations in other technologies.  The "one Microsoft" vision is unfolding before us, with the melding of the best aspects of recent Windows versions into a single Windows 10 platform.

Windows 10 will be a logical upgrade for any consumer running reasonably recent versions of Windows.  Windows 7 - 8.1 consumers will be offered it free of charge, making it a no-brainer upgrade for those users.  We really appreciate Microsoft's renewed focus on the importance of the desktop, where Universal apps will now be able to run alongside their Win32 app counterparts.

Speaking of the desktop, it's just as important as ever on PCs, especially in Windows 10.  We are fully committed to continuing development of new UI controls and products for the WPF platform.  Our current primary development focus is working on a massive update to our very popular WPF Docking/MDI product to add a whole host of new features.  Check out prior blog posts for some details on what's coming and look for many more in the near future.

In regards to Universal apps, we will be updating our WinRT XAML controls to target the Universal app platform over the coming months so that they are ready for use in developing Windows 10 apps.  The most recent release of those controls added a new task board control, an advanced Python language for our SyntaxEditor code editor control, bar code display controls, and more.

See you at Build 2015!

Tags:
Filed under: Actipro

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

WPF Controls 2015.1 Build 621 Released

BlogPostBannerWPF201510621

WPF Controls 2015.1 build 621 has been released and is now available for download.  This build has several new minor features.

Due to a certain initialization bug that was located in the original 2015.1 release, it is highly recommended that customers who have downloaded 2015.1 build 620 upgrade to this new build.

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

TaskDownload TaskLiveDemo TaskBuyNow

Tags:
Filed under: Actipro, New features, WPF

SyntaxEditor - Find All Using EditorSearchView

PostBannerSyntaxEditorDevNotes

In today's post, we'll show the optional Find All button that was recently added to the SyntaxEditor (WPF, Silverlight, and WinRT/XAML platforms) EditorSearchView control.

Feature Description

SyntaxEditor has always had the ability to perform "find all" searches programmatically, however we received feedback from numerous customers looking to add this to our EditorSearchView control so that their end users could also access it.

EditorSearchView

The EditorSearchView control seen above shows the new Find All button visible.  Note that it is not visible by default (the new EditorSearchView.IsFindAllButtonVisible property defaults to false) since unlike the other find and replace operations, there is no automatic UI change in the editor itself for a find all operation.  Instead, you need to display the results somehow, such as in a find results list.

FindResults

This screenshot shows an example find results list.  The full source code for this sort of setup is included in the samples that come with SyntaxEditor.

Summary

Providing the ability for your app's end users to find all instances of search text is certainly a handy addition.

The features described above are available in our latest WPF, Silverlight, and WinRT/XAML control versions and are available for use.

TaskDownload TaskLiveDemo TaskBuyNow

SyntaxEditor - Move Selected Lines Up/Down

PostBannerSyntaxEditorDevNotes

In today's post I'd like to show a new feature that was recently added to SyntaxEditor (WPF, Silverlight, and WinRT/XAML platforms): move selected lines up or down.

Feature Description

Moving a range of selected lines from one place to another is a very common task in any text editor.  Of course this can be accomplished by cutting and pasting the selection around.  But for small adjustments to the location of several lines, the ability to simply move the lines is a valued feature.

We've added the ability to move selected lines up and down via the Alt+Up and Alt+Down keys respectively.  Let's see a couple examples of it in action.

MoveSelectedLinesUpDown

In this sample, I selected the lines that contain the AnotherMethod method.  Then I pressed Alt+Up several times to move the method above the Bar method.  I then pressed Alt+Down to move the lines back down to their original position.

MoveSelectedLinesUpDown2

In this second sample, I had a comment that wasn't in the right place and I wanted to move it up.  I just put the caret on the line and pressed Alt+Up a couple times to move it back to the right spot above the color property declaration.

Summary

The ability to move selected lines up and down is a real productivity enhancer when doing text editing.

The features described above are available in our latest WPF, Silverlight, and WinRT/XAML control versions and are available for use.

TaskDownload TaskLiveDemo TaskBuyNow

WPF, Silverlight, and WinRT/XAML v2015.1 Released

BlogPostBanner20151

The 2015.1 versions of our WPF, Silverlight, and WinRT/XAML controls have been released and are now available for download.

Major new features are described below.  See the announcement posts for the large detailed list of enhancements and updates, including many items not listed below:

ProductHeadingWinRTBarCodes

Our Bar Codes product has been ported to the WinRT XAML platform.  This product, which already exists on WPF and Silverlight, allows your apps to render vector-based bar codes using many common 2D and linear bar code symbologies.

BarCodes

A full set of demos and QuickStarts are included to help you get going.

ProductHeadingWPFDocking

The interop assembly that makes it easy to use Docking/MDI with the Prism framework has been updated to reference the latest Prism v5.0.

DockingMetro

We've made numerous layout and performance updates to further improve the product. 

We also have been working hard on building a completely new internal engine for the Docking/MDI product, which will be available sometime later this year.  Keep an eye on our blog for posts detailing the advanced features that are coming with those updates.

ProductHeadingWinRTEditors

All of our edit box controls in the WinRT Editors now have an IsEditable property.  When set to false, the edit box behaves more like a ComboBox, while still retaining the rich popups that make the editors unique.  This is an ideal option for apps whose primary mode of interaction is expected to be touch.

ColorEditBoxNoAlpha

The CornerRadiusEditBox, PointEditBox, RectEditBox, SizeEditBox, and ThicknessEditBox controls have been updated to support text parsing one and/or two number entries where appropriate, which is useful for easy uniform value entry.

ThicknessEditBox

In the above ThicknessEditBox, a 2 is typed and then Enter is pressed.  The value is converted to a uniform thickness of 2.

A ValueChanged event has been added to all edit boxes, which fires when a value change is committed.

Finally, edit box padding has been adjusted so that more content is visible in the same amount of space.

ProductHeadingWPFGauge

A new DigitalGauge.CharacterSegmentThickness property allows for segment thickness adjustments.  This gives you even finer control over the presentation of your digital characters.

DigitGaugeSegmentThickness

We've enhanced the 'Linear Gauge Rolling Scale' QuickStart with a new infinite rolling scale example for navigation headings.

HeadingGauge

ProductHeadingGenericSyntaxEditor

The EditorSearchView control now supports an optional "Find All" button.

EditorSearchView

The RTF export logic has been updated to support extended ASCII characters.

The free CSS language definition now supports the syntax highlighting of media queries.

We've dramatically improved the speed of large completion list display.

Several other performance improvements have been made, such as optimized the scenarios for which the TokenTagger raises its TagsChanged event, and refining of the automatic outlining update logic.

In the WinRT version, we added the SyntaxEditor.AreSelectionGrippersEnabled property, which determines whether the selection grippers show after touch within a view.

.NET Languages Add-on

The C# parser has been improved to recover better when encountering open block statements so that its AST node structure remains better in tact.

DotNetPropertyAccessor

The IntelliPrompt quick info for properties now includes accessors, making it possible to see whether a property is read-only.

Python Language Add-on

The Python language has received an enormous amount of updates, that in sum really improve the entire automated IntelliPrompt feature set.

PythonAddon

Check out all these enhancements:

  • Added IntelliPrompt for private members and updated the completion list to have Public and All filter tabs.
  • Added reflection data for private methods/fields of built-in primitive types.
  • Added IntelliPrompt for built-in exception types.
  • Improved IntelliPrompt for numerous built-in modules.
  • Greatly improved IntelliPrompt for package and module imports.
  • Improved IntelliPrompt for function parameters by examining available assert statement isinstance calls.
  • Added IntelliPrompt for static fields on classes.
  • Improved the resolution of base types for classes.
  • Added the optional IResolver.UnknownReturnTypeReferenceCallback callback that can be used to provide return type references for unknown types.
  • Updated the resolver to recognize where 'cls()' in a class method can create a new instance of the related class.
  • Updated the IntelliPrompt completion list to filter unmatched items.
  • Updated the IntelliPrompt docstring display to retain presentation of line feeds.

ProductHeadingGenericViews

The Views product has a new TaskBoard control added, available in all three (WPF, Silverlight, and WinRT) platforms.  TaskBoard can be used to create a board of reorderable columns and cards.  All of the drags use smooth animations to give you the feel that you are really interacting with the object.

RepairShopScheduling

The first full-source sample that comes with the control is a Repair Shop Scheduling demo, which shows how a TaskBoard can be used to interactively schedule work to resources, such as employees. TaskBoard excels at providing a visual way of representing work/tasks (displayed as cards) within a queue of some sort (displayed as a column).

PageBannerDefault

The second sample is a Task Planning demo, which shows how a TaskBoard can visually organize a project's tasks.

ProductHeadingGenericShared

We've added another new primitive SemiEllipse shape, which renders half of an ellipse.

SemiEllipseShape

The existing Triangle shape has a new IsClosed property that when set to false will create a triangle with only two of the sides rendered.

TriangleShape

Finally, in the WPF Shared Library, we added GradientBrushSlider.CanAddStops and CanRemoveStops properties that determine whether stops can be added and removed from a GradientBrushSlider.

TaskDownload TaskLiveDemo TaskBuyNow

Docking/MDI vNext - Tool Window Title Bar

PostBannerWPFControlsDevNotes

As mentioned in this previous post, we've been looking for ideas to further improve our WPF Docking/MDI product, which already is the market leader for docking tool window and MDI functionality.  We've committed to working on a complete internal restructuring of the product that we will call Docking/MDI vNext.  We're doing our best to keep the same general API surface, while providing even more advanced features in every area of the product.  We've collected suggestions from our customers over the past several years and are working to meet them as best we can with Docking/MDI vNext.

In today's post, I'd like to discuss a feature that has been requested by customers: tool window container title bar customizations.

Feature Description

There have been certain scenarios where a customer has wanted to add custom buttons or content into the tool window container title bar.  In the past, you could achieve this by making a clone of the ToolWindowContainer style/template and altering it to include your custom UI in the title bar area.  This works but is tedious and we wanted to make this sort of thing very easy to do for vNext.

In vNext, each ToolWindow now has a ContainerTitleBarContentTemplate property that can be set to a DataTemplate to show in the tool window container title bars.  This can be a button, a label, or any other UI element you can think of.

Usage Example

In this animated example, we show three auto-hide windows.  Each has custom content in the title bar.  The "Preview" tool window has a search button that renders with the same style as the other buttons.  The "Label" tool window has a status label in the title bar that currently says "Status" but could be data bound to a property. 

ToolWindowTitleBars

The "Status" tool window shows a custom circle indicator that says whether the "Is Approved" CheckBox is checked.  When the CheckBox is toggled, it updates a value in the tool window's data context and the indicator changes to another color.

As a bonus, we're also showing how custom content can be injected into auto-hide tabs.  The indicator for the "Status" tool window also appears there and updates live as well.

Summary

These are just some of the really advanced features we're adding to the product for vNext.

Docking/MDI vNext is currently still in early development stages but is progressing very well.  Please contact us via email if you are an existing customer and would like to sign up as a beta tester for vNext.  If you have any other suggestions for improving Docking/MDI, now is the time to get them in.  We'll post more updates on our vNext improvements soon.

In the meantime, please download our current Docking/MDI control product and give it a spin.

TaskDownload TaskLiveDemo TaskBuyNow

Tags: ,
Filed under: Actipro, In development, WPF

Docking/MDI vNext - Docked Size Constraints

PostBannerWPFControlsDevNotes

As mentioned in this previous post, we've been looking for ideas to further improve our WPF Docking/MDI product, which already is the market leader for docking tool window and MDI functionality.  We've committed to working on a complete internal restructuring of the product that we will call Docking/MDI vNext.  We're doing our best to keep the same general API surface, while providing even more advanced features in every area of the product.  We've collected suggestions from our customers over the past several years and are working to meet them as best we can with Docking/MDI vNext.

In today's post, I'd like to discuss a feature that has been heavily requested by customers over the years: docked size constraints.

Feature Description

In the current Docking/MDI product, there is a minimum size that docked tool windows can become but it is hardcoded.  We've had customers request the ability to configure a minimum size for certain tool windows.  Other customers have also requested the ability to set a maximum size.  Yet others would like to see fixed size tool windows.  None of those scenarios are currently supported.  Docking/MDI vNext changes that.

In Docking/MDI vNext, you're able to optionally specify minimum and maximum docked sizes for each tool window.  We've written a lot of complex logic to support this feature in our layouts.  As the DockSite changes size, the tool windows all reflow and do their best to adhere to the docked size constraints that have been given.  It works very nicely.

Want to have a fixed size tool window?  This can be achieved by simply setting the minimum docked size to be the same as the maximum docked size.

Best of all, splitting (also reimplemented for vNext) is fully aware of the constraints and won't let you drag splitters beyond what the the size constraints allow.

Usage Example

Let's have a look at how constraints work with splitters.  In the screenshot below, I've turned off live splitting so that we can see the splitter drag highlights.  In this layout, the Properties tool window has a minimum docked size constraint set.

DockedSizeConstraints

As the mouse drags the splitter upward, you can see how the class view is allowed to become very short and the splitter is still tracking with the mouse.

Later, the mouse is dragging downward but the splitter has reached the point where the minimum constraint of the Properties tool window is.  Thus the mouse cursor is down below the splitter (I kept moving the mouse down), showing that the splitter can't go any further in that direction.

Summary

This is a great feature that we've spent a lot of time on for Docking/MDI vNext.  vNext is currently still in early development stages but is progressing very well.  Please contact us via email if you are an existing customer and would like to sign up as a beta tester for vNext.

If you have any other suggestions for improving Docking/MDI, now is the time to get them in.  We'll post more updates on our vNext improvements soon.

In the meantime, please download our current Docking/MDI control product and give it a spin.

TaskDownload TaskLiveDemo TaskBuyNow

Tags: ,
Filed under: Actipro, In development, WPF