Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Tile Control Tutorial. Step 5: Create a Detail Page

  • 2 minutes to read

In this step, you start with the fully configured and decorated tiles on the main application form. A click on the OpenDevExpressURL tile opens the official DevExpress site, and the HouseDetailPage tile displays a number of successive frames whose content is loaded from the provided Houses dataset.

Since the Tile Control allows you to use any TWinControl descendant as a Detail Page, add a new frame to the demo application project. Change the frame’s automatically generated name to HousesDetailPage in the Object Inspector and save the source file as HousesDetailFrame.pas (or HousesDetailFrame.cpp in C++Builder).

In the Delphi project, insert the following line to the ‘var’ clause of the HousesDetailFrame unit:

Delphi
ADetailPage: THousesDetailPage;

In the C++Builder project, make sure that the pointer to a frame instance is declared in the HousesDetailFrame.h header file:

C++
extern PACKAGE THousesDetailPage *ADetailPage;

To be able to access the newly created frame from code, add the HousesDetailFrame unit to the MainForm unit’s uses section (or include the HousesDetailFrame.h file to the MainForm.h header in C++Builder).

Then, assign the HousesDetailPage frame as the HouseDetailPage tile’s Detail Page by using the DetailOptions.DetailControl property in the Object Inspector:

Then, handle the HouseDetailPage tile’s OnActivateDetail event:

procedure TTileControlDemo.HouseDetailPageActivateDetail(Sender: TdxTileControlItem);
begin
  if(Sender.DetailOptions.DetailControl = nil) then
    Sender.DetailOptions.DetailControl := ADetailPage;
end;

Run the demo application. A blank detail page unfolds in response to a click on the HouseDetailPage tile:

Population of the detail page is discussed in the next step.

See Also