Tips and Frequently Asked Questions
How to delete an item
AdvSmoothImageListBox1.Items.BeginUpdate;
AdvSmoothImageListBox1.Items[0].Free;
AdvSmoothImageListBox1.Items.EndUpdate;
Drag Drop
Update smooth controls faster with BeginUpdate and EndUpdate
This short article describes the use of BeginUpdate and EndUpdate methods to allow faster updating and repainting.
When creating a smooth listbox or a smooth imagelistbox with 500+ items in code, it tends to be slow when starting the application.
For each item that is added / deleted or updated, the listbox is updated. It is just a matter of milliseconds to update the listbox for one item, but imagine the time that is needed to update 500 items. And these items are drawn with the default layout. With more advanced items the update process can be painfully slow.
Because we cannot predict when the user wants to update the listbox, we have implemented a BeginUpdate and EndUpdate which *blocks* the painting of the listbox until the EndUpdate is called. Then all the calculations and painting is executed once, with all the new information the user has inserted in the items.
Below is a code sample based on the TAdvSmoothListBox component to update all items between a BeginUpdate and EndUpdate.
var
i: integer;
begin
AdvSmoothListBox1.Items.BeginUpdate;
for I := 0 to AdvSmoothListBox1.Items.Count - 1 do
begin
AdvSmoothListBox1.Items[i].Caption := 'Item Updated !';
end;
AdvSmoothListBox1.Items.EndUpdate;
Important note !: All BeginUpdate calls must end with an EndUpdate. In other words: The count of BeginUpdate and EndUpdate calls must be equal. When this condition is false, the listbox will not update, and the listbox will not respond to other update calls.
A List of components which currently implement the BeginUpdate and EndUpdate:
- AdvSmoothListBox (AdvSmoothListBox.Items.BeginUpdate / EndUpdate)
- AdvSmoothImageListBox (AdvSmoothImageListBox.Items.BeginUpdate / EndUpdate)
- AdvSmoothDock (AdvSmoothDock.BeginUpdate / EndUpdate)
- AdvSmoothExpanderGroup (AdvSmoothExpanderGroup.BeginUpdate / EndUpdate)
- AdvSmoothSplashScreen (AdvSmoothSplashScreen.BeginUpdate / EndUpdate)
- AdvSmoothTimeLine (AdvSmoothTimeLine.BeginUpdate / EndUpdate)
- AdvSmoothTouchKeyBoard (AdvSmoothTouchKeyBoard.Completion.BeginUpdate / EndUpdate)
Adding items & extra properties in code
In this code sample, the image will be directly (non threaded) loaded in the TAdvSmoothImageListBox:
procedure TForm1.AddItems;
var
i: integer;
begin
//Adds 20 items
for i := 0 to 20 do
begin
with AdvSmoothListBox.Items.Add do
begin
Enabled := True;
//If enabled false then the item will be drawn in disabled fill
Visible := false;
//the item will be invisible
Image.LoadFromFile(‘image1.jpg’);
//the image will be loaded on the item
Caption.Text := ‘Item ’+ inttostr(i); Splitter := false;
//if splitter is true a splitter will be drawn between the items
…
end;
end;
end;
To have the listbox background thread load the images for higher responsiveness of the application, following code can be used:
procedure TForm1.AddItems;
var i: integer;
begin
//Adds 20 items
for i := 0 to 20 do
begin
with AdvSmoothListBox.Items.Add do
begin
Enabled := True;
//If enabled false then the item will be drawn in disabled fill
Visible := false;
//the item will be invisible
Location := ‘image1.jpg’;
//the image will be loaded by thread
Caption.Text := ‘Item ’+ inttostr(i);
Splitter := false;
//if splitter is true a splitter will be drawn between the items
…
end;
end;
end;
You can also add a whole directory of images either threaded or not threaded. When the threaded method is choosen, the images are loaded via a separate thread. This separate thread loads only the visible images for efficiency. As the list is scrolled, new visible item‟s images will be loaded by this thread.
Not threaded:
AdvSmoothImageListBox.AddImagesFromFolder(„C:\directory\*.jpg‟);
Threaded:
AdvSmoothImageListBox.AddImageLocationsFromFolder(„C:\directory\*.jpg‟);
Image types supported are: jpg, jpeg, bmp, png, gif, tiff and ico.
Customizing ImageListBox items
Below is an overview of the important visual elements of the Image Listbox item.
1) The item can contain HTML text and can be positioned at any place on the item area. With the TextAlign property the position of the text can be controlled.
2) The image of the item. The image can be positioned with the ItemAppearance.ImageAlign property. The image can be drawn taking the aspect ratio in account or not.
3) The HTML notes text of the item can be formatted with a design time HTML editor. The HTML can contain images listed in a TGDIPPictureContainer or a TImageList. When clicking on an anchor of the HTML text the event OnAnchorClick is called.
Visual organisation of TAdvSmoothImageListBox
TMS TAdvSmoothImageListBox is a component with the following main visual elements:
1) The header can contain information on how the items are organised or which types of items are displayed in the ListBox. Appearance of the header can be fully controlled: all characteristics of the fill can be set, text can be positioned in various locations, text can contain HTML formatting tags, additional images can be set. The header can also be set invisible.
2) The optional footer is identical to the header and allows displaying extra information at the bottom of the list, such as summary information for example like “Number of images: …”
3) This is an example of a top layer item which can be fully customized and can be placed on various positions on top of the listbox. A top layer item can also display HTML text. The fill of each top layer item can be fully customized including its opacity.
4) An item added to the collection can be either an item or a splitter. The splitter can contain text and also a collaps/expand button. With the expand/collaps buttons, all items between two splitters can be made visible or invisible.
5) An item added to the collection can contain an image and HTML text. Different appearance settings can be set to control the position of the image and text in the item. These settings can be found under TAdvSmoothImageListBox.ItemAppearance