Visualizing TPath Data at Design Time using the LiveBindings Designer

For today’s #DelphiWeek blog post, I thought I would highlight the design-time visualization of TPath data.

TPath data represents a series of connected curves and lines. You can use path data to build graphic shapes by connecting a series of curves and lines. You can also use path data to create the path to be followed when applying a TPathAnimation. Several program such as Inkscape allow you to draw your own vector shapes and then export the path data for use in other programs.

This example uses the following components:

1. TToolbar with a parented TLabel
2. TPath
3. TPrototypeBindSource bound to a TBindNavigator
4. TPath
5. TStyleBook (optional). I loaded the CoralCrystal premium Mac style to it.

Steps:

Place TToolbar onto your form, and parent a TLabel to it. Align TToolbar to the top, align TLabel to Contents, and set HorzAlign to Center. Set TLabel’s StyleLookUp property to toollabel.

Place a TPath Component onto your form. Next, place a TMemo onto your form.
In this demo, we are going to use existing TPath sample data. Place a TPrototypeBindSource onto your form, right-click it, select ‘Add Field…’ and select PathData.

Right-click on TPrototypeBindSource and select ‘Add Navigator’.

Place a TMemo onto your form and align it to the bottom. The memo is going to display the actual path data.

Go to View->LiveBindings Designer. Bind PrototypeBindSource1.PathData1 to Path1.Data.Data. Bind Memo1.Text to PrototypeBindSource1.PathData1.

Here is the running application. The BindNavigator component allows you to quickly navigate back and forth between the path data shapes.

Note: You can easily add your own PathData using the Data.Data field for TPath and then preview a single shape using the Path Designer editor:

To learn more about TPath, visit our docwiki.

To learn more about this week’s #DelphiWeek celebration, click here.