Warning: This blog post covers an unreleased product, which is subject to change until GA.

The release of RAD Studio 10.4.2 is getting closer and you can join our preview webinar tomorrow, see https://blogs.embarcadero.com/whats-coming-in-10-4-2-sydney/. This is some pre-release information (or beta blogging) on one specific area, new VCL controls.

New VCL TControlList control

Embarcadero is introducing in the VCL library a new flexible and virtualized list control. The idea behind this control is to offer a new modern looking VCL control offering custom UI configuration and a high performance control, which can be used with very long lists. This list represents a single selection list and all items are visually of the same height and width.

The new control allows the developer to define the content by designing one of the elements of the list using graphical controls (that is, TGraphicControl descendants) and provide data to the control to display individual elements, without creating all of the controls for all of the elements in the list, but only those needed to display the data. Being totally virtual, the list can handle thousands and even millions of items, offering extremely fast scrolling. Beside calculating and displaying only the items that fit on screen, the list caches the content of the items using in-memory bitmaps.

The new control resembles the classic TDBCtrlGrid control -- there is a panel for controls, you put controls on it and have virtual items created at run time. Unlike DBCtrlGrid we can put only TGraphicControl on it and all items are virtual. Below you can see the control at design time (with the surface of a single item available for editing) and at runtime (with the same content multiplied many times).

This list doesn’t include a collection of items with specific information. The data might be provided either via live bindings (including binding to a dataset or a collection of objects) or via an event to query for the data of an individual item (so that the direct storage and mapping would be completely up to the developer). For each item to display the control calls an event handler you can use to customize each item appearance, in this case just modifying the Caption of the label:

procedure TForm2.ControlList1BeforeDrawItem(AIndex: Integer;
  ACanvas: TCanvas; ARect: TRect; AState: TOwnerDrawState);
begin
  Label1.Caption := 'Label' + AIndex.ToString;
end;

With the previous design, 10,000 items and multiple columns, this trivial code produces an output like below:

At design time, there is special dialog with a collection of preset configurations, which include adjustment for TControlList properties and control collections with specific properties. You use the arrows at the top to pick the core configuration and you can fine tune it with some of the other checkbox options at the bottom. The wizard overrides the control list setting.

The item you design is replicated (virtually) for each of the items requested with the ItemCount property. The visible surface of the control generally allows for a number of items, all with the same width and height. The control has 3 different layouts:

  • Single for a single columns of items, in which case the width of the item will match with the control width.
  • Multi Top To Bottom allows for multiple columns and will use the available vertical space before moving to the next column, offering vertical scrolling.
  • Multi Left To Right also allows for multiple columns but uses a different  layout and horizontal scrolling mode (see image below).

In general terms, you can use the OnClick event for any control on the control list. The control supports High-DPI options and VCL Styles and it is fully Live Bindings enabled.

The new TControlListButton component

We can't use TSpeedButton directly on the panel, because the control doesn’t handle special interactions like button changed state. For controls, which can have different states, we added a special TControlListControl class (inherited from TGraphicControl). You can create new controls that inherit from TControlListControl class and can use mouse events for their items. This is the approach used by TControlListButton - the analogue of a TSpeedButton that can be used with TControlList. This button has 3 styles - push button, tool button and link.

New VCL TNumberBox Control

The new VCL TNumberBox control is a modern looking numeric input control modeled after the Windows platform WinUI NumberBox control. The control supports the input of integer numbers, floating point numbers with a given set of decimal digits and proper formatting, and currency values: 

The user can increase or decrease the value using arrow buttons or allows keys or mouse wheel, and also increase and decrease by a large value using Page Up and Page Down keys. The component includes an optional spin button (configured with the SpinButtonOptions Placement property), which can be compact, inline, or disabled, as shows here respectively:

The component also supports simple expression evaluation; if enabled a user can input an expression like 40 + 2 and the control will replace it with the result. The control supports computing inline calculations of basic equations such as multiplication, division, addition, and subtraction (allowing the use of parentheses). Notice that you can use the symbols + and - both as binary and unary operations, so you can type -23 or + 23, you can write 55+23 and 55-23, and even combine them as in 53++23 or 53--23, which is evaluated as 53 - (-23). thus adds the two values.

Stay Tuned

That's all for now. Tune in on tomorrow preview webinar and (once released) download the trial version to experiment with these new VCL controls.