Subscribe: Frank Hileman's WebLog
Added By: Feedage Forager Feedage Grade B rated
Language: English
active group  active  elements  graphics  group  net vector  net  new  sample  vector graphics  vector  version  visual studio 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: Frank Hileman's WebLog

Frank Hileman's WebLog

Vector Graphics with and Visual Studio Integration 8.5 Released

Wed, 21 May 2014 00:15:00 GMT


We have released version 8.5 of the vector graphics system. This release supports Visual Studio 2013. Companies who purchased a license after October 1, 2013, are eligible for a free upgrade. We will be sending you an email.

There is one cosmetic problem which wasted our time, as we could not find a work around. It occurs when your display is set to a high DPI. You can see the problem in the image of the toolbox below, which uses a DPI of 125%, on Windows 7:


The ToolboxItem class accepts only Bitmaps with a size of 16x16. We tried many sizes and many bitmap formats. As you can see, this tiny Bitmap is then scaled by the toolbox, and the scaling algorithm adds artifacts. This is an "improvement" Microsoft recently added to Visual Studio 2013. Update: A Microsoft employee was kind enough to send me an email explaining how to avoid the bitmap scaling artifacts. The Visual Studio icon design guidelines are very important. The scaling will be better in the next release of; it is also improved in the next update to Visual Studio 2013. 7.4 Released

Mon, 07 Jan 2013 16:08:00 GMT


We have released version 7.4 of the vector graphics system. Changes include:

  • Support for Visual Studio 2012, the SHOUTING MENU edition.
  • Redesigned Picture Designer dialog windows: we reduced their size and made them more usable with all environment font sizes.
  • A redesign of the CustomElement class API. This includes breaking changes necessary to fix the underlying design problems. CustomElement based sample code has changed accordingly.
  • Bug fixes. 6.2 Released

Tue, 27 Jul 2010 13:46:00 GMT

Today we released Version 6.2 of the vector graphics system. Changes include: Visual Studio 2010 support. The new Center Selection button, in the Drawing Toobar, pans the designer surface to center the selected Elements. Double-clicking on a Group makes it the Active Group. When a Group is active, double clicking on the background deactivates the Active Group. You can now make a nested Group the Active Group. The Group can be nested to any depth. Formerly, you could only make a top-level Group the Active Group. Keyboard shortcuts for zooming and panning. Use the new PixelSnapMode property, in the RenderAppearance class, to increase the clarity of thin lines, or the edges of rectangles, by snapping points to pixel coordinates. PixelSnapMode values: None Absolute: points are snapped to pixels by rounding absolute coordinates. VectorCenter: a new, unique type of snapping. The Element's Center is snapped to a pixel point. Vectors from the Center to each point are then snapped to a pixel boundary. By snapping vectors rather than points, a small Shape improves its clarity and symmetry. BoundsAbsolute: the upper left and lower right corner of the Element's Bounds are snapped by rounding their absolute coordinates. Interior points in a Polyline or Path are not snapped. Visual Basic versions of some samples. The ThemedRobot and ThemedRobotVB samples, in the Extras package, demonstrate how to use Groups, Rotation transformations, and TransformationReference settings to create a segmented robot arm. Bug fixes. Below are screenshots illustrating PixelSnapMode for small Shapes. First we created Shapes, all the same dimensions, then we zoomed out so the Shapes were no longer naturally aligned on pixel coordinates. From the left to the right, the following PixelSnapMode values were used: None, Absolute, Vector Center. Blown-up versions of the same images are on the second row. Notice how the VectorCenter PixelSnapMode keeps all small shapes at a consistent size, even though they are positioned at fractional pixel distances from one another. PixelSnapMode has no real benefit for Ellipses or Arcs; it is best for Shapes containing some straight lines. It is useful for larger Shapes as well. Below we show the effect of PixelSnapMode on larger Shapes. On the left is None, on the right is VectorCenter: [...] 5.1 Released

Wed, 07 May 2008 18:30:00 GMT

Version 5.1 of the vector graphics system is released. Click the image above to run the robot arm sample. The buttons at the top change the overall color of the application. This color change uses a new feature in called Themes. A Theme is similar to a style sheet in html. A Theme collects common Style and ImageData objects in a single place, for reuse across multiple Pictures, or to swap a set of Styles as a batch. The robot arm sample contains three Themes that are dynamically swapped to change several Styles at the same time. When used across multiple Pictures, a Theme eliminates time wasted duplicating and synchronizing Styles. You can edit and preview Styles in a Theme as you would in any Picture. Other changes in version 5.1 include: Fast Scrolling: by default, Canvas scrolling is hardware accelerated, as demonstrated in an earlier blog post. Serialization: save and restore objects to and from compact binary files or streams. You can serialize objects or your own classes and structures. This is useful for custom editors, storing objects in a database, or transferring objects across a network. You will find serialization related classes in the Prodige.Serialization namespace. Unlike the serialization support built into the .NET framework, the classes in Prodige.Serialization are designed to: minimize file size, maximize speed, operate without reflection or boxing of value types, and provide infinite upward compatiblity for serialized files. TranslucentForm Improvements: the TranslucentForm class, a window providing a complete vector graphics UI with per-pixel alpha transparency, is extensively reworked and many problems are eliminated. Source Code Samples: new samples in the standard and Extras package include a strip chart library, a SCADA simulation, a particle system, a Theme demonstration, a basic button library, and bitmap effects. Two of the these samples are described below. The Users Guide contains new sections describing Themes and Serialization. Bug fixes and smaller enhancements: please see the 5.1 Readme for more information. A new strip chart component is provided in the strip chart sample in the Extras package. Click on the image above to run the sample. The strip chart is designed to minimize CPU usage, so you can use several on the same screen. You can pause the automatic chart scrolling. When paused, you can manually scroll the chart to any data sample. The chart saves data samples in a circular buffer, which you can set to any size needed. The chart also supports zooming in integer increments. Click the image above or below to run the new particle system sample provided in the Extras package. The particle system creates and animates 10,000 particles. Originally written to illustrate the operation of an egg smashing machine, you may wish to use the particle system component to illustrate a mixing or painting operation. The particle system performs all rendering with managed code. [...] Powered Textile Application Wins Design Award

Mon, 07 Aug 2006 18:56:00 GMT



A Monforts textile machine monitoring application won an iF Communications Design Award. The application was designed by :i/d/d using the fast vector graphics system for the user interface.

Fast scrolling beta for

Wed, 12 Jul 2006 17:42:00 GMT


We have released a beta of the vector graphics system containing fast scrolling enhancments. Click on the image above to run the Scrolling Scalability sample, to see the difference in performance. This demo is built with the 2.0 .net framework.

The new ScrollingMode property on Picture allows you to control the behavior. Using Accurate in the demo will show you the old performance. If you are a current 4.0/3.0 customer (full version), and your application should scroll faster, please email us for the beta download information, as well as the source code for the sample above. The source code contains a useful optimization technique for Pictures containing thousands of Elements, such as mapping applications. State Machine Editor for Visual Studio

Mon, 22 May 2006 23:08:00 GMT

(image) is a new way of doing .net development in Visual Studio. You can create state machines in Visual Studio using a graphical designer. The graphical designer uses vector graphics. A list of features:

  • Visual Studio integration
  • Graphically create flow charts and state machines
  • Your workflow (state machines) determine visualization and creation of controls
  • Monitor and log object lifetimes in running applications
  • Automatically generates documentation
  • Maintains a strict separation between architecture and application code
  • Simplifies debugging and error finding

Read more on the State Method web site. 4.0 Released: Visual Studio 2005 Support

Mon, 06 Mar 2006 17:25:00 GMT


Versions 4.0 and 3.0 of the vector graphics system are released. Version 4.0 supports Visual Studio 2005, and version 3.0 supports Visual Studio 2003. Read more in the Readme file.

Some new features:

  • Use the new Style Precedence property to override a Style in a sub Picture with a Style in a parent Picture.
  • Trigger code when the mouse wheel is rotated using the new MouseWheel event on every Element.
  • Copy and paste Styles in the Style collection editor.
  • Font caching increases the performance of displays using many different TextAppearance objects.

If you downloaded version 4.0.2702, and you ran into a file path error during installation, please re-download the latest build 4.0.2705, which fixes this installer error.

The screenshot above is a calendar pop-up window created with scalable vector graphics. The shadow around the window has per-pixel translucency, thanks to the TranslucentForm class.

Vehicle Tracking Simulation

Wed, 08 Feb 2006 17:28:00 GMT


If you write transportation management applications, or applications which track trucks, railroad cars, or other vehicles, you may be interested in this vehicle tracking simulation using vector graphics. It is a combination of the PanZoom and PathMove samples, demonstrating:

  • Real-time tracking of vehicles using scalable vector graphics
  • Implementation of a Vehicle class with custom properties
  • Movement of an object along a path
  • Control over velocity of movement
  • Zooming and panning
  • Throttling CPU usage of animation of specific objects
  • Layers using Groups

The Vehicle class custom properties:

  • Velocity
  • MovementPath: the path along which the vehicle moves
  • Position: distance along the movement path
  • Direction: forward or backward
  • State: normal, or alarm state, indicated visually by a change in the color (red vehicles are in the alarm state)

Download the executable by clicking on the image above. Download the source code, which compiles with Visual Studio 2003. You will need installed, full or Lite version.

Centralized Styles Sample; LED Radio Button

Thu, 02 Feb 2006 17:21:00 GMT


Click on the image above to run the Centralized Styles sample for vector graphics. Grab the lower right corner of the window to scale the UI larger and smaller.

Download the source code to learn how to centralize all your Styles into a single template Picture that overrides Styles recursively, starting at a top-level Picture and moving to sub Pictures.

In the future we will have a special class in you can derive from, a type of Picture, that you can drag and drop onto any Picture in order to reuse a central set of Styles. This sample code allows you to centralize Styles with released versions of, 2.7 or 2.8.

This sample also demonstrates how to create a vector graphics LED radio button, and how to use the TranslucentForm class.

If you are using a Lite version, change DisplayInTranslucentForm to DisplayInForm, and you can run the code. Designer in Visual Studio 2005, Beta

Tue, 10 Jan 2006 00:58:00 GMT


A beta version of the vector graphics Designer integrated in Visual Studio 2005 is released. If you are an existing customer, you will receive an email with download instructions.

Regarding version numbers: from now on, versions 3.x will be built for VS 2003, and versions 4.x will be built for VS 2005. These versions can be installed side-by-side. There is one problem in the beta version: if you uninstall the 4.0 beta, the documentation for both versions is uninstalled. This can be fixed by going to Add/Remove Programs and selecting "Repair" for

A big thanks to the Microsoft people who helped us around the breaking changes in Visual Studio 2005.

Drag, Drop, and Move Vector Graphics Components

Fri, 28 Oct 2005 00:44:00 GMT


Click on the image above to download and run the new drag-drop sample using vector graphics. This sample demonstrates two techniques for moving Elements or sub Pictures. If you mouse down and drag from the left column to the editing surface on the right, we use standard drag and drop events. If you mouse down and drag over an Element on the editing surface, we use mouse events to move the Element.

Mouse events are simpler, but the drag-drop events may be more appropriate when using multiple Canvas objects. See the sample source code for more information. You will need to install to build this sample.

If you are interested in 3D effects, examine the GlowButton class in this sample. 2.7 Released

Thu, 15 Sep 2005 14:51:00 GMT


Download the translucent calculator executable.

Version 2.7 of the vector graphics system is released. The Translucent Calculator article describes how to build a user interface completely defined with vector graphics, using the new TranslucentForm class.

The calculator has no window border, and the edges are anti-aliased with per-pixel translucency, as seen in the close-up below:


Grab any of the calculator corners to resize it using the mouse. Because this calculator is built with vector graphics, you can resize it without any of the pixel scaling problems inherent in bitmap graphics:


The techniques in the article are ideal for applications that use skinning and fancy user interface features, such as gel buttons. The article describes how to separate a user interface from application logic, so you can build a custom calculator skin.

Other new features in this release include:

  • Greatly improved performance, in memory and time, for path gradient fills, by sharing gradient cache data across similar Elements
  • Other performance improvements for non-shared path gradient fills
  • Use the new BaseStyle property in Style to collect common appearance properties from several Styles into a single location
  • All mouse events in the Picture class now bubble up to Canvas or TranslucentForm, which have a set of new events, including PictureMouseDown
  • You can now drag and drop a Picture from the Toolbox onto a Canvas or TranslucentForm to display in the recipient
  • Use new ElementPoint property in ElementMouseEventArgs to determine the mouse position in the coordinate space of the Element raising the event

For a complete list of changes see the version 2.7 Readme document. 2.4b

Tue, 03 May 2005 14:23:00 GMT Version 2.4b was released yesterday. It contains a small set of changes.

Designer Enhancements

  • If you wish to make all invisible Elements visible at design-time, select the top-level Picture and set the InvisibleAreDisplayed property to true. This has no effect at run-time.
  • If you wish to select disabled Elements by clicking with the mouse, select the top-level Picture and set the property DisabledArePickable to true. A "disabled" Element is one with Enabled set to false.

Run-time Only Enhancements

  • The CustomElement copy constructor is now protected, to be used by derived classes. We added the InternalFill, InternalStroke, and InternalTextAppearance protected properties, as well as supporting members so that a CustomElement based class can expose a Fill, Stroke, or TextAppearance property.
  • In DrawContext, we made several members public to support CustomElement derived clases: Font, TextBrush, GetFullTextBounds, GetTextPixelBounds, DrawText, PushTransformation, and PopTransformation.
  • We created a preliminary CustomElement sample, which draws text along an arbitrary Shape path. If you need to build a CustomElement (an advanced topic) please request a copy of this sample. In the future the sample will be added to the Extras package.

Bug Fixes and Obsolete Members

  • In the Designer Lite version only, if you attempted to exceed the object count limit, the Rotation and Shearing adornments would disappear. This bug is fixed.
  • Setting the Enabled property from true to false on a Shape caused problems with mouse events and display updates, if the DrawAction was set to Fill. This bug is fixed.
  • We added an overload for the Element HitTest method: bool HitTest(Vector point, out Element hitElement). The existing HitTest method has an additional boolean parameter called skipDisabled. This parameter is no longer supported, and the HitTest(Vector, bool, out Element) overload is now obsolete. 2.4 Released: More Vector Graphics

Tue, 26 Apr 2005 15:15:00 GMT

Version 2.4 of the vector graphics system is released. Some notes: Use the new PointText class to create text objects that are positioned relative to a point. Adjust the relative position using the TextAppearance HorizontalAlignment and VerticalAlignment properties. You can now draw all text, including text in Shapes and PointText, with an outline Stroke. We added a Stroke property to the TextAppearance class. Control Stroke visibility using the new StrokeVisible property. Use the new Active Group mode in the designer to work on Elements within a Group. Previously, you had to UnGroup, or select Elements by name, in order to work on child Elements in a Group. Now you can make the Group “active”, which allows you to select and work with the Group children as if they were not Grouped. This mode prevents you from inadvertently selecting Elements outside the Group, so you can focus all work on the Group. New Elements and Elements pasted from the clipboard all go into the Active Group. Derive from the new CustomElement base class to create Elements with custom rendering code. Use the new layout commands in the designer to adjust alignment, spacing, and centering of Elements. You can use all the commands on the Layout toolbar. We added numerous other features and bug fixes. Read the installed Readme document for more information. The Users Guide documents all new designer features, including new keyboard control during selection operations. In the following sections I discuss two new features, PointText and Active Group mode. Positioning PointText When you select a PointText, you will see a small blue diamond with a black edge: This is the Location adornment, marking the point specified by the Location property. Unlike other Element types, the Location of a PointText does not specify the position of the upper left corner. Instead, Location specifies a point around which the PointText is positioned. Change the TextAppearance HorizontalAlignment and VerticalAlignment properties to adjust the position of a PointText relative to its Location. In this illustration, HorizontalAlignment is set to Near: Active Group Mode You may need to select and modify child Elements within a Group using the mouse. The Group will be destroyed if you use UnGroup to access the Elements. Active Group mode allows you to access the child Elements while leaving the Group intact. When the Picture Designer is in Active Group mode, you can select and manipulate Elements with the mouse the same way you would operate on any Element at the top level of the Picture. Make a Group active using one of these methods: Click on the Change Active Group combo box in the Drawing Toolbar and select the Name of the Group. Select the Group and invoke the "Make Active Group" command on the right-click context menu<. The current Active Group is indicated by a dashed red rectangle called the Active Group adornment: Note If you wish to create a new, empty Group and immediately make it active, select the "New Group..." command from the Change Active Group combo box. You will be prompted for a name for the new Group (which can be left blank), the new Group will be created, and made active: To Exit Active Group Mode Use one of these methods to exit Active Group mode: Choose "(none)" from the Change Active Group combo box on the Drawing Toolbar: Choose the Exit Active Group command from the right-click context menu: Working within an Active Group By making a Group active, you can focus work on a sub-set of Picture Elements: Only Elements within the Group can be selected with the mouse. You can select Elements by clicking or by using a lasso. If you create new Elem[...]

3D Effect Vector Graphics Arrow

Fri, 18 Mar 2005 23:59:00 GMT


This is a cool 3D effect arrow created with vector graphics. The construction of this arrow is described briefly on the forum. If you would like a Picture file containing the arrow, let us know on the forum.

Active Groups: Seeking Feedback

Sat, 12 Mar 2005 00:49:00 GMT


We are seeking feedback on the new Active Group enhancement. Please respond on the forum. Making a Group Active is a way to restrict all work to a sub-set of Elements.

Real-Time Data Visualization Using Vector Graphics

Thu, 16 Dec 2004 14:43:00 GMT


The Sockets code sample is explained, in English this time, in the following article: Visualization of Real-Time Data Using Vector Graphics. The sample uses TCP/IP to communicate simulated real-time data changes from a server to a client. The client uses vector graphics to visualize the incoming data.

The article explains how to create 3D-effect LED components, using techniques similar to those described in the Gel Ellipse post.

Scada Demo and Performance Improvements

Mon, 06 Dec 2004 23:18:00 GMT


In the upcoming version 2.3 of the vector graphics system, we made a significant performance improvement in complex displays with many objects and simultaneous animation in multiple portions of the screen. Download and run this simulation of a mixing process, which has been linked with version 2.3. Formerly this demo took close to 100% of the CPU; now it takes about 0%, with occasional spikes.

An interesting post about the performance of Avalon vector graphics appeared on the newsgroups today. I posted some results from the Scalability test for comparision. compared to Flash and SVG

Wed, 24 Nov 2004 16:54:00 GMT

On the website was noted in the forums. A couple posters compared to Flash and SVG. I pointed out some significant differences between and Flash or SVG, and I repost those differences here.

The runtime is free, like Flash. has these differences with Flash:

  • It is not an activeX control, it is a .NET dll written in 100% managed code that can be simply deployed.
  • It is designed for .NET programmers, with an API compliant with standard MS guidelines. Flash is clumsy for .NET programmers.
  • Because it is a .NET assembly, it can be used in any .NET language.
  • Because it is used by compiled .NET languages, it has a speed advantage over Flash. All components created with can also be reused in any .NET program.
  • There is a designer integrated in Visual Studio .NET, so programmers can create graphical components the same way they would create a Windows Form or UserControl. Each component can be given custom properties, methods, and events.

Based on the above description you can probably see how it is much easier for .NET developers to use instead of SVG and an ActiveX control:

  • Easier to deploy, especially in restricted security settings, because it is 100% managed code, and does not depend on an ActiveX control.
  • A .NET oriented API, as described above. We also strove to make it easier to use than SVG.
  • Use any .NET language, not javascript.
  • All languages compiled.
  • A heck of a lot faster than SVG. This is due to the compilation and years of optimization work on the run-time engine.
  • No parsing is required at run-time. Components created in the designer are compiled down to binary MSIL at compile time.
  • Great scalability.
  • Fully exposes GDI+ capabilities -- features that are not available on SVG include path gradients, bell curve gradients, many text properties.
  • A component oriented architecture. We encourage the creation and reuse of graphical industry-specific components, each of which is a .NET class with custom properties, methods and events. Once a library of components is created, they can be reused acrosss multiple higher level screens or components. Components can be nested to any depth.

I believe it is that last point that is the greatest strength over a data-file oriented system such as SVG.